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.
aria-disabledaria-expandedaria-haspopuparia-pressedcheckboxwidget<input type="checkbox">A checkable input that has three possible values: true, false, or mixed.
aria-checkedaria-checkedaria-disabledaria-readonlycomboboxwidgetA presentation of a select; usually similar to a textbox where users can type a value or select an option.
aria-expandedaria-controlsaria-activedescendantaria-autocompletearia-disabledaria-expandedaria-requireddialogwidgetA dialog is a descendant window of the primary window of a web application.
aria-labelledbyaria-describedbyaria-modalgridcellwidgetA cell in a grid or treegrid.
aria-colindexaria-colspanaria-disabledaria-expandedaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selectedlinkwidget<a href>An interactive reference to an internal or external resource.
aria-disabledaria-expandedaria-haspopuplistboxwidgetA widget that allows the user to select one or more items from a list of choices.
aria-activedescendantaria-disabledaria-expandedaria-multiselectablearia-orientationaria-readonlyaria-requiredmenuwidgetA type of widget that offers a list of choices to the user.
aria-activedescendantaria-labelledbyaria-orientationmenubarwidgetA presentation of menu that usually remains visible and is usually presented horizontally.
aria-activedescendantaria-disabledaria-orientationmenuitemwidgetAn option in a set of choices contained by a menu or menubar.
aria-disabledaria-expandedaria-haspopuparia-posinsetaria-setsizemenuitemcheckboxwidgetA checkable menuitem that has three possible values: true, false, or mixed.
aria-checkedaria-checkedaria-disabledaria-expandedaria-haspopupmenuitemradiowidgetA radio button in a set of menuitemradio roles, only one of which can be checked at a time.
aria-checkedaria-checkedaria-disabledaria-posinsetaria-setsizeoptionwidgetA selectable item in a listbox.
aria-selectedaria-checkedaria-disabledaria-posinsetaria-selectedaria-setsizeprogressbarwidgetAn element that displays the progress status for tasks that take a long time.
aria-valuenowaria-valueminaria-valuemaxaria-valuetextradiowidget<input type="radio">A checkable input in a group of radio roles, only one of which can be checked at a time.
aria-checkedaria-checkedaria-disabledaria-posinsetaria-setsizescrollbarwidgetA graphical object that controls the scrolling of content within a viewing area.
aria-controlsaria-orientationaria-valuenowaria-valueminaria-valuemaxaria-disabledaria-valuetextsearchboxwidget<input type="search">A type of textbox intended for specifying search criteria.
aria-activedescendantaria-autocompletearia-disabledaria-invalidaria-multilinearia-placeholderaria-readonlyaria-requiredsliderwidgetA user input where the user selects a value from within a given range.
aria-valuenowaria-valueminaria-valuemaxaria-disabledaria-orientationaria-readonlyaria-valuetextspinbuttonwidgetA form of range that expects the user to select from among discrete choices.
aria-valuenowaria-valueminaria-valuemaxaria-disabledaria-invalidaria-readonlyaria-requiredaria-valuetextswitchwidgetA type of checkbox that represents on/off values, as opposed to checked/unchecked values.
aria-checkedaria-checkedaria-disabledaria-readonlytabwidgetA grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
aria-disabledaria-expandedaria-haspopuparia-posinsetaria-selectedaria-setsizetabpanelwidgetA container for the resources associated with a tab.
aria-labelledbytextboxwidget<input type="text">A type of input that allows free-form text as its value.
aria-activedescendantaria-autocompletearia-disabledaria-invalidaria-multilinearia-placeholderaria-readonlyaria-requiredtimerwidgetA type of live region containing a numerical counter which indicates an amount of elapsed time from a start point.
aria-livearia-atomictooltipwidgetA contextual popup that displays a description for an element.
aria-describedbytreeitemwidgetAn option item of a tree. This is an element within a tree that may be expanded or collapsed.
aria-checkedaria-disabledaria-expandedaria-haspopuparia-levelaria-posinsetaria-selectedaria-setsizearticlestructure<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.
aria-colindexaria-colspanaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selectedaria-sortdefinitionstructure<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.
gridstructureA 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.
aria-activedescendantaria-colcountaria-disabledaria-multiselectablearia-readonlyaria-rowcountgroupstructureA set of user interface objects which are not intended to be included in a page summary or table of contents.
aria-activedescendantaria-disabledheadingstructure<h1>-<h6>A heading for a section of the page.
aria-levelaria-levelimgstructure<img>A container for a collection of elements that form an image.
aria-labelaria-labelledbyliststructure<ul>, <ol>A section containing listitem elements.
listitemstructure<li>A single item in a list or directory.
aria-levelaria-posinsetaria-setsizemathstructureContent that represents a mathematical expression.
notestructureA section whose content is parenthetic or ancillary to the main content of the resource.
presentationstructureAn element whose implicit native role semantics will not be mapped to the accessibility API.
rowstructure<tr>A row of cells in a tabular container.
aria-activedescendantaria-colindexaria-expandedaria-levelaria-posinsetaria-rowindexaria-selectedaria-setsizerowgroupstructure<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.
aria-colcountaria-rowcounttermstructure<dt>A word or phrase with a corresponding definition.
toolbarstructureA collection of commonly used function buttons or controls represented in a compact visual form.
aria-activedescendantaria-disabledaria-orientationtreestructureA widget that allows the user to select one or more items from a hierarchically organized collection.
aria-activedescendantaria-disabledaria-multiselectablearia-orientationaria-requiredtreegridstructureA grid whose rows can be expanded and collapsed in the same manner as for a tree.
aria-activedescendantaria-colcountaria-disabledaria-multiselectablearia-readonlyaria-rowcountbannerlandmark<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.