3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)
This applies to native apps by replacing “Web pages” with “screens”.
Requirements
- When the same user interface components, with the same functionality, are used in multiple places, they must be identified in a consistent way. For example:
- An icon has the same alternative text wherever it is used;
- Buttons for “Next”, “Previous”, and “Continue”, are labelled consistently wherever they are used;
- Form fields with the same purpose are consistently labelled wherever they are used.
- Navigational items that are repeated on multiple pages (e.g. Search field, social media links, related links panels) are labelled consistently across the website/app.
Why is it important?
- This helps screen reader users correctly identify the type and purpose of the features that are present on multiple pages/screens.
- It also helps speech-input users know what to say to activate functionalities, based on what worked on other pages/screens.
Summary
If a user interface component exists on multiple pages, make sure that the way it looks and the way it is named is consistent across pages.
Common mistakes
- An icon is used to denote a file download, but has a different alternate text whenever it is used;
- A search facility is provided on every page, but the text field and button have different labels on each page.
Design Guide
Visible labels
- If you repeat a button with the same functionality across pages, makes sure that the button’s label is always the same.
Accessibility Name
- On your designs, specify what the ‘Accessible Name’ of each interactive component should be. This ensures that developers identify user interface components consistently to screen reader and speech-input users.