“Skip to Nav” vs “Skip to Content”

When trying to build an accessible Web site it is often a good idea to put in a link for screen readers to jump over repetitive navigation elements on page and hit the content of the page.  It might look something like

Next using CSS you would set #skip {display: none;} and normal users are happy while screen reading devices will skip hearing your logo and navigation menu. This is the common way most Web developers build accessible markup, but is it right?

Thinking in an opt-in/opt-out kind of way, a person hearing such pages will be presented a skip to content link over and over and over again, very likely selecting it to get a sense of what is on the page before moving on.  It would seem to make more sense for the user to opt-in to the navigation and get the content by default rather than to opt-out of the navigation.

An alternative idea we have been experimenting with here at PINT on a few recent sites is actually to change the logic to skip to navigation instead.

Skip to navigation

and then immediately show the

heading of the page or content of note.  This seems to have dual benefit.  First it allows the screen reader to get to the page content quickly and only choose to deal with navigation when they want.  This makes the process more opt-in than opt-out.  Second, this small change allows us to put the content of the page higher up in terms of what a bot would see which likely would appeal to better indexing.  While we certainly don’t subscribe to the old wive’s tales of very restrictive bots only indexing a few things it does get to the content point a lot quicker which is what bots are at your site for in the first place.

A caveat here about the small change in approach.  The “skip to navigation” link makes sense on content page and the “skip to content” makes sense on navigation pages.  This would suggest the home page or primary section pages should probably be done as they traditionally are, but that other content rich pages use the logic we suggest.