← All criteria

Understandable · Level AA · 3.2.4

Consistent Identification

A component that does the same thing across multiple pages of a site needs to be identified the same way each time — not necessarily identical wording, but a consistent pattern, so someone who learns what an icon or label does on one page can rely on it meaning the same thing everywhere else.

  • Blind
  • Cognitive

How to recognize it

Compare how the same functionality is labeled across different pages of a site: a search icon with aria-label="Search" on the homepage but aria-label="Find" on the product listing page is the classic failure — same icon, same function, different name. Screen reader users are hit hardest by this, since they're often navigating by recognizing an icon's announced label rather than by the surrounding visual context a sighted user would use to disambiguate. Two things that look like violations but aren't: pagination links reading 'Go to page 4' then 'Go to page 5' are fine, because the pattern stays consistent even though the number changes; and a visually identical icon used for genuinely different functions in different places — a checkmark meaning 'approved' here and 'included' there — legitimately needs different labels, because it's serving a different function, not failing to stay consistent.

How to fix it

Pick one label, or one consistent naming pattern, per distinct function, and use it everywhere that function appears across the site. It doesn't have to be word-for-word identical where the pattern legitimately varies with content (pagination numbers, item names) — it has to stay structurally and terminologically consistent otherwise. Icon-only controls need particular attention here, since their accessible name is invisible on the page itself and easy to let drift when different components get built at different times by different people.

Example

Avoid

<!-- homepage -->
<button aria-label="Search">

<!-- product listing page -->
<button aria-label="Find items">
<!-- page A -->
<a aria-label="Download PDF">

<!-- page B, same download function -->
<a aria-label="Get document">

Prefer

<!-- used identically wherever the search function appears -->
<button aria-label="Search">
<!-- used identically wherever this specific download appears -->
<a aria-label="Download PDF">

Resources

  • 2.4.6 Headings and Labels

    2.4.6 is about a single heading or label being descriptive enough on its own; this criterion is about the same functionality being labeled consistently across every instance of it on the site. A label can be perfectly descriptive in isolation and still fail this criterion by disagreeing with itself elsewhere.

  • 3.2.3 Consistent Navigation

    Two halves of the same idea: 3.2.3 is about repeated navigation components staying in the same relative order across pages; this criterion is about a repeated component being labeled the same way wherever it appears. A menu can pass one and fail the other — reordered items with perfect labels, or perfectly ordered items with a label that changes.