Question

I’ve seen on a couple of sites that they will include a navigation section at the top of their page, with internal links to other parts of the page, so that users with screen readers can quickly jump to the content, menu, footer, etc. This ‘nav’ element is moved off-screen with CSS so regular users don’t see it.

What’s the best way to implement this? That is, what’s the most accessible and least-intrusive for screen-readers? Here is what I’ve been playing with:

<div id='nav'>     <a href='#one'>Jump to section one</a>     <a href='#two'>Jump to section two</a>     <a href='#three'>Jump to section three</a> </div>  <!-- versus -->  <ul id='nav'>     <li><a href='#one'>Jump to section one</a></li>     <li><a href='#two'>Jump to section two</a></li>     <li><a href='#three'>Jump to section three</a></li> </ul> 

The first has the benefit of being much cleaner in its markup, but isn’t exactly semantic. Also, it appears like ‘Jump to section one Jump to section two Jump to section three’. I know that the visual appearance isn’t important, since it’s hidden, but does that affect how it is read out? Are there appropriate pauses between each one?

The second is a bit more verbose in its syntax, but hopefully more descriptive.

Which out of these is better, and is there an even better way?

Answer 1

You can download a plugin for Firefox called Fangs (in reference to the real screen reader Jaws). It will produce text of which Jaws would read. It’s very handy. I’d go with a good semantic layout over just the links one after the other. I’d also hide it with… something like

#nav {     position: absolute;     left: 0;     top: -9999px  } 

Using display: none may not be read out in some screen readers.

In my own sites, I’ve generally done this:

<div id='section-nav'>     <p>Jump to</p>     <ul>        <li><a href='#section1'>Section1</a></li>     </ul> </div>