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 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 using aria-label.
Use concise and descriptive text inside aria-label.
Do not use aria-label to hide important visible text — it should complement, not replace clarity.
0-2 years experience
<label>Test with a screen reader to confirm that the label makes sense in context.
2-5 years experience
5-8 years experience
8+ years experience