What is ARIA? · Rocket Validator Glossary

ARIA helps when native HTML cannot express a custom interaction pattern. It should complement semantic HTML, not replace it.

Why ARIA matters

Screen readers rely on the accessibility tree, not visual styling. ARIA can expose names, roles, and states so custom controls are announced correctly.

How ARIA works

ARIA adds:

Roles (what the element is, like button or dialog)
States (current condition, like aria-expanded)
Properties (relationships, like aria-labelledby)

First rule of ARIA: if native HTML already provides semantics, prefer native elements.

Code examples

<!-- Avoid: non-semantic button with incomplete ARIA -->
<div role="button">Save</div>

<!-- Prefer native control -->
<button type="button">Save</button>

<!-- Custom disclosure with synchronized state -->
<button aria-expanded="false" aria-controls="details">Details</button>
<div id="details" hidden>...</div>

An accessible name is the text assistive technologies use to identify a UI element, derived from sources such as visible text, labels, alt text, or ARIA naming attributes.

A screen reader is assistive software that converts on-screen content into speech or braille output, allowing blind and low-vision users to navigate websites through structure and semantics.

Semantic HTML uses elements that describe meaning and structure, such as <main>, <nav>, and <button>, so browsers and assistive technologies can correctly interpret page content.

WCAG (Web Content Accessibility Guidelines) is the global technical standard for making web content accessible to people with disabilities, published by the W3C Web Accessibility Initiative.

A skip navigation link is a hidden or visually accessible anchor link placed at the very beginning of a web page that allows keyboard and screen reader users to bypass repetitive content blocks, such as navigation menus, and jump directly to the main content area.

Landmark roles are specific ARIA roles or HTML5 semantic elements that define the major structural regions of a web page, enabling assistive technology users to quickly identify and navigate to key sections such as the banner, navigation, main content, and footer.

A live region is an area of a web page that dynamically updates its content and communicates those changes to assistive technologies like screen readers, without requiring the user to navigate to the updated area.

Tab order is the sequence in which interactive elements on a web page receive keyboard focus as a user presses the Tab key, determined by the document's source order and any explicit tabindex attributes.

A focus trap is a technique that constrains keyboard focus within a specific region of a page—such as a modal dialog—so that pressing Tab or Shift+Tab cycles only through the interactive elements inside that region until the user explicitly dismisses it.

ARIA live politeness settings control how assistive technologies announce dynamic content changes, using the aria-live attribute with values of off, polite, or assertive to determine whether updates interrupt the user immediately, wait for a pause, or remain silent.

In WAI-ARIA, roles, states, and properties are the three categories of attributes that define what a UI element is, what condition it is in, and what characteristics it has, enabling assistive technologies to present and interact with web content accurately.

ARIA labeling techniques are a set of methods using WAI-ARIA attributes—primarily aria-label, aria-labelledby, and aria-describedby—to provide accessible names and descriptions to interactive elements, regions, and widgets so that assistive technologies can convey their purpose to users.

The tabindex attribute is an HTML attribute that controls whether an element is focusable via keyboard navigation, and optionally determines its position in the sequential tab order of the page.

ARIA hidden and inert content refers to techniques that remove elements from the accessibility tree or disable their interactivity, preventing screen readers and keyboard users from encountering decorative, redundant, or temporarily irrelevant content such as background page content behind a modal dialog.

An accessible description is a supplementary text string, computed by the browser's accessibility API, that provides additional context or instructions about a user interface element beyond what its accessible name conveys.

Accessible Name Computation is the algorithm defined by the W3C that browsers and assistive technologies use to determine the text name of an interactive element, resolving multiple possible sources—such as aria-labelledby, aria-label, HTML <label>, and element content—into a single accessible name string.

The accessibility tree is a parallel structure to the DOM tree that browsers construct to represent the semantic meaning of a web page for assistive technologies such as screen readers, braille displays, and voice control software.

ARIA widget patterns are standardized interaction models defined by the WAI-ARIA Authoring Practices that describe the expected keyboard behavior, focus management, and ARIA roles, states, and properties for custom interactive UI components like tabs, menus, dialogs, and tree views.

Browser Accessibility API Mapping is the process by which web browsers translate HTML elements, attributes, and ARIA annotations into structured data exposed through platform-specific accessibility APIs, enabling assistive technologies like screen readers to understand and interact with web content.

JavaScript accessibility considerations are the set of practices and techniques that ensure dynamic, script-driven web content remains usable by people with disabilities, including proper keyboard interaction, screen reader announcements, focus management, and compatibility with assistive technologies.

Data tables require specific HTML markup to be accessible, including proper use of <th>, <caption>, scope, and headers attributes so that screen readers can associate data cells with their corresponding row and column headers.

Help us improve this glossary term

Was this guide helpful?

Scan your site

Rocket Validator scans thousands of pages in seconds, detecting accessibility and HTML issues across your entire site.

Start Free Trial See Pricing

ARIA

Why ARIA matters

How ARIA works

Code examples

Help us improve this glossary term

Scan your site

Validate at scale.
Ship accessible websites, faster.

Pro Trial

ARIA

Why ARIA matters

How ARIA works

Code examples

Related terms

Help us improve this glossary term

Scan your site

Validate at scale. Ship accessible websites, faster.

Pro Trial

Validate at scale.
Ship accessible websites, faster.