accessible and universal web design, development, and consultation

Learn More

Skip navigation

man skipping ropeAt a recent Web Designer User Group meeting, the issue of the “Skip navigation” guideline from the Section 508 web accessibility standards was raised. One of the presenters had used the “skip navigation” feature on the web site he was showcasing, but had “hidden” the link from view using CSS. Someone raised the question, “why would you hide it?”

Given the time available at the meeting, I did not provide a response then, but I will now.

First, to explain fully what “skip navigation” is I will refer you to the Web AIM website where you can read an extensive explanation.

But the short answer is…When the Section 508 web accessibility guidelines were developed 12 years ago as an addition to the Vocational Rehabilitation Act of 1973 the issue of navigation links, or the navigation menu commonly found on web pages created headaches for people who used screen reader assistive technology.  At the time, people who used screen readers had rather limited options when it came to reading web pages as the technology of the time could just basically read the content of the page without differentiating various parts. The standard web design custom then – as now – was to build a web page with a title at the top, a menu of internal links (navigation links) either across the top of the page or down the left side of the page, and the content below or to the right of the menu. This meant that a screen reader user had to listen to all of the content of the menu before they got to the main content of the page. It may be okay to read all of these navigation links on first page visited, but it quickly gets tedious when one reads through multiple page on a website and is forced to listen to all of the menu items repeated over and over again. So, the “skip navigation” link was a method designed to help screen reader users by creating a by-pass link around a long list of menu items.

As the years have gone by screen reader technology has changed dramatically and there are now methods built into all of the major screen readers that allow the user to move about the web page more readily ostensibly allowing the user to “browse” the content without having to read every word. However , the Section 508 guideline on “skip navigation” (specifically standard “o”) continues despite these advancements.

I should point out that another method web designers can now use to solve this issue is to put the content toward the top of the page and the navigation after the content. The designer then uses CSS to relocate the navigation menu content back at the top or side of the page for non-screen reader users to see in the usual location. But the screen reader “sees” the page in the order is it written with the content first and the navigation menu later. This is the method I prefer to use and I always seek to choose CMS themes/templates that are designed to render the content in this manner.

Regarding the “hiding” of the “Skip Navigation” link – that’s purely optional as the Section 508 requirement is still met as long as the screen reader can see it. There really is no obvious reason to make it visible and it has the potential to create some confusion to the casual web user.

Why this is particularly interesting is that today WebAIM released a report on their third survey of screen reader users. In December 2010, WebAIM conducted a survey of preferences of screen reader users and received over 1,200 responses. One question pertained specifically to the “skip navigation” issue and I think it supports my position.

When survey respondents were asked, “When a ‘skip to main content’ or ‘skip navigation’ link is available on a page, how often do you use it?” 29% said they used it “sometimes,” 22% said “seldom,” and nearly 14% said they “never” use this feature. On the other end, 15% of respondents said they used the skip navigation links “Whenever they’re available” and just over 16% said they used them “often.” This suggests that the “skip navigation” is used by a minority of screen reader users. The report also observes that, “…there has been a slight decrease in the usage of ‘skip’ links…likely due to increased usage of headings and landmarks for navigation…” In addition, the survey also reports that just over 57% of respondents use the “Navigate through the headings on the page” as the most popular method for “finding information on a lengthy page.”

I suspect that when Section 508 is revise in the coming years the “skip navigation” requirement itself will be…skipped!

What do you think?

Photo credit: Image licensed by Creative Commons by MonkeySimon

  6 comments for “Skip navigation

  1. March 4, 2011 at 8:24 am

    Good post with good points. I wrote about this two years ago: the the shelf life of a skip link and had similar thoughts.

    The onset of better use of semantics by web developers plus WAI ARIA and HTML5 sectioning elements all lend themselves towards skip links eventually becoming a thing of the past. In light of the WebAIM results on the skip link issues I did a straw poll over Twitter and generally we were all in consensus that skips are here to stay – at least for the time being.

    We all get hung up on this being a screen reader user issue but it’s incredibly important for keyboard only users with sight to have skips visible either permanently or when they receive focus.

    My preferred use of them are to code using HTML5 and WAI ARIA together with headings using skip links as a fallback for those that can’t use WAI ARIA yet (HTML5 is still not supported by access tech at this point).

  2. Julie Romanowski
    March 4, 2011 at 9:17 am

    While skip links may benefit screen reader users, they are actually much more of a benefit to sighted users, specifically keyboard-only and screen magnification users.

  3. March 4, 2011 at 1:41 pm

    Skip links are becoming less relevant with time, as the latest survey from WebAIM clearly shows. While there are many reasons to explain this and ways to achieve the same results, one of the best options I’ve found out there was simply to make sure the main content of the page begins with a first level heading (h1).

    As most screen reader users naturally bring forth the headings outline in a page when they first load it, this is a convenient way to skip whatever needs to be skipped and get right down to business (in this case, reading main content).

  4. March 16, 2011 at 3:50 pm

    I’d like to echo what Julie Romanowski said: Screen reader users are no longer the primary audience for skip nav links. Keyboard users who can’t use a point-and-click device & are not using a screen reader have to tab through every link, which is physically painful for some people. Hiding a skip nav link, but making it visible on:focus supports these visitors.

  5. Teresa
    March 17, 2011 at 7:02 pm

    There are more people in the world who could benefit from a visible skip navigation than just individuals who are blind and who use screen readers. Having fibromyalagia and chronic fatigue, often skip navigation helps me out when I am really tired and my hands, arms, and shoulders ache. There is merit for skip navigation (and a visible one) today.

    By your argument, there would be no need to make buttons, for example, keyboard accessible if you could arrow to them with the built in functionality built into most screen readers. Well this would not work out well for others who rely on using the keyboard or other assistive technologies, would it? In addition, building in as many navigational aids is great, such as headings that help screen readers. However, I cannot jump around to various parts of the page using the headings if I am not a screen reader user. People using ZoomText, for example, cannot jump to headings.

    Some people are tool screenreader/blind issue focused when it comes to accessibility as there are other types of disabilities that must be considered as well.

Leave a Reply

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