ARIA Cheat Sheet

Searchable reference of WAI-ARIA roles, states, and properties.

Showing 40 entries

role="alert"

Live Region

Announces dynamic content changes to screen readers immediately.

role="alertdialog"

Window

A modal dialog containing an alert message requiring user action.

role="banner"

Landmark

Site-wide header region — maps to <header> at page level.

role="button"

Widget

An input that allows users to trigger an action.

role="checkbox"

Widget

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

role="complementary"

Landmark

Supporting content complementary to main — maps to <aside>.

role="contentinfo"

Landmark

Footer of the page — maps to <footer> at page level.

role="dialog"

Window

A dialog box or window separate from the main page content.

role="form"

Landmark

A landmark region containing form controls — maps to <form> with accessible name.

role="heading"

Structure

A heading for a section. Use aria-level to specify h1–h6.

role="img"

Structure

An image or figure. Provide aria-label or aria-labelledby.

role="link"

Widget

An interactive reference to a resource — maps to <a href>.

role="list"

Structure

An ordered or unordered list — maps to <ul> or <ol>.

role="listitem"

Structure

A single item in a list — maps to <li>.

role="main"

Landmark

Primary content of the page — maps to <main>.

role="menu"

Widget

A list of choices the user can invoke. Use with menuitem children.

role="menuitem"

Widget

An option in a menu or menubar.

role="navigation"

Landmark

A landmark with navigation links — maps to <nav>.

role="region"

Landmark

A perceivable section with a label. Must have accessible name to be a landmark.

role="search"

Landmark

A landmark containing the search functionality of the site.

role="status"

Live Region

A live region with advisory information, less urgent than alert.

role="tab"

Widget

A tab in a tablist. Controls the visibility of an associated tabpanel.

role="tablist"

Widget

Container for a set of tab elements.

role="tabpanel"

Widget

Content area associated with a tab.

role="tooltip"

Widget

A popup that shows information on focus or hover.

aria-label

Property

Provides a string value that labels the current element when no visible label exists.

aria-labelledby

Property

References the id(s) of elements that label this element.

aria-describedby

Property

References element(s) that provide a description of this element.

aria-hidden

State

Hides element and its children from the accessibility tree. Use for decorative content.

aria-expanded

State

Indicates whether a collapsible element is expanded (true) or collapsed (false).

aria-controls

Property

References element(s) that this element controls.

aria-haspopup

Property

Indicates that activating this element will open a popup (menu, listbox, etc.).

aria-live

Property

Sets the politeness of live region updates: off, polite, or assertive.

aria-atomic

Property

When true, the entire live region is announced on any change, not just the changed part.

aria-required

Property

Indicates that user input is required before the form can be submitted.

aria-invalid

State

Indicates that the entered value is invalid. Pair with aria-describedby for error message.

aria-disabled

State

Marks an element as disabled — it is in the accessibility tree but not interactive.

aria-checked

State

Indicates the current checked state: true, false, or mixed (for tri-state checkboxes).

aria-selected

State

Indicates that this element is selected in a composite widget (listbox, tree, grid).

aria-current

State

Identifies the current item in a set: page, step, location, date, time, or true.