← All terms
Glossary

aria-label

`aria-label` is an HTML attribute that provides an accessible name for an element when no visible text label is appropriate — most commonly on icon-only buttons, links, and other controls where the visible UI is purely graphical.

Also: aria label attributeAlso: accessible nameAlso: icon button label

Detailed explanation

When a `<button>` contains only an icon (a search magnifier, a hamburger menu, an X close), the screen reader has no text to announce. `aria-label` provides the accessible name: `<button aria-label="Open search">` makes the button read as "Open search button" to assistive technology.

The first rule of ARIA still applies: prefer visible text over `aria-label` when possible. A button with both a visible "Open menu" label and an `aria-label="Open menu"` attribute is fine; a button with `aria-label` overriding visible text is confusing for users who see and hear simultaneously.

How this applies to Shopify stores

Icon-only cart, search, account, menu, and quantity controls need an accessible name, which may come from visible or visually hidden text, `aria-labelledby`, or `aria-label`. AccessComply can report missing-name findings on reached pages and present eligible candidates for merchant review; the correct label depends on the control's purpose and state.

What merchants should check next

Treat this term as a practical audit prompt, not just a definition. Check the storefront pages where the concept shows up in real customer journeys: product discovery, add-to-cart, cart drawer, checkout handoff, account login, and support contact flows. If the issue affects code, verify the rendered HTML and computed browser output after the theme change. If it affects copy or media, keep the merchant-facing wording accurate and easy to maintain.

Primary source: w3.org