Last modified on Fri 17 Mar 2023

User interface components and navigation must be operable.

Guideline 2.4 - Navigable

Provide ways to help users navigate, find content, and determine where they are.

Success Criterion 2.4.5 - Multiple Ways

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

There should be more than one way to navigate to a page on a site.

WCAG suggests using two or more of the following techniques:

In practice, this success criterion is implemented by providing links to the most common pages in the header and footer, a site map and/or search, and using links throughout the site.


Note that using taxonomies can help ensure compliance with this success criterion, as the term archive pages provide a mechanism to get to pages. If those pages are linked differently on the site, for instance, in a sitemap, header, or post listing, you can be compliant with this success criterion.

The Yoast SEO plugin can help by building sitemaps as well.

Success Criterion 2.4.6 - Headings and Labels

Headings and labels describe the topic or purpose.

To comply with this success criterion, provide descriptive headings and labels.

Descriptive headings identify sections of the content in relation both to the Web page as a whole and to other sections of the same Web page. For instance, this same document has descriptive headings. If we were to change the heading here to "Another success criterion", it would be much less descriptive. If we were to change it to "Reflow" or "Donuts", it would lose meaning.

Descriptive labels make a component's purpose clear. For instance, a "Zoom in" label for a button to zoom in on a map is a descriptive label, while the label "Plus" might not be.

Success Criterion 2.4.6 - Focus Visible

Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.

To comply with this success criterion, you can use one of the following techniques:

input:focus {
 border: 2px solid blue;

To use this technique, don't override default browser styles for focus states, such as outline rules.

You can fail this success criterion if you:

// A very bad CSS reset.
* {
 outline: none;
 border: none;

Find out more techniques and failures for this success criterion