Navigable content
WCAG Guideline 2.4 (AA) and success criteria
Learn how to help users navigate, find content and determine where they are.
Last updated on
- Provide a way for people to skip repeated content
- Make descriptive page titles
- Ensure content reads in the right order for people using assistive technology
- Write descriptive link text
- Let people choose how they navigate content
- Use descriptive headings and labels
- Show where the keyboard is active on the screen
- Keep keyboard focus clear
Provide a way for people to skip repeated content (Level A, 2.4.1)
Websites often repeat the same content on each page. For example, navigation links or heading graphics. Non-sighted user and others who rely on keyboard navigation need to be able to skip past this repetitive content using a mechanism such as a ‘skip to main content’ or ‘skip to navigation’ link.
How to include a skip link
- Include a ‘skip to main content’ link at the beginning of each web page. This link should be hidden from view but available to screen readers and keyboard users
- Make sure the skip link can be easily accessed and activated using only the keyboard. Users should be able to navigate to it using the ‘Tab’ key and activate it using the ‘Enter’ key or spacebar
- Ensure it receives focus when activated
- Place it at the top of the web page, preferably before any other content
- Test the skip link with people who rely on keyboard navigation and screen readers to ensure it functions correctly. Verify it takes users directly to the main content and that it’s announced properly by screen readers
Coding a ‘skip to main content’ link
At the beginning of the main content section, add an anchor tag with an id attribute.
For example:
<a id="main-content"></a>
Then create a link to the anchor at the beginning of the page, such as in the header. It should be the first element in the tabbing order and come before any other interactive or focusable elements on the page. You can do this by setting the link’s tabindex attribute to “0”. For example:
<a href="#main-content" class="skip-link" tabindex="0">Skip to main content</a>
Hide the link so it’s not visible to sighted users but can be used by assistive technology like screen readers. You can do this by adding the following CSS to your stylesheet:
.skip-link {
position: absolute;
top: -40px;
left: 0;
z-index: 999;
opacity: 0;
}
.skip-link:focus {
top: 0;
opacity: 1;
}
This puts the link off-screen and makes it invisible to sighted users. When the link receives focus (like when someone is using keyboard navigation), its position is changed to the top and its opacity is set to 1, which makes it visible and readable.
Make descriptive page titles (Level A, 2.4.2)
Web pages must have descriptive and meaningful titles that help people understand the purpose of the page. To help people find the right page faster make sure your title is unique, clear and concise. Try to keep it under 70 characters so it does not get cut off in search results. This means being brief but including key information.
In cases where the page is a web application, the name of the app should be sufficient to describe the purpose of the page. For documents, follow the same standards as a regular web page. Make sure the title clearly describes the content found in the document.
How to write descriptive page titles
- Each webpage should have a title that accurately reflects its content. The title should concisely summarize the main topic or purpose of the page. Visit the Web Style Guide for information on how to write unique page titles
- Make sure each page on your website has a unique title
- Use screen reader software or accessibility testing tools to verify the page titles are announced properly by the assistive technology
- Use the HTML
<title>element to define the page title within the<head>section of your web page. Ensure the title element is properly coded and appears before other content in the<head>section - Do user testing to check the page titles are clear to people using the content
Ensure content reads in the right order for people using assistive technology (Level A, 2.4.3)
People using assistive technology or keyboard navigation need content presented to them in a logical order. This means it should reflect the meaning of the content and the logical relationships within it. For example, moving through a table one row or column at a time.
‘Focusable components’ are elements people can interact with such as links, input fields and dropdown menus. When the component is ‘in focus’, it’s highlighted or outlined to show it’s selected.
The technology used to create the content determines the sequential navigation order. For example, HTML defines it using tabbing order. Dynamic HTML may change the order using scripting and ‘tabindex’ attributes. Without either, the navigation order should reflect the order components appear in. (Review HTML 4.01 Specification, section 17.11, “Giving focus to an element”).
How to use focusable components for navigation
- Consider your webpage and the logical order the interactive elements should be read or navigated. The order should follow the functionality or flow of the content
- Make sure your HTML markup follows a logical structure, including the use of appropriate semantic elements. For example:
- Use heading elements (
<h1>to<h6>) hierarchically. Headings should reflect the organization of your page, with<h1>representing the main heading and<h2>being a sub-heading to<h1>and so on - Wrap text content within
<p>tags to represent paragraphs - When presenting lists, use the appropriate list element (
<ul>,<ol>,<li>) - Use semantic sectioning elements (
<header>,<main>,<nav>,<section>,<article>,<aside>,<footer>) to structure and define the sections of your page - When using interactive elements such as
<a>or<button>, make sure they have appropriate and descriptive attributes. Use href with a meaningful URL for links and write informative labels or descriptions for buttons - Use the alt attribute in
<img>tags to give alternative text that describes the content or purpose of the image - When using tables for tabular data, make sure to use
<caption>to provide a concise and descriptive summary of the table,<thead>,<tbody>and<tfoot>to structure the table’s sections and<th>for header cells
- Use heading elements (
- If your webpage includes dynamic content or interactive features that modify the interface, ensure the focus order remains consistent and meaningful as these changes occur. For example, if a modal dialog appears, the focus should move to the dialog and return to the appropriate location after it’s closed
- If necessary, use the tabindex attribute to specify the order in which elements receive focus during sequential navigation. However, it’s generally recommended to rely on the default tab order provided by the browser
- Test with keyboard navigation to ensure the focus moves in a logical and meaningful order. Verify interactive elements are highlighted or receive focus in the expected sequence
Write descriptive link text (Level A, 2.4.4)
People scan content for hyperlinks to find what they’re looking for. This is also true for people that use assistive technologies. Because of this, link text needs to make sense without the surrounding content. Write link text that clearly describes where it will send someone. Do not write ‘Click here’ or ‘Read more’ as your link text.
Avoid linking long sentences or paragraphs. Links over one line in length are difficult to read. Describe where it goes and, when possible, what might happen when they click the link. For example, ‘Apply for MSP’ tells the user they’re starting an application. Links should also be easy to distinguish from other text by using visual cues like colour and underline.
Screen readers need link context embedded in the code. This allows them to convey the purpose and destination to users. For example:
<a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">Link purpose (WCAG)</a>
How to write descriptive link text
- Make sure your link text is meaningful and provides a clear indication of where the link will lead or what action it will perform. Refer to the Web Style Guide for information on how to write descriptive link text
- Use CSS or other styling techniques to visually distinguish links from other text. Underlining and using a different color for links helps users recognize them as interactive elements
- Do user testing to verify people understand the purpose of each link by having them review the link text separate from the content
Let people choose how they navigate content (Level AA, 2.4.5)
Sites should be structured and presented in a clear and consistent way. This allows people to find content they’re looking for using navigation methods, such as:
- A mouse
- Keyboard navigation
- Touch screen
- Assistive technologies such as screen readers
How to allow multiple navigation methods
- Make sure your website has a consistent and clearly visible navigation menu or toolbar that appears on all pages. To do this:
- Use a standard layout, such as a horizontal or vertical bar
- Use clear and descriptive labels for each menu item
- Make sure to also use clear and consistent page titles, links, headings and labels throughout the site. Review 2.4.6 Headings and Labels (Level AA) for more information
- Limit the number of menu items. Best practice is 7 items or less
- Use consistent formatting throughout the menu, such as font size, colour and style
- Use visual cues such as hover states, active states or drop-down menus to help people know where they are in the navigation and what options are available
- Include a search feature that allows people to look up specific content
- Use descriptive and hierarchical headings
- Create a sitemap that provides an overview of the website’s structure including links to all the web pages. It should be easily accessible from the homepage
- Use alternative paths such as ‘related links’ or ‘recommended content’ sections on your web pages
- Use descriptive link text that accurately conveys the destination or purpose of links
- Do user testing to evaluate the effectiveness of your navigation
Make sure to also provide additional ways to find content, such as tables of content or site maps.
Use descriptive headings and labels (Level AA, 2.4.6)
If you’re using headings or labels in your content, they must be clear and descriptive.
For headings this helps people find the information they’re looking for. Headings tell us what’s on the page and organize it into sections. When done well they improve both search engine optimization and accessibility.
For labels it helps people find and use specific components. For example:
- Using clear labels in a contact form such as ‘Street Address’ vs. a more vague label such as ‘Address’. This lets people know which part of an address they need to include in each field
- A label such as ‘Search’ for a search box helps people understand the purpose of the field
- Dropdown menus need clear labels to let people know what the available options are, such as ‘Choose a date’
- Buttons are typically used for actions such as submitting a form. The label must clearly indicate what it does. For example ‘Submit’ rather than ‘OK’
This success criterion doesn’t cover headings or labels being correctly marked up or identified, review 1.3.1: Info and Relationships for this information.
How to write descriptive headings and labels
- Use HTML heading elements (
<h1>,<h2>,<h3>, etc.) to structure content hierarchically. Headings should be used to indicate the main sections and sub-sections of your content. Learn more about formatting headings - Write descriptive headings
- When using form controls like text fields, checkboxes or radio buttons, associate each control with a descriptive label. Labels should clearly describe the purpose or expected input of the form control
- Ensure labels are visible and positioned close to the relevant form controls. Avoid using placeholder text as a substitute for labels, as it disappears when the user interacts with the control and can cause confusion
- Use aria-label or aria-labelledby attributes when necessary. For example, if a visible label cannot be provided, use the aria-label or aria-labelledby attributes to programmatically associate a label with an element. This provides an alternative text description that’s accessible to assistive technologies
- Create consistent, clear and meaningful associations between labels and form controls
Show where the keyboard is active on the screen (Level AA, 2.4.7)
For keyboard navigation, there must be a way to see where the keyboard focus is on the page. This is typically done by highlighting the item in focus.
People should be able to see visible keyboard focus indicators even if they’re not enabled by assistive technology. Remember, not everyone who uses keyboard navigation also uses assistive technology.
All user interfaces that can be operated with a keyboard must have a visible keyboard focus indicator. You can use CSS to do this by adding a border, outline or background color to the elements when they receive focus. Make sure to use a high enough contrast ratio against the surrounding content.
Example code in CSS:
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 2px solid blue;
background-color: #fff;
color: #000;
}
In this example, the focus indicator has a blue outline, a white background and black text.
Always test your website or application with a keyboard to check the keyboard focus indicator is working as expected.
How to make keyboard focus visible
- Apply a distinct and noticeable visual indicator that highlights the element currently in focus. This can be achieved by changing the background color, border, outline or adding a shadow to the focused element. Make sure it stands out and is clearly visible, even for users with low vision or color blindness
- Ensure the focus indicator has sufficient contrast against the background color or surrounding elements. Use colour combinations that meet the colour contrast ratio of 3:1
- Test keyboard navigation to verify the focus indicator is consistently visible as you move between interactive elements. Ensure it remains visible at all times, even when focus shifts to different types of elements, such as links, buttons, form fields or interactive controls
- Test the visibility of the focus indicator with people who use assistive technologies or keyboard navigation tools, to test the visibility of the focus indicator. Ensure it’s properly conveyed to them and provides clear feedback about the currently focused element
Keep keyboard focus clear (Level AA, 2.4.11)
People who can’t use a mouse need to know where the keyboard focus is. For example, if a dialog box pops up, it shouldn’t hide the button that was just used to open it.
How to keep keyboard focus clear:
- Design Considerations: Avoid designs where pop-ups or other elements overlap focused items
- Testing: Regularly check your site with keyboard navigation to ensure focus visibility
- Tip: For movable or overlay elements, don’t obscure focused elements upon first interaction