What is aria-label and when should you use it
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.
- 1
When an element (like an icon-only button) does not have visible text — e.g., a trash can icon with
aria-label="Delete". - 2
When the visible text is unclear or needs more context for screen readers.
- 3
On landmarks or regions (like
<nav>,<aside>) if extra clarification is needed. - 4
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.
- 1
Prefer native HTML labels (
<label>for inputs, button text) before usingaria-label. - 2
Use concise and descriptive text inside
aria-label. - 3
Do not use
aria-labelto hide important visible text — it should complement, not replace clarity. - 4
Test with a screen reader to confirm that the label makes sense in context.
Scenario Questions
0-2 years experience
- 1You have an icon button that shows a magnifying glass but no text. How would you make it accessible for screen reader users?
- 2If you add an aria-label to a div that already has visible text, what will a screen reader announce?
- 3What happens if you forget to add an aria-label to a custom checkbox component?
2-5 years experience
- 1We have a reusable React component that renders a button with an optional SVG icon. The design sometimes omits the button text. Walk me through how you would implement aria-label handling and what edge cases you’d watch for.
- 2During QA we discovered that a screen reader reads 'button' for a navigation link that only contains an SVG. How would you debug and fix it?
- 3Why might adding aria-label to every element in a page cause performance or maintenance issues? How would you decide where it’s necessary?
5-8 years experience
- 1Our web app includes a dynamic data table where column headers are generated at runtime. Some columns have no visible header text but need to be announced. How would you design a strategy using aria-label or aria-labelledby to keep the table accessible and maintainable?
- 2We are migrating a legacy UI library that uses title attributes for tooltips to a modern accessible solution. Explain how you would replace title with appropriate ARIA attributes, including aria-label, and what trade‑offs you’d consider.
- 3A screen reader reports duplicate announcements because multiple elements share the same aria-label value. How would you detect and resolve this at a component library level?
8+ years experience
- 1Our company is rolling out a new design system across dozens of products. How would you establish guidelines for when to use aria-label versus other labeling techniques, and ensure consistency across teams?
- 2We need to audit a large monorepo for accessibility compliance. Describe an automated approach to identify missing or misused aria-labels, and how you’d prioritize remediation.
- 3When supporting internationalization, how do you handle aria-label values that need translation, and what process would you put in place to keep them in sync with UI text?
Follow-up Questions
- How would you test that your aria-label is being read correctly?
- What problems can arise if multiple elements share the same aria-label?
- When would you choose aria-labelledby over aria-label?