Skip to content

Instantly share code, notes, and snippets.

@ckundo
Last active December 15, 2015 23:49
Show Gist options
  • Save ckundo/5342698 to your computer and use it in GitHub Desktop.
Save ckundo/5342698 to your computer and use it in GitHub Desktop.
draft for article on a11yproject.com

Short answer: Use skip nav links in conjunction with coherent heading outline and ARIA Landmarks, and be aware of browser support.

It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration with repetitive content on poorly structured pages. In order to address this issue, WCAG 2.0 has specified a guideline for bypassing blocks of content that are repeated across multiple pages.

A classic approach to fulfilling this requirement has been to include a [skip navigation link][1] at the beginning of the page, that changes focus to the first element after the repeated content.

<body>
  <a href="#main">Skip to main content</a>
  <nav role='navigation'>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
  <div id="main" role="main">
    <!-- page specific content -->
  </div>
</body>

Skip navigation links are recommended by the W3C and many others as a sufficient technique, despite having long been [broken in Webkit][2] and only recently fixed. Be aware that until browsers that use Webkit release these fixes for skip navigation links, you will need to augment the technique for it to be useful. Nicholas C. Zakas has outlined a solution using Javascript.

Also keep in mind that you can address the same issues for screen reader users when you group content in a coherent outline using meaningful headings and use ARIA landmarks to define regions, as illustrated in Quick Tip: ARIA Landmark Roles.

[1]: Jim Thatcher pioneered and advocated skip navigation links as early as 1998 [2]: Skip navigation links had been broken in Webkit since at least March 8, 2010. The functionality is not broken in Blink.

@ckundo
Copy link
Author

ckundo commented May 7, 2013

@davatron5000: I made updates based on your suggestions. The gist is not playing nicely with Markdown footnotes, sadly, but I think the content is there.

@grayghostvisuals
Copy link

👍 also glad to see this technique has been broken in Webkit since my birthday.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment