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.
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:
- use CSS to change the presentation of a UI component when it receives 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
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.