ARIA Basics — Accessible Rich Internet Applications Guide

Introduction to ARIA — What Is Accessible Rich Internet Applications

ARIA is a W3C specification that supplements HTML with roles, states, and properties making dynamic content accessible to assistive technologies when native HTML is not enough.

What Is ARIA — Understanding the WAI-ARIA Specification

The WAI-ARIA specification defines a set of HTML attributes that bridge the gap between dynamic web applications and assistive technologies when native HTML semantics fall short.

The First Rule of ARIA — No ARIA Is Better Than Bad ARIA

The first rule of ARIA states that no ARIA is better than bad ARIA, meaning you should always prefer native HTML elements before reaching for ARIA attributes.

ARIA Roles — Widget, Composite, Document and Landmark Roles

ARIA roles define what an element represents to assistive technologies, with categories including widget, composite, document structure, landmark, and live region roles.

ARIA Properties — Attributes That Describe Element Characteristics

ARIA properties are attributes that describe the nature and characteristics of elements, including aria-label, aria-describedby, aria-controls, aria-owns, aria-flowto, and many others.

ARIA States — Dynamic Attributes That Change With User Interaction

ARIA states are dynamic attributes that change based on user interaction or application state, including aria-expanded, aria-selected, aria-pressed, aria-checked, aria-current, and aria-hidden.

Role Attribute Usage — How to Apply Role Attributes Correctly

The role attribute defines an element's semantic meaning for assistive technologies and must be applied correctly, matching the role to the element's behavior and managing required states.

aria-label — Providing Invisible Labels for Assistive Technology

aria-label provides an invisible accessible name for an element, used when no visible label exists, such as icon-only buttons, form controls without labels, or elements needing a more descriptive name.

aria-labelledby — Referencing Visible Labels for Accessible Names

aria-labelledby references one or more element IDs to compose an accessible name from existing visible text, enabling dynamic labeling without duplicating content.

aria-describedby — Adding Descriptions to Elements for Screen Readers

aria-describedby provides additional descriptive text for an element, supplementing the accessible name with instructions, hints, or error details from referenced elements.

aria-hidden — Hiding Content From Assistive Technology

aria-hidden removes elements from the accessibility tree, hiding them from screen readers while keeping them visually visible, useful for decorative content, offscreen panels, and redundant elements.

aria-live — Live Regions for Dynamic Content Announcements

aria-live defines regions of the page where dynamic content changes should be announced by screen readers automatically, with modes polite, assertive, and off controlling announcement timing.

aria-atomic — Defining Live Region Update Scope

aria-atomic specifies whether a live region should announce all content or only the changed parts when updates occur, with true meaning the entire region is announced as a whole.

aria-relevant — Controlling Which Live Region Changes Are Announced

aria-relevant controls which types of content changes in a live region trigger announcements, with values additions, removals, text, and all determining what screen readers announce.

aria-busy — Indicating Loading or Updating Elements

aria-busy indicates that an element is currently loading or updating, telling screen readers to wait before announcing changes until the element is no longer busy.

aria-current — Indicating the Current Item in a Set

aria-current indicates the currently active item within a set of related elements, such as the current page in navigation, the current step in a wizard, or the current tab in a tablist.

aria-expanded — Indicating Expandable and Collapsible State

aria-expanded indicates whether an expandable element like an accordion, dropdown menu, or disclosure widget is currently open or closed, helping screen reader users understand the toggle state.

aria-selected — Indicating Selected Options in Lists and Tab Panels

aria-selected indicates which item in a set of selectable items is currently selected, commonly used in tabs, listboxes, tree views, and grid cells to communicate active selection.

aria-required — Marking Required Form Fields for Screen Readers

aria-required indicates that a form field must be filled out before submission, supplementing the HTML required attribute when native attributes cannot be used or need reinforcement.

aria-invalid — Indicating Input Validation Errors

aria-invalid indicates that a form field has failed validation, helping screen reader users identify which fields have errors and the type of validation error detected.