$devtoolkit.sh/tools/aria-role-reference

ARIA Role Reference

Searchable reference for all WAI-ARIA roles with descriptions, required properties, and allowed states.

buttonwidget<button>

An input that allows for user-triggered actions when clicked or pressed.

States:aria-disabledaria-expandedaria-haspopuparia-pressed
checkboxwidget<input type="checkbox">

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

Required:aria-checked
States:aria-checkedaria-disabledaria-readonly
comboboxwidget

A presentation of a select; usually similar to a textbox where users can type a value or select an option.

Required:aria-expandedaria-controls
States:aria-activedescendantaria-autocompletearia-disabledaria-expandedaria-required
dialogwidget

A dialog is a descendant window of the primary window of a web application.

States:aria-labelledbyaria-describedbyaria-modal
gridcellwidget

A cell in a grid or treegrid.

States:aria-colindexaria-colspanaria-disabledaria-expandedaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selected
linkwidget<a href>

An interactive reference to an internal or external resource.

States:aria-disabledaria-expandedaria-haspopup
listboxwidget

A widget that allows the user to select one or more items from a list of choices.

States:aria-activedescendantaria-disabledaria-expandedaria-multiselectablearia-orientationaria-readonlyaria-required
menuwidget

A type of widget that offers a list of choices to the user.

States:aria-activedescendantaria-labelledbyaria-orientation
menubarwidget

A presentation of menu that usually remains visible and is usually presented horizontally.

States:aria-activedescendantaria-disabledaria-orientation
menuitemwidget

An option in a set of choices contained by a menu or menubar.

States:aria-disabledaria-expandedaria-haspopuparia-posinsetaria-setsize
menuitemcheckboxwidget

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

Required:aria-checked
States:aria-checkedaria-disabledaria-expandedaria-haspopup
menuitemradiowidget

A radio button in a set of menuitemradio roles, only one of which can be checked at a time.

Required:aria-checked
States:aria-checkedaria-disabledaria-posinsetaria-setsize
optionwidget

A selectable item in a listbox.

Required:aria-selected
States:aria-checkedaria-disabledaria-posinsetaria-selectedaria-setsize
progressbarwidget

An element that displays the progress status for tasks that take a long time.

States:aria-valuenowaria-valueminaria-valuemaxaria-valuetext
radiowidget<input type="radio">

A checkable input in a group of radio roles, only one of which can be checked at a time.

Required:aria-checked
States:aria-checkedaria-disabledaria-posinsetaria-setsize
scrollbarwidget

A graphical object that controls the scrolling of content within a viewing area.

Required:aria-controlsaria-orientationaria-valuenowaria-valueminaria-valuemax
States:aria-disabledaria-valuetext
searchboxwidget<input type="search">

A type of textbox intended for specifying search criteria.

States:aria-activedescendantaria-autocompletearia-disabledaria-invalidaria-multilinearia-placeholderaria-readonlyaria-required
sliderwidget

A user input where the user selects a value from within a given range.

Required:aria-valuenowaria-valueminaria-valuemax
States:aria-disabledaria-orientationaria-readonlyaria-valuetext
spinbuttonwidget

A form of range that expects the user to select from among discrete choices.

Required:aria-valuenowaria-valueminaria-valuemax
States:aria-disabledaria-invalidaria-readonlyaria-requiredaria-valuetext
switchwidget

A type of checkbox that represents on/off values, as opposed to checked/unchecked values.

Required:aria-checked
States:aria-checkedaria-disabledaria-readonly
tabwidget

A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.

States:aria-disabledaria-expandedaria-haspopuparia-posinsetaria-selectedaria-setsize
tabpanelwidget

A container for the resources associated with a tab.

States:aria-labelledby
textboxwidget<input type="text">

A type of input that allows free-form text as its value.

States:aria-activedescendantaria-autocompletearia-disabledaria-invalidaria-multilinearia-placeholderaria-readonlyaria-required
timerwidget

A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point.

States:aria-livearia-atomic
tooltipwidget

A contextual popup that displays a description for an element.

States:aria-describedby
treeitemwidget

An option item of a tree. This is an element within a tree that may be expanded or collapsed.

