ARIA (Accessible Rich Internet Applications) roles are attributes added to HTML elements to improve accessibility by helping assistive technologies (like screen readers) understand the purpose and behavior of elements.
Why ARIA Roles are Needed
- Some custom elements (like
<div>or<span>) don’t convey semantic meaning by default. - ARIA roles communicate the role of the element to assistive technologies.
- Helps people with disabilities navigate and interact with web content effectively.
Syntax
<div role="button">Click Me</div>
role="..."→ defines the ARIA role of the element
Common ARIA Roles
| Role | Purpose |
|---|---|
button |
Indicates an interactive button |
navigation |
Marks a navigation menu |
main |
Main content area of the page |
alert |
Important message that requires attention |
dialog |
Modal or popup dialog |
checkbox |
Represents a checkbox |
textbox |
Represents an editable text input |
Example
<div role="alert">Form submission failed!</div>
<nav role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
- Screen readers announce these roles to users for better understanding.
💡 In Short:
ARIA roles enhance accessibility by describing the function of elements, especially custom or non-semantic HTML, so assistive technologies can provide meaningful feedback to users.
