Accessibility: Skip links

October 03, 2010 Accessibility Snippet

This is a really easy thing to do and will help all the people that rely on screen readers to view your pages. Screen readers will list all the content on your page, from top to bottom, starting over at each page. By visually viewing the page, the eye can jump over elements it already recognize (such as menus etc) right to the content that the viewer is interested in. Often the main content. With a few lines of HTML and a style you can enable all those who use screen readers to do the same.

This is done by creating "invicible" links at the top of the page pointing to areas of interest. The first thought for doing something invicible might be to set the display style to "none". However, that would result in that some screen readers ignore the block just because it isn't visible at all. The correct approach is to have it still visible but remove it way off the screen.

In order to support keyboard shortcuts we'll also add access keys to our links.

Be sure to put the invicible menu in front of all other content.

In this sample there are two links. One that jumps down to the HTML element with the id set to "content" and one link to a different page.

The HTML part:

<ul class="skip">
  <li><a accesskey="S" href="#content">Jump to main content</a></li>
  <li><a accesskey="3" href="/MySitemap.html">View sitemap</a></li>
</ul>

The style:

.skip {
  position:absolute;
  top:-999px;
}

Recommended access keys:
S - Skip navigation
1 - Home page
2 - What’s new
3 - Site map
4 - Search
5 - Frequently Asked Questions (FAQ)
6 - Help
7 - Complaints procedure
8 - Terms and conditions
9 - Feedback form
0 - Access key details

Accessibility: Skip links

Related posts:

Comments