ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that helps make web pages and interactive elements easier to understand and use with assistive technologies.

Important: ARIA should improve accessibility when normal HTML elements are not enough. Whenever possible, prefer semantic HTML elements such as <button>, <nav>, <main>, and <input>.

1. Why ARIA Is Used

Modern websites often contain interactive components such as menus, dialogs, tabs, sliders, and custom buttons. A custom element may not provide enough information to a screen reader.

ARIA allows developers to provide additional information about the role, state, and properties of an element.

How ARIA Helps Accessibility

HTML Element

→

ARIA Role / State

→

Assistive Technology

→

Better User Understanding

2. ARIA Roles

A role describes what an element represents. For example, a custom element can be identified as a button.

<div role="button">Save</div>

The role tells assistive technology that the element is intended to behave like a button.

Use real semantic elements whenever possible. A real <button> is generally preferable to a <div role="button">.

3. Common ARIA Roles

button – identifies a button-like control.
navigation – identifies navigation content.
dialog – identifies a dialog or modal window.
tab – identifies a tab in a tab interface.
tabpanel – identifies content associated with a tab.

4. ARIA States and Properties

ARIA also provides attributes that describe the current state or additional information about an element.

A common example is aria-expanded. It tells assistive technology whether a collapsible section is currently expanded.

<button aria-expanded="false">
    Menu
</button>

When the menu opens, the value can be changed to:

aria-expanded="true"

5. aria-label

The aria-label attribute provides an accessible name when visible text is not available or is not sufficient.

<button aria-label="Close">
    ×
</button>

A screen reader can use the label to identify the purpose of the button.

6. aria-hidden

The aria-hidden attribute can indicate that an element should not be exposed to assistive technology.

<span aria-hidden="true">★</span>

This can be useful for decorative content that does not provide meaningful information to the user.

7. ARIA and Semantic HTML

Semantic HTML already provides important accessibility information. Therefore, ARIA should not be added unnecessarily.

<button>Submit</button>

This is usually better than recreating the same control using a generic element and adding ARIA attributes.

Simple rule: First choose the correct HTML element. Add ARIA when extra accessibility information is genuinely needed.

8. Basic ARIA Example

The following example uses a button to control the visibility of a menu.

<button aria-expanded="false">
    Open Menu
</button>

<div>
    Menu content
</div>

When the menu is opened, JavaScript can update aria-expanded from false to true.

9. ARIA with JavaScript

ARIA states often change while the user interacts with a page. JavaScript can update these attributes dynamically.

button.setAttribute("aria-expanded", "true");

This keeps the accessibility information synchronized with the visible state of the component.

10. Best Practices for ARIA

Prefer semantic HTML elements first.
Use ARIA only when it provides useful accessibility information.
Keep ARIA states synchronized with the actual UI state.
Use meaningful accessible names for controls.
Test interactive components with keyboard navigation and assistive technologies.

Summary

ARIA provides roles, states, and properties that help assistive technologies understand interactive web content. Use semantic HTML whenever possible and add ARIA only when additional accessibility information is required.

← Previous: HTML Accessibility Next: HTML Best Practices →