← 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

Theme cart icons, search icons, account icons, hamburger menus, and quantity steppers all need `aria-label`. AccessComply scans for icon-only `<button>` and `<a>` elements without an accessible name and writes contextually-correct labels.

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