WCAG – 3.2.4 Consistent Identification (Level AA)

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.

References

  1. Accessibility Guidelines- Github.io

Leave a Comment

Your email address will not be published.