WCAG SC 3.2.4 requires that components with the same functionality within a set of web pages are identified consistently. This helps users, particularly those using assistive technologies, or those with learning disabilities to navigate and understand the purpose of these components easily.
To ensure consistent labeling and identification of all functional components, such as buttons, links, icons, and images that appear repeatedly across a website. Consistency does not always mean identical repetition. For instance, consider a product page on an e-commerce website where each page displays only 10 products in its main content. At the bottom of each page, there are navigation buttons. If a user is on the second page, the buttons will display 'Page 1' and 'Page 3'. On the third page, they will show 'Page 2' and 'Page 4'. Note how the term 'Page' repeats while the numbers change. This demonstrates consistency without identical repetition.
The goal is to ensure that users navigating the website become familiar with consistent functionalities, avoiding disorientation and confusion caused by inconsistent labeling of interactive components.
This principle extends to non-textual elements like social media links. For instance, if a search input field accompanied by a magnifying glass icon appears repeatedly across multiple pages, the alt-text for the magnifying glass should remain consistent throughout. Having 'Search' as alt-text on one page and 'Explore' on another would not meet this criterion. Instead, maintain a consistent alt-text, such as 'Search', ensuring that users with cognitive disabilities or those using screen readers can readily identify the button's purpose.
Consistent Labels: Ensure that elements with the same function are labeled consistently across all pages.
Uniform Icons: Use the same icons and images to represent the same functions.
Accurate Alternative Text:Provide consistent alternative text for icons and images used repeatedly.
Contextual Clarity: Modify alternative text for images or icons only when the context changes significantly, aiming for consistency. For example: The same 'download document' icon is used on two pages. One represents downloading a PDF and is labeled as "Download PDF", while the other represents downloading an invoice and is labeled as "Download an Invoice". Note how consistency is maintained despite slight variations in labeling.
Example: Consistent Labeling of Contact Links
A website has a link to the About us page labeled as "About us" on one page and "About Tabnav" on another.
Explanation:Inconsistent labeling of the same function can confuse users, particularly those relying on assistive technologies or those with cognitive disabilities.
A website has a link to the “About us” page labeled as "About Tabnav" on all pages where it appears.
Explanation:Consistent labeling ensures that users can easily recognize and use the about us link across different pages, improving their overall navigation experience.