ARIA

GUIDELINES 4.1.2

Overview

ARIA (Accessible Rich Internet Applications) is a set of attributes you add to HTML to describe roles, states, and properties that assistive technologies need but that native HTML alone cannot always provide. It bridges the gap between complex interactive UI patterns and screen readers.

Who is impacted

Users who rely on screen readers and other assistive technologies to navigate dynamic content, custom components, and single page applications.

How to test

Inspect elements using browser DevTools and verify ARIA roles, states, and properties are correctly applied. Use a screen reader to navigate interactive components and confirm they announce correctly.

Resources

Visit W3C WAI ARIA Authoring Practices and MDN ARIA documentation for detailed guidance.

What is ARIA?

ARIA stands for Accessible Rich Internet Applications. It is a specification from W3C that defines a set of HTML attributes that communicate meaning to assistive technologies. When used correctly, ARIA allows developers to make custom widgets, dynamic updates, and complex UI patterns accessible to screen reader users.

The first rule of ARIA is to not use it if a native HTML element can do the job. A button is already accessible. A div styled to look like a button with role="button" added is harder to maintain and easier to get wrong. ARIA should enhance HTML, not replace it.

Common ARIA Attributes

aria-label provides an accessible name for elements that have no visible text label, such as an icon button. aria-expanded communicates whether a collapsible section or dropdown is open or closed. aria-live tells screen readers to announce dynamic content updates automatically, useful for notifications, alerts, and live data feeds. aria-describedby associates descriptive text with an element, giving screen reader users additional context beyond the label. aria-hidden removes decorative or redundant elements from the accessibility tree entirely so screen readers skip them.