Picto thématique

Rule n° 159 - Each page contains quick-access links placed at the beginning of the source code.

You may have seen these links at the top of some web pages. They allow some users to access content much faster.

#Navigation #Development #Accessibility

Goal

  • Allow users visiting the pages in a linear fashion (in voice mode) or a semi-linear way (on a small screen) to not have to scroll through all of each page’s elements in order to access the content.
  • Provide shortcuts that accelerate keyboard navigation and that avoid the repetition of keyboard actions in order to browse through the page and get to the zone they want.
  • Improve the accessibility of content for people with disabilities.

Implementation

Provide at the start of the HTML code, before any other link or form in the page, the links aimed at the corresponding anchors:

  • To the main menu if it is not immediately placed after the page header;
  • To the main content if it is not immediately placed after the page header;
  • To the search engine form if it is not immediately placed after the page header.

If necessary, this quick access menu can be be hidden when the page is loaded and displayed at the first tab on the page (via JavaScript or CSS).

Control

This best practice is best checked together with all the best practices concerning keyboard navigation since if these quick access links are present, they must appear at least from the first tab in the page.

When browsing the website or inspecting templates (except for pages dependent on third-party services):

  • Check for the presence of quick access links to the menu, to the content and to the search function according to the page organisation;
  • Check that they are well placed in the code so as to appear from the first tab in the page;
  • Check that in the event of default masking, they are displayed legibly at the first tab, in a user-predictable location;
  • Check that their operation is effective, i.e. that they allow access to the menu or the content area and for navigation to continue immediately using the keyboard, or to access the input field of the search form and to proceed with data entry.

By Opquast - Read the license