New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Accessibility Notes Plus

Just a few useful accessibility notes..

The accesskey attribute

Add 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>

When an 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.

Skip/jump links

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..

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Digging Into WordPress: Take your WordPress skills to the next level.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.