WCAG (Level AAA) SC 2.4.8 Location (w3.org)
Issue description
WCAG 2.4.8, “Location” aims to help users understand their location within a web page or set of web pages, especially when navigating with assistive technologies like screen readers. This Level AAA criterion focuses on providing more detailed and informative context than the basic requirements of Level A and AA.
While headings, landmarks, and page titles provide some context, users might still need more information to understand their location within a complex website or a lengthy document. This is particularly true for:
- Users with cognitive disabilities: Users with cognitive disabilities might have difficulty tracking their location within a complex structure or remembering how they arrived at a particular page.
- Users of screen readers: Screen reader users rely on programmatic information to understand the structure and context of the content.
WCAG requirements
This guideline requires that information about the user’s location within a set of web pages is available. This can be achieved through:
- Breadcrumbs: Provide breadcrumb trails that show the user’s current location within the website’s hierarchy.
- Headings and landmarks: Use clear and descriptive headings and ARIA landmarks to structure the content and provide context.
- Page titles: Use informative and unique page titles that accurately reflect the content of each page.
- Table of contents: For long pages or documents, provide a table of contents with links to different sections.
- “You are here” indicators: Use visual or programmatic cues to indicate the user’s current location within a site map or other navigation structure.
Benefits
- Improved orientation: Users can easily understand where they are within the website or document.
- Enhanced navigation: It helps users navigate between different sections and levels of the content.
- Reduced cognitive load: It reduces the mental effort required to track their location and understand the context.
Essentially, this guideline promotes a higher level of user orientation and navigation by providing more detailed information about the user’s location within the content. This is particularly beneficial for users with cognitive disabilities and those who rely on assistive technologies.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.8, “Location” involves providing users with clear and consistent information about their current location within a set of web pages. This is especially important for users with cognitive disabilities and those who rely on assistive technologies. Here’s how:
Provide consistent navigation mechanisms
- Breadcrumbs: Use breadcrumbs to show the user’s current location within the website’s hierarchy. Each breadcrumb should be a link to the corresponding page, and the current page should be clearly identified (e.g., by bolding the text or using
aria-current="page"). - Navigation menus: Use clear and consistent navigation menus that indicate the user’s current location within the menu structure. This can be done by highlighting the active section or page.
- Headings: Use descriptive headings (
<h1>to<h6>) to structure the content and provide context.
Use ARIA landmarks
- Identify sections: Use ARIA landmarks (e.g.,
role="navigation",role="main",role="search") to identify major sections of the page. This helps assistive technologies provide more informative context to users. - Label landmarks: Provide descriptive labels for landmarks using aria-label if the purpose is not clear from the content.
Page titles
- Unique and descriptive: Ensure each page has a unique and descriptive title that accurately reflects its content and distinguishes it from other pages.
Table of contents (for long pages)
- Linked sections: Provide a table of contents with links to different sections within the page. This allows users to quickly jump to specific parts of the content and understand the overall structure.
“You are here” indicators
- Visual cues: In site maps or other visual navigation structures, use visual cues (e.g., highlighting, arrows) to clearly indicate the user’s current location.
- Programmatic cues: Use ARIA attributes (e.g., aria-current=”page”) to provide programmatic cues about the current location for assistive technologies.
Testing
- Screen reader testing: Test the website with screen readers to ensure that the location information is conveyed clearly and consistently.
- Keyboard navigation: Use the keyboard to navigate through the website and verify that the user’s location is always clear.
Example
On a product page within an e-commerce website, you can:
- Use breadcrumbs: Show the path to the product (e.g., Home > Category > Subcategory > Product Name).
- Highlight the current page: In the main navigation menu, highlight the “Category” and “Subcategory” links to show the user’s current location within the menu.
- Use ARIA landmarks: Use
role="main"for the main content area of the product page.
By implementing these techniques, you can provide users with a clear understanding of their location within your website, improving navigation and making the content more accessible to everyone.
