Recipe
Writing effective aria-label values
aria-label overrides an element's accessible name. Write labels that describe purpose, not appearance.
The golden rule
An aria-label should answer “what does this control do?” — never “what does this look like?” Omit the word “button” or “link” because the role already announces it.
Good vs. bad
❌ Avoid
aria-label="Blue magnifying glass button"✅ Prefer
aria-label="Search products"Context matters
A “Close” button inside a modal named “Delete account” should be aria-label="Close delete account dialog". Include distinguishing context when multiple identical controls exist on one page.
When not to use it
If visible text already describes the element, aria-label is redundant. Prefer aria-labelledby when the label exists elsewhere in the DOM. Never use aria-label on non-interactive elements like <div> or <span>.