Loading...
Loading content...
Loading content...
Use consistent icons and labels for the same functions (e.g., search icon).
Why it matters: Reduces cognitive load by making the interface predictable.
Components that have the same functionality within a set of Web pages are identified consistently.
What This Means: This success criterion requires that components with the same functionality use consistent labels, icons, and text across all pages within a website. This makes the interface predictable and reduces cognitive load by allowing users to recognize and understand components based on consistent presentation.
Why It's Important: When the same functionality appears with different labels or icons on different pages, users must relearn what each component does on every page. This increases cognitive load and makes the interface difficult to use, especially for users with cognitive disabilities. Consistent identification helps users predict component behavior and navigate more efficiently.
Use the same labels, icons, and text for components with the same functionality. For example, if a search function appears on multiple pages, it should always use the same label ('Search'), the same icon, and the same styling. Create a design system or component library to ensure consistency. Document component usage patterns and apply them consistently across all pages.
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.
This criterion ensures that all users 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.
Search functionality is labeled differently on different pages: 'Search', 'Find', 'Lookup'.
<!-- Page 1 -->
<button>Search</button>
<!-- Page 2 -->
<button>Find</button>
<!-- Page 3 -->
<button>Lookup</button>Search functionality always uses the same label and icon across all pages.
<!-- All pages -->
<button aria-label="Search">
<SearchIcon />
Search
</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.2.4 Consistent Identification 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:
I can use different icons as long as they're similar.
Icons for the same function must be identical. Even similar icons can confuse users who rely on visual consistency.
Labels can vary slightly (e.g., 'Search' vs 'Find').
Labels must be identical. 'Search' and 'Find' are different labels and violate this criterion. Use the same label everywhere.
Search functionality labeled differently on different pages ('Search', 'Find', 'Lookup').
Use the same label everywhere. Choose one label (e.g., 'Search') and use it consistently across all pages.
Home icon that looks different on different pages.
Use the same icon design for the same function. Create a consistent icon library and use it throughout the site.
Buttons with the same function that look different.
Use consistent styling for buttons with the same function. Apply the same CSS classes or component styles.
Note: These are official W3C resources for 3.2.4. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.2.4 Consistent Identification 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
Understandable PrincipleGuideline
3.2 Predictable