Why is this important?
Providing more than one route to information can improve the ease of use for users who browse in different ways and who use different browsing technologies.
Providing additional navigational aids allows users who would otherwise be forced to navigate in a linear manner – for example, screen reader users – to jump to specific sections on a page.
Techniques
Include a site search in your designs, if appropriate
- Ensure there is a place for the search function on every page and make sure it is visible without users needing to scroll;
- Allow users to refine their search results by designing filtering and searching options and/or an advanced search option.
Provide a site map or table of contents
- This gives users an overview of the entire site and helps them understand how your content is organised.
- This may also be helpful as a more detailed alternative to the main navigational elements of your site.
Design helpful breadcrumb navigation
Breadcrumb navigation is a supplementary navigation mechanism that provides information about the user’s current location in the site structure and provides access to its parents in the navigation.
- It can be helpful to include a “You are here: “ heading to the breadcrumb – whilst you can make this available exclusively to screen reader users, consider that it may be useful for everyone;
- Ensure any decorative elements, such as arrows or chevrons, are coded in an accessible way, so that they are identifiable to screen readers as decorative.
- As these are decorative elements, the simplest ways of doing this are to use CSS background images or use an image with a null alt attribute (alt="").
- Avoid using CSS pseudo selectors as some screen readers will announce characters that are commonly used in a decorative manner, such as the forward slash.
- Alternatively, wrap the decorative character in an element and add aria-hidden=”true”.
Provide in-page navigation for long pages
- Also include “Back to top” links.
Use headings to convey an outline structure of your content
A good heading structure with meaningful and representative headings helps users understand the nature of the page and its sections. Headings help to break up long sections of text into shorter, more manageable subsections, and they provide strong navigational cues, allowing users to navigate in a non-linear manner.
Descriptive headings that use correctly numbered heading levels allow screen reader users to navigate in a non-linear manner – they can jump straight to a section of content that interests them without having to read through the rest of the page.
- Always have a single, main heading <h1> which describes the nature of the page;
- For each main section use a level two heading <h2>;
- Any sub-sections should have a level three heading <h3>; further sub-sections should have a level four heading, and so on;
- Web pages support heading levels from one to six <h1> - <h6> and Word supports up to five heading levels, however some accessibility organisations advocate for restricting content depth to just four headings;
- Avoid skipping heading levels – do not jump from <h1> to <h4>
- Always use the correct level heading.
- Ensure all headings are descriptive and concise.
- Never use headings for stylistic purposes. Use CSS to style headings if you want to change the font size (or colour, weight) rather than using an inappropriate level heading that happens to be the right size.
- If you want big text in the middle of your page, create a style with big text, do not use an <h1>
Examples of good practice
Provide breadcrumb navigation
You are here: Home › Health › Public Consultation
Provide in-page navigation for long pages
In this section
References
WCAG 2.1
- 2.4.5 Multiple Ways (AA)
- 2.4.8 Location (AAA)
EN 301 549 v 2.1.2
- 9.2.4.5 Multiple Ways