Overview
Websites typically have common headers and navigation options at the top of each page. Bypass blocks, sometimes referred to as skip links, are hidden links that keyboard navigators use to skip past repeat or lengthy sections of content. This allows them to jump straight into the unique content of that page.
Guidelines
- Every page should have a bypass block as the first keyboard-navigable element on the page.
- The navigation bypass block should be an anchor link that takes users past any common header and navigation elements.
- Bypass blocks are commonly hidden from view using CSS, then show up only when receiving keyboard focus. Bypass blocks should be visible when they receive focus, but may otherwise be visible or invisible per design preferences.
- Bypass blocks should also be used for lengthy embedded content like social media feeds.
- Main navigation bypass blocks are likely provided by the website theme. Bypass blocks for social media and other lengthy content sections will need to be created manually. This requires basic familiarity with HTML, or with developer consultation.
How to Test
Evaluate manually with a keyboard. Load or reload a webpage, and hit the Tab key. This should make a previously invisible link render on the screen, prompting the user to click it to skip to the content of the page.
Hit enter, and verify that focus jumped down the page to the main content. Hitting tab again should bring focus to the first item on the page after the navigation.
Perform the same steps for any lengthy or embedded feed or other content where a bypass block may be appropriate. Click above the section that should have a bypass block, hit Tab to see if there is a bypass block visible on keyboard focus, then hit enter to confirm it skips the desired content.
