Loading...
Loading content...
Loading content...
Use ARIA landmarks and personalization semantics to identify regions and components.
Why it matters: Enables users to personalize the interface (e.g., swap icons for text) based on their needs.
In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.
What This Means: This success criterion requires that the purpose of user interface components, icons, and regions must be programmatically determinable. This enables personalization tools to understand what each component does and adapt the interface to meet individual user needs, such as replacing icons with text labels or changing visual presentations.
Why It's Important: Users with cognitive disabilities may benefit from personalized interfaces where icons are replaced with text, colors are changed, or layouts are modified. By making component purposes programmatically determinable, personalization tools can automatically adapt the interface without requiring manual configuration. This supports users who need different presentations to understand and use the interface effectively.
Use semantic HTML elements, ARIA roles, and data attributes to identify component purposes. For icons, use aria-label, aria-labelledby, or data-purpose attributes. For regions, use ARIA landmarks (navigation, main, complementary, etc.) or semantic HTML5 elements. Ensure that the purpose of each interactive component is clearly identified so personalization tools can understand and modify them appropriately.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
An icon button has no semantic indication of its purpose.
<button><img src="search-icon.png" alt=""></button>An icon button uses ARIA attributes to identify its purpose.
<button aria-label="Search" data-purpose="search">
<img src="search-icon.png" alt="">
</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.3.6 Identify Purpose are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
Personalization is a future feature, so I don't need to worry about it now.
Identifying component purposes benefits all users now, not just future personalization. It improves accessibility and makes code more maintainable.
I can just use any data attribute for purpose identification.
Use standard semantic HTML and ARIA attributes first. Use data-purpose or other attributes consistently and according to established patterns.
Icons without identifiable purposes.
Add aria-label, aria-labelledby, or data-purpose attributes to icons. Ensure icon purposes are programmatically determinable.
Components without semantic markup or ARIA attributes.
Use semantic HTML elements (<button>, <nav>, <article>) or add appropriate ARIA roles and attributes to identify component purposes.
Inconsistent purpose identification across the site.
Establish consistent patterns for identifying component purposes. Use the same approach for similar components throughout the site.
Note: These are official W3C resources for 1.3.6. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.3.6 Identify Purpose correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.3 Adaptable