For improved keyboard accessibility, use skip navigation links along with a coherent heading outline, ARIA landmarks, and a javascript polyfill for Webkit based browsers.
Why Use Skip Navigation Links?
It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration when the page outline is not well defined. In order to address this issue, version 2.0 of the Web Content Accessibility Guidelines (WCAG 2.0) has specified a guideline for bypassing repetitive blocks of content. One technique recommended by the W3C is to include a skip navigation link at the beginning of the page, that changes focus to the first element after the repeated content.
How do I use Skip Navigation Links?
Add a link at the top of your body content whose href value points to the id of the element that wraps your primary content. Like so:
[gist id=5599774]
Disclaimer: The mechanism by which skip navigation links work had been broken in Webkit based browsers for some time and has only recently been fixed. Until these browsers release the fixes, you may need to use a javascript polyfill to make skip nav links work.
What about ARIA?
Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support heading navigation and ARIA landmarks. You should take advantage of these features by using a clear heading outline and defining page regions.
Note: The last post I authored, Use ARIA Landmarks Instead of Skip Nav Links, presented a strategy that was predicated in part on the fact that skip navigation links have been broken in Webkit for the past three years. This bug has recently been fixed, so I was inspired to revisit the topic.
About the Author
