Skip to main content
AllDevToolsHub
♿

ARIA Roles & Attributes Reference

100% Local

Comprehensive guide for accessible web development.

ARIA Roles & Attributes Reference
ARIA Inspector
Encyclopedia of digital accessibility roles & attributes.

A11y Pro Tip

"The best ARIA is no ARIA." Whenever possible, use native HTML elements (like <button> instead of role="button") for built-in accessibility.

A11y Standards

W3C WAI-ARIA 1.2 Compliance

WCAG 2.1 Level AA Reference

Semantic HTML Integration

alertLive Region

Definition

"A message with important, and usually time-sensitive, information."

Supported Attributes

aria-live="assertive"aria-atomic

Usage Implementation

<div role="alert">Your session is about to expire.</div>
Sample Code
buttonWidget

Definition

"An element that allows the user to trigger an action or event."

Supported Attributes

aria-pressedaria-expandedaria-haspopup

Usage Implementation

<div role="button" tabindex="0" onClick="...">Submit</div>
Sample Code
checkboxWidget

Definition

"A checkable input that has three possible values: true, false, or mixed."

Supported Attributes

aria-checked="true|false|mixed"aria-readonly

Usage Implementation

<div role="checkbox" aria-checked="false" tabindex="0">Accept Terms</div>
Sample Code
dialogWindow

Definition

"A dialog is a window overlaid on either the primary window or another dialog window."

Supported Attributes

aria-modal="true"aria-labelledbyaria-describedby

Usage Implementation

<div role="dialog" aria-modal="true">...</div>
Sample Code
navigationLandmark

Definition

"A collection of navigational elements (usually links) for navigating the document or related documents."

Supported Attributes

aria-label

Usage Implementation

<nav role="navigation" aria-label="Main Menu">...</nav>
Sample Code
tablistComposite

Definition

"A container for a set of tabs."

Supported Attributes

aria-multiselectablearia-orientation

Usage Implementation

<div role="tablist">...</div>
Sample Code
tabWidget

Definition

"A grouping label that provides a mechanism for selecting the tab content that it accompanies."

Supported Attributes

aria-selected="true|false"aria-controls

Usage Implementation

<button role="tab" aria-selected="true">General</button>
Sample Code
mainLandmark

Definition

"The main content of a document."

Usage Implementation

<main role="main">...</main>
Sample Code
searchLandmark

Definition

"A landmark region that contains a collection of items and objects that, as a whole, combined, create a search facility."

Supported Attributes

aria-label

Usage Implementation

<form role="search">...</form>
Sample Code
Try:
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.

Search by role name or filter by widget pattern. Each entry shows required attributes and keyboard behavior.

Overview

What is ARIA Roles & Attributes Reference?

Improve web accessibility with a curated ARIA reference. Look up roles, attributes, and best practices for inclusive UI with real code examples.
FAQ

Frequently Asked Questions

Reference

Technical Deep Dive

DESIGN TOOLS

ARIA Roles & Attributes Reference

Improve your web accessibility with our curated ARIA reference. Look up roles, attributes, and best practices for creating inclusive digital experiences with real code implementation examples.

🎨

Pixel-Precise Output

Generates CSS, tokens, or assets that match what your design system expects.

👀

Live Visual Preview

See changes the moment you make them, no copy-paste cycle between tool and IDE.

📋

Copy-Paste Ready

Output is formatted for direct use in stylesheets, Tailwind configs, or Figma tokens.

01 ARIA Attribute Categories

Category Definition Core Examples Announcement Trigger
RolesWhat an element ISdialog, alert, tabOn Focus / Mount
PropertiesWhat an element HASaria-label, aria-requiredOn Focus
StatesCurrent interaction statearia-expanded, aria-busyOn Value Change

02 Accessible Component Pipeline

1
Native HTML First Always prioritize native elements (<button>, <nav>) before applying ARIA overrides.
2
Semantic Bridge Apply roles and attributes to describe custom widget architecture and complex data relationships.
3
State Sync Bind JavaScript event listeners to toggle ARIA states (expanded, selected) in sync with visual UI changes.
✓

Runs 100% in your browser

All processing happens locally. No data leaves your device, no telemetry, no logs, no server round-trips.

You Might Also Need

RJRahul JalavadiyaFounder & Lead Engineer
Last reviewed 2026-07-29