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.
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.
Primary source: w3.org