demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Creating Accesskey Shortcuts For Site Navigation

accessibility / navigation

Estimated reading time: 1 minute, 56 seconds

One of the principles of is that making websites accessible benefits everyone, not only people with differing abilities. In the past, I’ve used the accesskey attribute to enhance forms, but relatively few web developers appreciate that accesskey can also be used on tags other than <label>, most especially links, in a way that benefits both experienced users and those requiring keyboard shortcuts.

There is a loose standard for accesskey values for site site ; 1 is generally used for the Home page, 3 for Site map, 4 for search, 0 for help, etc. These can be added directly to <a> tags in navigation:

<nav>
<ul role="navigation">
<li><a href="index.html" accesskey="1">Home</a>
<li><a href="about.html" accesskey="2">About</a>
<li><a href="map.html" accesskey="3">Site Map</a>
<li><a href="search.html" accesskey="4">Search</a>
<li><a href="help.html" accesskey="0">Help</a>
</ul>
</nav>

The keyboard combos for accesskey shortcuts differ slightly across browsers and platforms:

Accesskey Keyboard Modifiers For Different Browsers
BrowserOperating SystemExample
Internet Explorer / Chrome / SafariWindowsAlt + 0
FirefoxWindowsAlt + SHIFT + 0
Firefox / SafariMacCtrl + 0
ChromeMacCtrl + Opt + 0

I’ve added access keys on the blog you’re reading now; feel free to try them out.

Accesskeys For demosthenes.info
KeyFunction
1Home page
SFocus cursor in search input
4Initiate search
0About
. (period)Go to next page
, (comma)Go to previous page

Two final points of note:

  • accesskey values must be unique on the page in which they are used; as navigation will still be present on a form page, this means greater restrictions on which accesskey values are available for form elements.

  • Ideally accesskey values should be visually indicated in the navigation, using the same CSS techniques you would use for form labels.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.