Accessibility of different devices

Don’t do “skip to content” links wrong

In the last few months I’ve been doing a lot of research on how blind users use webpages using screenreaders, including spending a lot of time blindfolded and using these for myself. I discovered a few things, and found that a lot of what I thought was true, were actually myths.

A screenreader reads content of the webpage aloud, and one of the first problems you’ll notice is that it’s easy to lose track of where you are on the page, and get lost in a sea of navigation links, unable to find the main content. If you consider the classic WordPress site, it’ll have top level navigation options, and hidden inside these it might have several sub-options that only appear to sighted users when they hover over the menu. A screenreader will mush all these down into one long list that it’ll read out, sometimes taking minutes before it gets to the main content of the page.

SEE ALSO: Some awful website dark patterns
SEE ALSO: Some awful website dark patterns

We could of course put all these navigation options after the content, but it’s too deeply engrained into us now that that’s where we look for navigation. We look for it at the top of the page, or at the side, and that’s not going to change. Plus, for a screenreader user, it’s useful to announce all the navigation options – once or twice. But there’s no need to sit and listen to a sea of links every time you browse to a new page.

That’s where the “skip to content” links are useful. These are (usually) invisible links right at the top of your page that are the first thing read aloud by a screenreader. They give screenreader users the option to skip the navigation and go straight to the content – if they want.

These links are sometimes called “Skip navigation”, although I much prefer “Skip to content” which more clearly tells the user where they’re navigating to. There’s some alternate wording explained here.

Implementation

<div id="skiptocontent">
  <a href="#maincontent">skip to main content</a>
</div>

Don’t do it wrong

I don’t mind admitting that for a long time I was actually getting this wrong. Like many people I’ve spoken to since, I was under the false impression that screenreaders completely ignore CSS and read out the bare page content. One of the things I discovered by using screenreaders recently is that they actually understand the CSS, and anything marked asdisplay:none actually won’t be read aloud by the screenreader (in the most popular screenreaders NVDA and JAWS anyway).

So don’t use CSS that makes the #skiptocontent div above display:none, as that will completely negate the point in using skip to content links!

So you might be wondering how you’re supposed to make it invisible without usingdisplay:none. Here’s what the W3C recommend:

#skiptocontent {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
}

Are “skip to content” links still necessary?

If you’re up-to-date on your HTML knowledge you’ll know that there’s HTML5 structural elements or ARIA roles to choose from, both slightly different methodologies that do the same job. They allow you to markup your page to identify common things like navigation and main content.

As good as these methods are, they’re still not used in every website, and it’ll take a long time before screenreader users start using them comfortably. So for now at least, it’s best to still use the “skip to content” links.

4 thoughts on “Don’t do “skip to content” links wrong”

Leave a Reply

Your email address will not be published. Required fields are marked *