Same function, same label and the ADA

The same job should carry the same name

When a button that does the same thing is called "Search" on one page and "Find" on another, people have to stop and wonder whether it is the same function. WCAG 2.1 success criterion 3.2.4 (Level AA) says that components with the same functionality within a set of web pages are identified consistently. That covers text labels, accessible names, alt text and icons.

Consistent does not mean identical in every case. The label may change with context, for example "Page 4" on one page and "Previous page" on page 5, as long as people can still tell that the function is the same. Components with different functions are not expected to be identified consistently, even if they look alike or use similar labels or icons.

Why recognition matters

• Screen reader users build a mental list of controls and link names. A renamed control looks like a new one.
• People with cognitive or learning disabilities rely on repetition to learn where things are and what they do.
• Speech-input users say the name they learned on the previous page.

Applied to public portals (ADA angle)

A city that has grown several systems ends up with "Sign in", "Log in", "Resident login" and "My account" for the same function, and a different icon and text alternative for Search on each site. Applications and payments need people to move across these systems quickly. The first fix is a small shared vocabulary of control names that every team uses; the Title II standard (WCAG 2.1 A and AA) has this criterion at Level AA. See also first steps for ways to organize this work.

Code samples: sign-in, search, icons and text alternatives, home link

Sign-in link across portals

<!-- permits portal -->  <a href="/login">Log in</a>
<!-- library portal -->  <a href="/signin">Resident login</a>
<!-- utilities portal --> <a href="/account">My account</a>

<!-- every portal -->
<a href="/signin">Sign in</a>

Search control labeled differently on each page

<!-- page A -->
<button type="submit">Search</button>
<!-- page B -->
<button type="submit">Find</button>
<!-- page C -->
<button type="submit" aria-label="Look up"><svg>…</svg></button>

<!-- every page -->
<button type="submit">Search</button>

<!-- or, with an icon, the same name everywhere -->
<button type="submit" aria-label="Search"><svg aria-hidden="true">…</svg></button>

Same function, different icon and text alternative

<!-- page A -->
<a href="/forms/permit.pdf"><img src="download.svg" alt="Download form"></a>
<!-- page B -->
<a href="/forms/permit.pdf"><img src="arrow-down.svg" alt="Save to device"></a>

<!-- every page -->
<a href="/forms/permit.pdf"><img src="download.svg" alt="Download form"></a>

Mobile code: shared components

// SwiftUI: each screen invents its own label
Button { search() } label: { Label("Find stops", systemImage: "magnifyingglass") }
// elsewhere
Button { search() } label: { Label("Look up", systemImage: "magnifyingglass") }

// SwiftUI: one component, one label
struct SearchButton: View {
  var action: () -> Void
  var body: some View {
    Button(action: action) {
      Label("Search", systemImage: "magnifyingglass")
    }
  }
}

// Jetpack Compose
IconButton(onClick = onSearch) {
  Icon(Icons.Default.Search, contentDescription = "Find")      // screen A
}
IconButton(onClick = onSearch) {
  Icon(Icons.Default.Search, contentDescription = "Look up")   // screen B
}

// Jetpack Compose
@Composable
fun SearchAction(onSearch: () -> Unit) {
  IconButton(onClick = onSearch) {
    Icon(Icons.Default.Search, contentDescription = stringResource(R.string.search))
  }
}

How to check it

1. Inventory components that occur on many pages: search, sign-in, cart or application, language chooser, print, share, help, contact, pagination, breadcrumbs, social links.
2. For each, write down the visible label, accessible name, alt text and icon on at least five pages.
3. Mark any pair that does the same thing under a different name, and any identical icon used for different jobs.
4. Compare the label of the same control in your PDF forms, web forms and app.
5. Tools: a crawler that exports link and button text can sort by href and show the different labels for one destination.

Typical mistakes

• Letting each vendor portal keep its own wording.
• Changing the visible label but not the accessible name, so they differ across pages.
• Using a different icon or text alternative for the same function on different pages.
• Translating the same control differently on different pages of the Spanish version.

Ship it when

• A shared list of control names exists and teams use it.
• The same function uses the same icon and text alternative everywhere.
• Controls with the same job have the same accessible name across the whole set of pages.

Sources

• Understanding SC 3.2.4: Consistent Identification (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.