After accesskeys and prev/next links, there is one final feature to add to a site to make it fully accessible: the ability for users to skip navigation.

The easiest way to understand the potential need for skip nav link on a site is to hide both images and CSS for the site in question. (You can do this by going into the Web Developer toolbar and replacing images with their alt text (Images / Replace images with alt attributes) and turning off CSS (CSS / Disable all styles).

Now you see your web page as screen reader software does. Under those conditions, the incarnation of this site at the time of writing looks something like the image you see to the left.

Broadly speaking, neither CSS nor images can be read by a screen reader: all the software does is translate text into speech. (They will, however, read the alt values of images).

The problem is that the screen reader must start at the top of the page, translating the text it encounters into computer-generated speech line by line. That’s not so bad on the blog you’re reading now, with a relatively light horizontal navigation bar. But you can imagine the length of material that would have to be read if the vertical navigation was placed to the left, rather than the right: with CSS turned off it would appear first, meaning that the screen reader would have to read through every piece of sidebar content before getting to the actual content of the page.

To get around this, we introduce a “skip navigation” link as the very first piece of content on the page. That allows people who use screen readers to “skip ahead”, past irrelevant material and get to the meat of the site. The skip navigation works exactly as anchor links do: place an id on the first piece of “real” content (in my case, the containing div of the first article), and link to it, just as you would link to an anchor. So in the case of this site, the skip nav feature code is simply this:

<a href="#content">Skip navigation</a>

That’s it: so long as the link remains the first piece of body content in the page, screen readers will read that as the first option and allow their users to jump forward to the actual content on the page.

Ironically, the “skip nav” feature doesn’t have to be terribly visible, as it is only screen readers that will encounter it: sighted users don’t need to see it. For that reason, I place it up at the very top left corner of the banner with some CSS, in a non-distracting color.

Modern screen readers don’t need a “skip nav” feature in the site if the pages use ARIA Landmarks extensively.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.