States:aria-checkedaria-disabledaria-expandedaria-haspopuparia-levelaria-posinsetaria-selectedaria-setsize
articlestructure<article>

A section of a page that consists of a composition that forms an independent part of a document, page, or site.

cellstructure<td>

A cell in a tabular container.

columnheaderstructure<th scope="col">

A cell containing header information for a column.

States:aria-colindexaria-colspanaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selectedaria-sort
definitionstructure<dfn>

A definition of a term or concept.

figurestructure<figure>

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text.

gridstructure

A composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable.

States:aria-activedescendantaria-colcountaria-disabledaria-multiselectablearia-readonlyaria-rowcount
groupstructure

A set of user interface objects which are not intended to be included in a page summary or table of contents.

States:aria-activedescendantaria-disabled
headingstructure<h1>-<h6>

A heading for a section of the page.

Required:aria-level
States:aria-level
imgstructure<img>

A container for a collection of elements that form an image.

States:aria-labelaria-labelledby
liststructure<ul>, <ol>

A section containing listitem elements.

listitemstructure<li>

A single item in a list or directory.

States:aria-levelaria-posinsetaria-setsize
mathstructure

Content that represents a mathematical expression.

notestructure

A section whose content is parenthetic or ancillary to the main content of the resource.

presentationstructure

An element whose implicit native role semantics will not be mapped to the accessibility API.

rowstructure<tr>

A row of cells in a tabular container.

States:aria-activedescendantaria-colindexaria-expandedaria-levelaria-posinsetaria-rowindexaria-selectedaria-setsize
rowgroupstructure<thead>, <tbody>, <tfoot>

A structure containing one or more row elements in a tabular container.

rowheaderstructure<th scope="row">

A cell containing header information for a row in a grid.

separatorstructure<hr>

A divider that separates and distinguishes sections of content or groups of menuitems.

tablestructure<table>

A section containing data arranged in rows and columns.

States:aria-colcountaria-rowcount
termstructure<dt>

A word or phrase with a corresponding definition.

toolbarstructure

A collection of commonly used function buttons or controls represented in a compact visual form.

States:aria-activedescendantaria-disabledaria-orientation
treestructure

A widget that allows the user to select one or more items from a hierarchically organized collection.

States:aria-activedescendantaria-disabledaria-multiselectablearia-orientationaria-required
treegridstructure

A grid whose rows can be expanded and collapsed in the same manner as for a tree.

States:aria-activedescendantaria-colcountaria-disabledaria-multiselectablearia-readonlyaria-rowcount
bannerlandmark<header>

A region that contains mostly site-oriented content, rather than page-specific content. Usually the site header.

complementarylandmark<aside>

A supporting section of the document, designed to be complementary to the main content.

contentinfolandmark<footer>

A large perceivable region that contains information about the parent document. Usually the site footer.

formlandmark<form>

A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.

mainlandmark<main>

The main content of a document.

navigationlandmark<nav>

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

regionlandmark<section>

A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents.

searchlandmark<search>

A landmark region that contains the search functionality for the site.

Related Tools

FAQ

What is the difference between a widget role and a landmark role?
Widget roles represent interactive UI controls like button, checkbox, slider, and dialog. Landmark roles represent page regions like main, navigation, banner, and contentinfo. Assistive technologies use landmarks for page navigation and widget roles for interaction.
When should I use aria-required versus required?
Use the native HTML required attribute on form elements whenever possible — browsers and assistive technologies handle it automatically. aria-required is only needed when building custom controls that don't use native HTML form elements.
How often is the ARIA specification updated?
The W3C releases major ARIA specification versions infrequently (1.0, 1.1, 1.2). This reference reflects ARIA 1.2. Minor editorial corrections happen more often, and ARIA 1.3 is under active development as of 2026.

ARIA Role Reference is a searchable, offline guide to all ~60 WAI-ARIA roles defined in the ARIA 1.2 specification. Roles are grouped into widget roles (interactive controls), document structure roles (semantic structure), and landmark roles (page regions). Each entry shows the role name, description, required owned elements, required properties, supported states and properties, and the HTML element it maps to. Filter by role category or search by name.

/tools/aria-role-referencev1.0.0