aria-label aria-labelledby and aria-describedby
Provide accessible names and descriptions for elements.
Why Accessible Names Matter
Every interactive element needs an accessible name — a text string that assistive technology uses to identify it. Without an accessible name, screen readers cannot tell users what a button or input does.
aria-label
aria-label provides a text accessible name directly on an element:
<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
aria-label provides the name: 'Close dialog, button' -->
<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->All lessons in this course
- When to Use ARIA vs Native HTML
- role button alert dialog and landmark
- aria-label aria-labelledby and aria-describedby
- aria-hidden and aria-live