Understanding aria-label
aria-label is an ARIA attribute that provides an accessible name for an element when there is no visible label available. Screen readers read out this text so that users understand the purpose of the element.
When an element (like an icon-only button) does not have visible text — e.g., a trash can icon with
aria-label="Delete".When the visible text is unclear or needs more context for screen readers.
On landmarks or regions (like
<nav>,<aside>) if extra clarification is needed.On form controls if you cannot use a
<label>element (although<label>is preferred when possible).
aria-label should not duplicate visible text. If a clear text label exists, use that instead, because visible labels help both sighted and screen reader users.
Prefer native HTML labels (
<label>for inputs, button text) before usingaria-label.Use concise and descriptive text inside
aria-label.Do not use
aria-labelto hide important visible text — it should complement, not replace clarity.Test with a screen reader to confirm that the label makes sense in context.