An easy feature to add to a website to make it accessible is helping users to bypass or skip over repeated blocks of content.
- Allow the user to bypass repeated blocks of content using skip links, WAI-ARIA landmark roles and headings.
- Include skip links within your visual design and decide whether skip links will be visible all the time or only visible when the skip link receives focus.
- Mark regions within your website design using WAI-ARIA landmark roles
- Group related content together into sections and give meaningful headings to sections of content.
Best practice for bypassing blocks:
- Allow users to skip blocks of content by adding a link or links to either:
- Skip to content areas within a webpage; or
- Skip over repeated blocks of content.
- Use only an appropriate amount of 'skip to' and 'skip over' links to avoid complexity
- Mark key regions of content with WAI-ARIA landmark roles.
- Group sections of related content together using headings that describe the content.
For links that skip to content areas within a webpage:
- Include skip links within your visual design, ensuring they meet colour contrast requirements and link style and focus requirements.
- Ensure that skip links are visible when they receive keyboard focus, or visible at all times.
- Ensure that the description of the link describes where the link will take the user on the webpage.
- Mark on the designs where skip links should take the user.
For links that skip to content:
- Ensure that skip-to links are the first element that receives focus on the webpage.
- For links that skip over repeated blocks of content:
- The link is the last focusable control before the block of repeated content or the first link in the block.
- The description of the link tells the user that it skips the block.
- The link is either always visible or visible when it has keyboard focus.
- The link takes the user to the content that is immediately after the block.
WAI-ARIA landmark roles
- Mark sections of content within your visual designs using WAI-ARIA landmark roles.
- Links that skip to main content should take the user to the start of the section marked with the main landmark role.
- Links that skip navigation should skip over the section of content that is marked with the navigation landmark role.
An easy feature to add to a website to make it accessible enables users to bypass or skip over repeated blocks of content.
Success Criterion 2.4.1: Bypassing blocks requires you to provide a way for users to jump past content that repeats across multiple webpages within a website. Examples of repeated blocks of content include the banner at the top of a webpage, navigation links and advertisements.
Think about how a sighted user moves their visual focus to the area. They are able to skip past any repeated content, moving their visual focus directly to the area of interest, which is generally the main content area. However, not all users are able to shift focus to the main content areas so easily.
A screen reader user hears a webpage read out to them from top to bottom. For a webpage that follows a standard three column layout as shown in Example 1, a screen reader user will hear content in the following order:
- Content in the header including logo and search box and primary navigation underneath the header
- Secondary navigation in the left panel
- Main content in the middle panel
- Supplementary content (complementary) in the right column
- Content in the footer along the bottom of the page.
Without a way to skip repeated blocks of content, such as the content within the banner and navigation, a user will be forced to listen to the same repeated content on each webpage within a website. Success Criterion 2.4.1 is one of the great equalisers, ensuring that there is a way for users with a disability to shift their focus to the main content area in the same way that a sighted person does.
There are three methods for bypassing repeated materials:
- Create links to skip blocks of repeated material, commonly referred to as ‘skip links.’
- Group blocks of repeated material together and use headings to label each section of content.
- Use WAI-ARIA landmark roles to describe the purpose of content areas.
Used together, these methods provide the best experience for the user.