Consistent Identification
Success Criterion 3.2.4 (Level AA)

Question

Do you provide consistent labels and alternative text for like / repetitive components on your site or application?

Why is this important

When interacting with components within a site or application many users rely on the text labels, alternative text, and location to identify and understand the components and what they do. If components that serve the same purpose, such as search fields or submit buttons, appear more than once across a website or application, they should be labelled consistently. If they are not consistent, screen reader users, people with cognitive/learning disabilities, and others may find the site/application confusing, overwhelming, and difficult to use.

Whom does it benefit?

Example 1:

As a user of text to speech assistive technology,
I want all like components to have consistent labels
so that I can quickly and correctly identify them, and therefore avoid confusion of what they are.

Example 2:

As a person with a learning disability,
I want all like images that mean the same thing to have a consistent label
so that I can interact with the web page without confusion and have a predictable experience.

What should you do?

Be consistent when designing web page components, such as links or icons, so that items of identical functions have identical labels throughout the whole website or application. The same must be applied to accessibility features, such as alternative text, which has to be identical throughout the page for the same component, and also always mirror the icon or image it refers to.

How do you do it?

Ensure consistency between different pages of your site or application for all the interactive components and features.

  • Use consistent labels for all components that do the same thing (have the same functionality). (e.g., icons, check boxes, radio buttons, buttons, links)
  • When icons or other non-text items have the same functionality, use consistent text alternatives (alt-text) so they are named consistently to the screen reader.
  • Additionally, implement strict usage of a defined design pack, which will ensure that a specific function (link, download button, etc.) always has the same icon on every page of the website.

Need technical guidance?

Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 3.2.4 - Consistent Identification page.