Bypass Blocks

Overview

Most websites have large blocks of repeated content on pages, like having the same page header and navigation bar at the start of every page on a site. While this can be very useful, it introduces problems for many disabled users. For example, people using a keyboard instead of a mouse may have to move through every single link in the header and navigation on every page on the site to get to the content they're trying to reach, and screen reader users have to listen through the same repeated content on page after page.

As a result, accessibility rules require that users be provided with a way to bypass blocks of repeated content. The most common solution is providing "skip links" at the start of repeated blocks, which allow the user to skip past them. For example, by adding a "Skip to content" link at the very start of a page, users can jump directly to the start of the unique page content, while still having the option of going through the header and navigation when they want to.

Guidelines and Best Practices

  • Every page with a repeated header and navigation at the start of the page should have a skip link as the first item reached by keyboard on the page, and it should be the first thing that is read out by screen readers.
  • Pages with other large blocks of repeated content (for example, embedded social media feeds) that occur elsewhere on a page should have skip links to allow skipping to the content immediately after the block ends.
  • Page footers should not have skip links (there is no content to skip to after them).
  • Skip links can be hidden visually until they receive keyboard focus, but should be visible when focus reaches them (they can be hidden again once focus advances past them to other items on the page).
  • Skip links need to do three things:
    • Move keyboard focus. After a user activates a skip link, the next time they hit the tab key, focus goes to the first interactive element in the area they've skipped to.
    • Move reading position. When a user activates a skip link, screen readers read out first content in the area they've skipped to.
    • Putt the appropriate content into view. If the start of the area being skipped to isn't already visible on screen, activating the skip link should move the page so that it is.
  • Use consistent, standard terminology, like "skip to main content," "skip to content," "skip navigation," or "jump to main content."
  • If you are using the UO Cosmic theme, skip links should already be built into your site for skipping the main header and navigation.

How to Test

  1. Open the web page to be tested and hit the tab key. A skip link to bypass the navigation should be visible on screen. Activate the link and then hit tab again, to verify that keyboard focus moves to the first interactive item in the content area (not the header or navigation).
  2. Reload the web page and hit the tab key to reach the skip link. Resize the browser so that the main content area is not visible, and activate the skip link. Verify that the first content in the main content area is brought into view.
  3. Load a screen reader, reload the web page, and activate the skip link again. Verify that the first content in the main content area is read out.

Use the same basic process for testing any other skip links on the page. For repeated content in other parts of the page, however, the skip link should be located (both in the focus order and visibly on screen, when reached) at the start of those repeated blocks, not at the start of the page.

Additional Resources