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:

• providing links to navigate to related pages
• providing a table of contents
• providing a site map
• providing a search function
• providing a list of links to all other webpages
• linking to all of the pages on the site from the homepage.

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.

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:

• use CSS to change the presentation of a UI component when it receives focus

input:focus {
 border: 2px solid blue;
}

• use the default focus indicator for the platform so that high visibility default focus indicators will carry over

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:

• use a script to remove the focus when focus is received
  • we've discussed this failure state in Success Criterion 2.1.1 - Keyboard
• remove or hide the visual focus indicator

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

Find out more techniques and failures for this success criterion