After access keys 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 need of a skip nab link is to hide both images and CSS for the site under question. (You can do this by going into the Web Developer toolbar and replacing images with their alt/title 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, demosthenes.info looks something like the image you see to the left.

Neither CSS nor images can be read by a screen reader: all the software does is translate text into speech. (Screen readers will, however, read the alt or title attributes on images).

The problem is that the screen reader must start at the top of the page and begin to translate the text it encounters into computer-generated speech, going through each 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 demosthenes.info, the skip nab feature code is simply this:

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