Just a few useful accessibility notes..
The accesskey attribute
accesskey attributes to important list items, content areas, and any other key areas of the document. For example, we can use alphanumeric characters as
accesskey values, like so:
<ul> <li><a id="home" accesskey="h" href="http://domain.com/home.html"><span class="accesskey">h</span>home</a></li> <li><a id="menu" accesskey="m" href="http://domain.com/menu.html"><span class="accesskey">m</span>menu</a></li> <li><a id="search" accesskey="s" href="http://domain.com/search.html"><span class="accesskey">s</span>search</a></li> </ul>
accesskey attribute is present within a link tag, pressing
alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an
accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements are navigated as the
alt+letter combination is pressed.
It is also helpful to provide “skip-to” or “jump” links that target specific areas of the site. For example, you may wish to enable users of screen readers to skip past or skip to navigational controls:
<div class="hide"> <ul id="top" class="access"> <li><a href="#content" title="Skip to Content" accesskey="c">Skip to Content</a></li> <li><a href="#navigation" title="Skip to Menu" accesskey="m">Skip to Menu</a></li> <li><a href="#search" title="Skip to Search" accesskey="s">Skip to Search</a></li> </ul> </div>
However, due to current lack of widespread browser support, explicit id-targeting may serve better:
<a href="#menu" title="Skip to navigation menu">Skip to navigation menu</a> <a href="#content" title="Skip to main content">Skip to main content</a>
The tabindex attribute
Another useful accessibility tool involving document meta-navigation is the
tabindex attribute, which is a numerical index that represents each element’s position in the tabbing order. By default, certain elements are ignored by the tabindex, while others retain a default order which may be overridden with explicitly stated tabindex values. Consider the following example, in which the tabbing order will be “red”, “yellow”, “blue”, regardless of where the input elements appear on the page:
<form> <input id="red" tabindex="1" /> <input id="yellow" tabindex="2" /> <input id="blue" tabindex="3" /> </form>
More to come..