demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Skip Navigation for Accessibility

accessibility / navigation

Estimated reading time: 2 minutes, 23 seconds

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

demosthenes.info as it appeared in October 2010 with no CSS or imagesNow you see your web page as screen reader software does. Under those conditions, the incarnation of demosthenes.info at the time of writing looks something like the image you see to the left.

Broadly speaking, neither nor 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 demosthenes.info, 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.