Techniques
Include a site search, if appropriate
- Ensure there is a search function on every page and that 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 your entire site and helps them understand how the content is organised.
- This may also be helpful as a more detailed alternative to the main navigational elements of your site.
Provide 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
- Position in-page navigation links before the main content;
- Include “Back to top” links;
- Include a “Skip link” for keyboard users to skip directly to the main content or other important areas of the page.
Use headings to convey an outline structure of pages
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 the rest of the page.
- Always have a single, main heading <h1> which describes the nature of the page – this will often be the same text as in the <title> attribute;
- 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
Further examples of good practice
- WCAG Technique G63: Providing a site map
- WCAG Technique G64: Providing a Table of Contents
- WCAG Technique G65: Providing a breadcrumb trail
- WCAG Technique G161: Providing a search function to help users find content
References
WCAG 2.1
- 2.4.1 Bypass Blocks (A)
- 2.4.5 Multiple Ways (AA)
- 2.4.8 Location (AAA)
EN 301 549 v 2.1.2
- 9.2.4.1 Bypass Blocks
- 9.2.4.5 Multiple Ways