What Are ARIA Labels?
ARIA (Accessible Rich Internet Applications) labels are HTML attributes that provide additional context to assistive technologies. They help screen readers understand the purpose and state of interactive elements.
The Three Main ARIA Labeling Attributes
aria-label
Use aria-label to provide a text label directly on an element. Ideal for icon-only buttons and inputs without visible labels.
aria-labelledby
Use aria-labelledby to reference another element's text as the label. Great when labels already exist in the DOM or to combine multiple text sources.
aria-describedby
Use aria-describedby for additional descriptive text like form field instructions and error messages.
Common ARIA Mistakes
Mistake 1: Redundant Labels
Don't add aria-label to elements that already have visible text labels.Mistake 2: Empty or Unhelpful Labels
Labels like "button" or "click here" don't help users.Mistake 3: Using ARIA When Native HTML Works
Always prefer native HTML labels over ARIA when possible.ARIA Label Priority
Screen readers follow this priority order:
Best Practices
Do:
Don't:
Conclusion
ARIA labels are powerful tools for improving accessibility, but they should supplement—not replace—semantic HTML.
