Make it possible to skip repeating blocks on a page

Many websites contain blocks of content that are repeated on each page. For example, the logo, the navigation menu, the search field, etc. Visitors who use a screen reader, such as reading software or a braille display, and visitors who navigate with the keyboard, start at the top every time they come to a page. These components are always read in full before they can reach the content of the page. Navigating this way takes a long time.

Therefore, make sure that visitors can skip repetitive blocks. This can be achieved in 2 ways:

  1. Add skip links.
  2. Group parts of the code.

A skip link is an anchor link that points to a section situated lower on the page. It gives visitors the opportunity to get faster to a part of the page. Skip links are usually not immediately visible. They only become visible once you navigate with the keyboard over the page.

It looks like this in the code:

Skip links should be the first element on a page. Put them on the top of the code and use them on every page that contains repeating blocks.

Grouping parts of the code

You can also skip repeating blocks by grouping them in the code. There are several techniques available. Grouping these components makes it easier for visitors using assistive technology to navigate the page. For example, these visitors can use a list of all headings or navigate directly to a landmark.

  • Use a heading element at the beginning of all blocks on a page.
  • Use ARIA landmark elements such as <header>, <main> and <footer>, but also, for example, the navigation and search function.

This must be applied in the same way on every page.

Note: This is an effective way to skip blocks of content for visitors using assistive technologies. Visitors navigating the page using only the keyboard cannot take advantage of this.

Also make sure all <​iframe> elements are named so they can be easily skipped. Use the title attribute for this. Make sure that this accessible name describes the subject or purpose of the video.

It looks like this in the code: