Toolative
Back to tools

ARIA Reference

Complete reference for WAI-ARIA roles, states, properties, and best practices.

82 roles — click any role name to copy it

Landmark
Site-wide header region — logo, site title, search. Only one per page (outside article).
aria-labelaria-labelledby
<header>
Landmark
Supporting content that complements the main content but is meaningful on its own.
aria-labelaria-labelledby
<aside>
Landmark
Footer region containing info about the parent document — copyright, privacy, contact.
aria-labelaria-labelledby
<footer>
Landmark
Region containing form-associated elements. Must have an accessible name to be a landmark.
aria-labelaria-labelledbyaria-describedby
<form>
Landmark
Primary content of the document. Only one per page.
aria-labelaria-labelledby
<main>
Landmark
Collection of navigation links. Use aria-label to distinguish multiple nav regions.
aria-labelaria-labelledby
<nav>
Landmark
A perceivable section containing content relevant to a specific purpose. Requires a name.
aria-labelaria-labelledby
<section>
Landmark
Region containing a search facility.
aria-labelaria-labelledby
<search>
Widget
Live region with important, usually time-sensitive information. Automatically announced by screen readers.
aria-atomicaria-live
—
Widget
Dialog that contains an alert — requires user response before dismissal.
aria-labelledby or aria-label*aria-describedbyaria-modal
—
Widget
Clickable element triggering an action.
aria-pressedaria-expandedaria-haspopup+1 more
<button>
Widget
Checkable input that has three possible values: true, false, or mixed.
aria-checked*
<input type=checkbox>
Widget
Input that controls another element (listbox or grid) — a combo of textbox and popup.
aria-expanded*aria-controls*aria-autocompletearia-activedescendant
—
Widget
A window separate from the main window — a dialog box.
aria-labelledby or aria-label*aria-describedbyaria-modal
<dialog>
Widget
Composite widget containing rows of cells — interactive table-like structure.
aria-colcountaria-rowcountaria-multiselectable
<table>
Widget
A cell in a grid or treegrid.
aria-selectedaria-readonlyaria-required
<td>
Widget
An interactive reference to a resource.
aria-current
<a href>
Widget
A widget that allows the user to select one or more items from a list of choices.
aria-multiselectablearia-requiredaria-activedescendant
—
Widget
A list of choices the user can execute. Use for application-style menus, not navigation.
aria-activedescendantaria-orientation
—
Widget
Presentational container for a set of menus — usually presented as a horizontal toolbar.
aria-activedescendantaria-orientation
—
Widget
An option in a menu or menubar.
aria-haspopuparia-disabled
—
Widget
A checkable menuitem — tracks checked state.
aria-checked*
—
Widget
A checkable menuitem in a group, only one of which can be checked at a time.
aria-checked*
—
Widget
A selectable item in a listbox.
aria-selectedaria-checked
—
Widget
An element that displays the progress status of a long-running task.
aria-valuenowaria-valueminaria-valuemax+1 more
—
Widget
A checkable input in a group, only one of which can be checked at a time.
aria-checked*
<input type=radio>
Widget
A group of radio buttons.
aria-requiredaria-labelledbyaria-label
—
Widget
A graphical range input controlling the scroll position of the viewport.
aria-valuenow*aria-orientation*aria-controls*
—
Widget
A type of textbox intended for specifying search criteria.
aria-autocompletearia-placeholder
<input type=search>
Widget
A divider that separates and distinguishes sections of content.
aria-orientationaria-valuenow
<hr>
Widget
A user input where the user selects a value from within a range.
aria-valuenow*aria-valuemin*aria-valuemax*aria-orientationaria-valuetext
—
Widget
An input that allows selecting a value from a discrete, ordered set — typically a number.
aria-valuenow*aria-valueminaria-valuemaxaria-valuetext
—
Widget
A live region containing advisory information less urgent than an alert.
aria-atomicaria-live
—
Widget
A type of checkbox that represents on/off values, as opposed to checked/unchecked.
aria-checked*
—
Widget
A grouping label providing a mechanism for selecting the tab content that is to be rendered.
aria-selectedaria-controlsaria-disabled
—
Widget
A list of tab elements that are references to tabpanel elements.
aria-activedescendantaria-multiselectablearia-orientation
—
Widget
A container for the resources associated with a tab.
aria-labelledby*
—
Widget
A type of input that allows free-form text as its value.
aria-multilinearia-readonlyaria-placeholder+1 more
<input type=text>, <textarea>
Widget
A numerical counter which indicates an amount of elapsed time or time remaining.
aria-live
—
Widget
A popup that displays information related to an element on pointer hover or keyboard focus.
aria-describedby
—
Widget
A widget that allows the user to select one or more items from a hierarchically organized collection.
aria-multiselectablearia-activedescendantaria-required
—
Widget
A grid whose rows can be expanded and collapsed in the same manner as a tree.
aria-activedescendantaria-colcountaria-rowcount
—
Widget
An option item of a tree — can be expanded/collapsed to show or hide child items.
aria-expandedaria-selectedaria-level
—
Document Structure
A section of a page that consists of a composition forming an independent part of a document.
<article>
Document Structure
A section of content that is quoted from another source.
aria-label
<blockquote>
Document Structure
Visible content that names or describes the component to which it is associated.
<caption>, <figcaption>
Document Structure
A cell in a tabular container.
aria-colspanaria-rowspan
<td>
Document Structure
Content representing a fragment of computer code.
<code>
Document Structure
A cell containing header information for a column.
aria-sortaria-colspan
<th scope=col>
Document Structure
A definition of a term or concept.
<dfn>
Document Structure
Content that has been deleted or removed.
<del>
Document Structure
A list of references to members of a group.
aria-label
—
Document Structure
An element with its own keyboard focus that has its own tab sequence.
aria-expanded
<body>
Document Structure
Content with emphatic stress.
<em>
Document Structure
A scrollable list of articles where scrolling may cause articles to be added to or removed from either end.
aria-busyaria-labelledby
—
Document Structure
A perceivable section of content that typically contains a graphical document, images, or code.
aria-labelaria-labelledby
<figure>
Document Structure
A nameless container element with no semantic meaning — similar to div or span.
<div>, <span>
Document Structure
A set of user interface objects that are not intended to be included in a table of contents or page summary.
aria-activedescendant
<fieldset>
Document Structure
A heading for a section of the page.
aria-level*
<h1>–<h6>
Document Structure
A container for a collection of elements that form an image.
aria-labelaria-labelledbyaria-describedby
<img>
Document Structure
Content that has been added or inserted.
<ins>
Document Structure
A section containing listitem elements.
<ul>, <ol>
Document Structure
A single item in a list.
aria-levelaria-posinsetaria-setsize
<li>
Document Structure
Live region where new information is added in meaningful order (chat logs, error logs).
aria-livearia-atomic
—
Document Structure
A type of live region where non-essential information changes frequently.
aria-live
—
Document Structure
Content representing a mathematical expression.
aria-label
<math>
Document Structure
A scalar measurement within a known range.
aria-valuenowaria-valueminaria-valuemax
<meter>
Document Structure
Removes the element's semantic role — makes it presentational only (same as presentation).
role=presentation
Document Structure
A section whose content is parenthetic or ancillary to the main content.
aria-label
—
Document Structure
A paragraph of content.
<p>
Document Structure
Removes semantic meaning — used to suppress implicit ARIA roles (same as none).
role=none
Document Structure
A row of cells in a tabular container.
aria-selectedaria-expandedaria-rowindex
<tr>
Document Structure
A group of rows in a tabular container — thead, tbody, tfoot.
<thead>, <tbody>, <tfoot>
Document Structure
A cell containing header information for a row.
aria-sort
<th scope=row>
Document Structure
A structure that labels or summarizes the topic of its related section.
<summary>
Document Structure
Content with strong importance, seriousness, or urgency.
<strong>
Document Structure
Content that represents a subscript.
<sub>
Document Structure
Content that represents a superscript.
<sup>
Document Structure
A section containing data arranged in rows and columns.
aria-colcountaria-rowcount
<table>
Document Structure
A word or phrase with a corresponding definition.
<dt>
Document Structure
Content representing a specific point in time.
<time>
Document Structure
A collection of commonly used function buttons or controls.
aria-labelaria-activedescendantaria-orientation
—