Hidden table of contents for screen readers

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>

Answer 2

Keep in mind that screen readers usually announce hyperlinks as such. Which means that your first example won't be read out as "Jump to section one jump to section two jump to section three" but rather as "Link: Jump to section one, link: Jump to section two, link: Jump to section three" or some such.

(Personally, I would still go with the second, semantic option, but that's just my personal preference.)

Answer 3

You should place the links in an with an id (or class) of #nav. This gives those using screen readers a heads up that the content is a list of links: "This is a list with three items: A link, 'jump to section one, a link 'jump to section two'..."

Placing the "ul" in a "div" with an id of "#nav" is functional, but the div is not doing anything other than wrapping the "ul" for identification. It is cleaner to just id the "ul" and leave the "div" out. The following code is the best (I think). Clean and to the point.

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

To remove the text from the page with css, you use:

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

Answer 4

With a good semantic layout, you don't need it. You can make the navigation elements you're already using compatible with the screen reader. The 2nd option is normally how you make that happen. You can style the list items to match what you're currently doing.

Answer 5

The best way to do what you have requested is to use the <ul> with the anchors inside them.

However there are some bugs in WebKit that will cause the focus to not actually shift to the targeted element, so you will also need to attach an event handler to the links so that the focus shifts. This will also require the target to be tab focus sable (tabindex="-1" will work for this).

However, if you have good heading structure on the page, then the screen reader user can navigate the page without needing this navigational menu you are creating. In fact this menu might be more useful for keyboard only users who do not have a screen reader. In that case, you will want to make it appear on focus so the keyboard-ony user can see it.