3.2.3 Consistent Navigation

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)

Description

Every web page commonly contains some navigational user interface components. A logo, navigational links, search etc. These components in general repeat on all the web pages of the website. In order to make these repeated components easily predicted by users with cognitive disabilities, users who rely on screen magnifying technologies, people with intellectual disabilities making them available consistently in the same place is recommended. For example if the logo of the website is available on the top left corner on the home page, ensure that it is repeated on the same place throughout the website. If skip to main content link is the first element of the web page ensure that it is available at the same place in rest of the website each time it is repeated.

Providing consistent navigation does not restrict content authors from adding secondary navigation or inserting or removing new components in the existing layout. In some websites the search functionality will be available only on certain pages of the website, this does not fail success criteria 3.2.3. It will be failed only when the placement of the search functionality differs on different pages when it is available. In certain cases the elements or sub navigation elements changes depending on the page the user is viewing. For example when the user is on products page the product link in the navigation displays the sub-navigation elements while the remaining navigation links does not, and while in training page the training link will have the sub navigation links but products link does not have.

As discussed earlier elements can be inserted or removed between the existing elements but ensure that the relative order in which they appear does not change. Find an example below.

Example

Below is an existing navigation region on a web page.

Below is a failure scenario after adding one additional element.

In the example above a new element WAI ARIA Overview is added. At the same time the Screen readers is moved from position 4 to position 2 in the order in which the navigation links display.

WCAG techniques