WCAG (Level AAA) SC 1.3.6 Identify Purpose (w3.org)
Issue description
WCAG 1.3.6, “Identify Purpose” goes a step beyond the Level AA criterion 1.3.5 by requiring that the purpose of all user interface components, icons, and regions can be programmatically determined. This means that assistive technologies should be able to understand not just what kind of element something is (like a button or a heading), but also its specific purpose within the context of the page.
Many websites rely on visual cues or implicit context to convey the purpose of elements. For example:
- Icons with unclear meaning: An icon with no text label might be visually clear to sighted users but meaningless to those using screen readers.
- Regions with undefined roles: A visually distinct area on the page might be understood by sighted users as a “featured products” section, but without proper markup, assistive technologies wouldn’t know its purpose.
- Custom components: Interactive elements built with JavaScript might lack the semantic information needed for assistive technologies to understand their function.
Why this matters
- Personalization: Users with disabilities often customize their assistive technologies to suit their needs. Programmatically identifying the purpose of elements allows these technologies to provide more meaningful information or adapt the presentation of the content.
- Cognitive differences: Users with cognitive disabilities may have difficulty understanding the implicit purpose of elements.
Clear programmatic identification helps them understand the content and interact with the interface more effectively.
Essentially, this guideline promotes a higher level of accessibility by ensuring that the purpose of all elements is explicitly defined in the code. This allows assistive technologies to provide a more personalized and understandable experience for users with disabilities. Additionally, by enabling an auto-complete function using HTML 5.2 autofill tokens (digitala11y.com), you can passively help input information.
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 1.3.6, “Identify Purpose” involves making sure the purpose of all user interface components, icons, and regions can be programmatically determined. This means providing clear and explicit information in the code that assistive technologies can understand. Here’s how:
Use semantic HTML
- Choose the right elements: Use HTML5 elements with built-in semantic meaning whenever possible. For example, use for navigation, for the main content area, for sidebars, for articles, and for footers.
- Structure with headings: Use heading tags (
<h1>to<h6>) to create a clear hierarchy and structure within sections.
ARIA attributes
aria-label: Usearia-labelto provide a concise and descriptive label for elements that don’t have a visible label. This is especially important for icons and custom interactive components.aria-labelledby: Usearia-labelledbyto associate an element with a visible label that’s located elsewhere on the page.aria-describedby: Usearia-describedbyto provide a more detailed description of an element’s purpose.- Roles: Use ARIA roles to define the purpose of custom components or elements that don’t have a native semantic equivalent. For instance, a custom dropdown menu could use
role="listbox".
Identify regions
- ARIA landmarks: Use ARIA landmarks (e.g.,
role="navigation",role="main",role="search",role="complementary") to define major page sections. This helps assistive technologies understand the purpose of different regions. - Headings and labels: Use headings and labels within regions to provide further context and structure.
Provide text alternatives for icons
- Visible labels: Whenever possible, include visible text labels alongside icons.
- ARIA labels: If a visible label isn’t feasible, use aria-label to provide a text alternative for the icon.
- Hidden text: In some cases, you might need to include hidden text within the code that is specifically for assistive technologies.
Testing
- Assistive technologies: Test your website with screen readers and other assistive technologies to ensure the purpose of all elements is correctly conveyed.
- Inspect the code: Use browser developer tools to inspect the code and verify that ARIA attributes and semantic HTML are used correctly.
Example
Instead of this:
HTML
<div class="featured-products">
</div>Use this:
HTML
<section aria-label="Featured Products">
</section>Or this:
HTML
<section>
<h2>Featured Products</h2>
</section>This adds a descriptive label and a heading to the section, making its purpose clear to assistive technologies.
By following these practices, you can ensure that the purpose of all user interface components, icons, and regions is programmatically determined, promoting a more inclusive and accessible experience for all users.
