Navigation

Navigating content on web pages can be difficult for individuals with disabilities.

When navigating websites, individuals with disabilities often rely on keyboard-only utilities and other assistive technologies. Unfortunately, those technologies often require users to navigate through each link on every page, which can make using the web page cumbersome and slow.

Skip navigation links help fix this issue. The links highlight different sections of content from the same web page, allow users with disabilities to easily locate information and jump directly to what they need.

Benefits

These measures allow keyboard-only users to skip over repeated sections of content on web pages such as banners and navigation links.

The measures also allow users of assistive technology to skip to specific parts of the page’s content quickly and effectively.

Examples

PayPal's SkipTo plugin

PayPal’s accessibility team offers a lightweight plugin called SkipTo. The plugin works as a skip navigation link and automatically handles many of the potential issues presented by these types of links.

The plugin’s default configuration automatically makes direct jumps to any of the first three headings accessible, as well as the landmarks keyboard.

Hosting the plugin locally is recommended, but it can also be included as a call to the script on gitHub at the bottom of your HTML page. Visit the link above for details.

See the <script> tag on line 11 below:

  <!doctype html>
  <html lang="en-US">
    <head>
      <title>Really accessible page - iu.edu</title>
    </head>
    <body>
      …
      <main role="main" id="mainContent">
      …
      </main>
      <script type="text/javascript" src="https://paypal.github.io/skipto/downloads/js/skipto.min.js"></script>
    </body>
  </html>

Manual code

Add an <a> element with link text of "Skip to Main Content" as the first HTML element in the <body> section. This link should have an href attribute value with a hash character and the id value of the <main> element or a <div> element containing the main content.

To make the target element able to receive focus, add a tabindex attribute with the value of "-1"

See <a> tag on line 7 and the id and the tabindex attributes on line 9 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Working Skip to Main Content Link - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    <a href="#mainContent">Skip to Main Content</a>
    …
    <main role="main" id="mainContent" tabindex="-1">
    …
    </main>
  </body>
</html>

Best practices

Please note that the following best practices apply to manual coding:

  • Place the skip navigation link as the first interactive element on the page
  • Check that skip navigation links are visible when focused upon
  • Apply descriptive link text to all skip navigation links, e.g., “Skip to main content"
  • Check that skip navigation links target the tag or a
    tag containing the main content

Checking for correct usage

  • The skip navigation link should be the first interactive element that receives focus when using the keyboard to navigate the page.
  • The skip navigation link needs to be clearly visible when it receives keyboard focus.
  • When applicable, the page should be scrollable, and the keyboard focus should follow navigation accordingly.

Relevant standards

WCAG 2.0 SC 2.4.1 (Level A) - Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated on multiple web pages.