Skip to content

2.4.1

Jump to bottom
Anika Henke edited this page Oct 15, 2024 · 10 revisions

2.4.1 Bypass Blocks

WCAG says:

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

When this is applicable

When there are clearly different areas on the page which are repeated on other pages.

Check at least one method is present

Not all of the below checks need to pass. There only needs to be one mechanism to bypass content.

This is only for blocks - repeated bigger sections of content (layout content like header, navigation, search, or other repeated content like callouts). Small repeated sections such as individual words, phrases or single links are not considered blocks for this.

We recommend failing it when a method is used and is used incorrectly, even when another method works. Strictly speaking, WCAG cares only about the fact there is one method working and not if other methods fail.

Check skip links

Check that:

  • skip links work - make sure that following the skip link skips to the correct area
  • skip links are either always visible or at least when focused
  • the 'skip to main content' link appears before the first block, that is usually the first focusable thing on the page

Check headings

Using the browser's inspector and inspect the heading for the main content.

Check:

  • the main content has a heading
  • if there is no visible main heading, if there is a visibly hidden heading that can still be read by assistive technologies)

Check landmarks

Use the Landmarks browser extension or WAVE extension to check:

  • there is a main landmark and it is used correctly

Best practice

Check skip links

Check skip links are before the block they are skipping over.

Check headings

To show all headings, use either:

Use the browser's inspector on hidden headings to check all repeated areas have headings.

Different heading levels not meeting the structure of the main content might be okay as long as they are consistent.

Check landmarks

Use the Landmarks browser extension, WAVE extension or a screen reader's landmarks view (for example from NVDA's elements list) to check landmarks are:

  • present - either HTML5 landmarks such as header and nav or ARIA landmarks using role
  • used correctly and correspond to the structure of the page

Mobile app testing

Use one of the following methods:

  • an external keyboard to check for skip links
  • a screen reader to check for headings
  • a screen reader to check for landmarks (this option needs to be enabled for TalkBack and VoiceOver, and only works for embedded web content)

Clone this wiki locally