ARIA Roles Reference

Curated WAI-ARIA 1.2 role reference: required properties, supported states, and required parent or children context.

Search role or description

Global states and properties available on every role: aria-labelaria-labelledbyaria-describedbyaria-hiddenaria-livearia-disabledaria-atomicaria-current

Role	Type	Required props	Notable supported props	Context	Description
alert	structure	—	globals only	—	A live region with important, usually time-sensitive information. Warnings and errors are common uses; assertive politeness and aria-atomic="true" are implied.
alertdialog	window	—	globals only	—	A dialog containing an alert message where initial focus moves to the dialog. Requires an accessible name via aria-label or aria-labelledby.
application	structure	—	globals only	—	A structure containing one or more focusable elements requiring user input that do not follow a standard widget interaction pattern, e.g. a custom canvas editor.
article	structure	—	globals only	—	A section of a page that forms an independent part of a document, page, or site — such as a blog post, comment, or news story.
banner	landmark	—	globals only	—	A landmark region for mostly site-oriented content: the prime heading and primary navigation. Analogous to the HTML header element at the top level.
button	widget	—	`aria-pressedaria-expanded`	—	An input that allows for user-triggered actions when clicked or pressed. Use aria-pressed for toggle buttons and aria-expanded for disclosure buttons.
checkbox	widget	`aria-checked`	`aria-readonly`	—	A checkable input with three possible values: true, false, or mixed. aria-checked is required to expose the current state to assistive technology.
columnheader	structure	—	`aria-sortaria-selectedaria-readonly`	needs parent: columnheader inside row	A cell containing header information for a column, analogous to the HTML th element with column scope. Use aria-sort when the column is sorted.
combobox	widget	`aria-expanded`	`aria-controlsaria-autocompletearia-activedescendantaria-required`	—	An input that controls another element, such as a listbox or grid, that can dynamically pop up to help set the value. The collapsed/expanded state is required.
complementary	landmark	—	globals only	—	A supporting section of the document that remains meaningful when separated from the main content, such as a sidebar — analogous to the HTML aside element.
contentinfo	landmark	—	globals only	—	A landmark region containing information about the parent document: copyrights, links to privacy statements, and similar footer content.
dialog	window	—	globals only	—	A descendant window of the primary window of a web application. Give every dialog an accessible name and use aria-modal for modal dialogs.
document	structure	—	globals only	—	An element containing content that assistive technology users will want to browse in a reading mode rather than as a web application.
feed	structure	—	globals only	owns: article	A scrollable list of articles where scrolling may cause articles to be added to either end, letting users keep reading without moving focus off the article body.
figure	structure	—	globals only	—	A perceivable section of content that typically contains a graphical document, images, code snippets, or example text, referenced from the surrounding content.
form	landmark	—	globals only	—	A landmark region containing a collection of items and objects that combine to form a form. Acts as a landmark only when given an accessible name.
grid	widget	—	`aria-activedescendantaria-colcountaria-rowcount`	owns: row, rowgroup	A composite widget containing rows of cells that are focusable and navigable with arrow keys rather than the Tab key, such as a spreadsheet.
gridcell	widget	—	`aria-selectedaria-readonlyaria-requiredaria-expanded`	needs parent: gridcell inside row	A cell in a grid or treegrid. Unlike plain table cells, gridcells are interactive: focusable, and navigable with arrow keys.
group	structure	—	globals only	—	A set of user interface objects not intended to be included in a page summary or table of contents, such as a fieldset of related form controls.
heading	structure	`aria-level`	globals only	—	A heading for a section of the page. aria-level is required to convey the nesting depth of the heading in the document outline.
img	structure	—	globals only	—	A container for a collection of elements that form a single image, including overlays such as captions. Name it with aria-label or aria-labelledby.
link	widget	—	`aria-expandedaria-disabled`	—	An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.
list	structure	—	globals only	owns: listitem	A section containing listitem elements, analogous to the HTML ul or ol elements.
listbox	widget	—	`aria-activedescendantaria-multiselectablearia-requiredaria-orientation`	owns: option	A widget that allows the user to select one or more items from a list of choices. Options must expose their state with aria-selected.
listitem	structure	—	globals only	needs parent: listitem inside list	A single item in a list or directory, analogous to the HTML li element.
main	landmark	—	globals only	—	A landmark containing the main content of a document — content directly related to or expanding on the central topic of the page.
menu	widget	—	`aria-activedescendantaria-orientation`	owns: group, menuitem, menuitemcheckbox, menuitemradio	A widget that offers a list of choices to the user, such as a context menu. Menus are expected to be opened, navigated, and dismissed with the keyboard.
menubar	widget	—	`aria-orientation`	owns: group, menuitem, menuitemcheckbox, menuitemradio	A presentation of a menu that usually remains visible and is usually presented horizontally, like the File or Edit bars in desktop applications.
menuitem	widget	—	globals only	needs parent: menuitem inside menu, menubar	An option in a set of choices contained by a menu or menubar.
navigation	landmark	—	globals only	—	A landmark collection of navigational elements, usually links, for navigating the document or related documents — analogous to the HTML nav element.
none	structure	—	globals only	—	Removes an element's implicit accessibility semantics — a synonym of presentation. Use when an element is purely presentational, e.g. a list used only for layout.
option	widget	`aria-selected`	`aria-checked`	needs parent: option inside listbox	A selectable item in a listbox. aria-selected is required to expose whether the option is currently chosen.
progressbar	widget	—	`aria-valuenowaria-valueminaria-valuemax`	—	A widget that displays the progress status for tasks that take a long time, exposing how much of the task has completed via aria-valuenow.
radio	widget	`aria-checked`	globals only	needs parent: radio inside group, radiogroup	A checkable input in a set of radio roles where only one can be checked at a time. Group radios in a radiogroup or a named group.
radiogroup	widget	—	`aria-requiredaria-readonly`	owns: radio	A group of radio buttons, analogous to a fieldset of HTML input type radio elements. Use aria-required when a choice is mandatory.
region	landmark	—	globals only	—	A perceivable section of content important enough to be included in a page summary or table of contents. Acts as a landmark only when given an accessible name.
row	structure	—	globals only	needs parent: row inside grid, rowgroup, table, treegrid owns: cell, columnheader, gridcell, rowheader	A row of cells in a tabular container such as a table, grid, or treegrid.
rowgroup	structure	—	globals only	needs parent: rowgroup inside grid, table, treegrid owns: row	A structure containing one or more row elements inside a grid, table, or treegrid — analogous to the HTML thead, tbody, and tfoot elements.
scrollbar	widget	`aria-valuemaxaria-valueminaria-valuenow`	`aria-orientationaria-controls`	—	A graphical object that controls the scrolling of content within a viewing area, regardless of whether that content is fully displayed in the viewport.
search	landmark	—	globals only	—	A landmark region that contains a collection of items and objects that combine to create a search facility, typically a form with a search box.
searchbox	widget	—	`aria-activedescendantaria-autocompletearia-placeholderaria-readonlyaria-required`	—	A type of textbox intended for specifying search criteria, analogous to the HTML input element with type search.
select	abstract	—	globals only	—	Abstract superclass for widgets that let the user choose among several alternatives. Must not be used by authors — use listbox, combobox, or another subclass.
slider	widget	`aria-valuenow`	`aria-valueminaria-valuemaxaria-orientationaria-readonly`	—	An input where the user selects a value from within a given range, typically rendered as a draggable thumb on a track.
spinbutton	widget	`aria-valuenow`	`aria-valueminaria-valuemaxaria-readonlyaria-required`	—	A form of range that expects the user to select from among discrete choices, typically allowing typed input and arrow-key increments.
status	structure	—	globals only	—	A live region whose content is advisory information for the user but not important enough to justify an alert — often rendered as a status bar.
switch	widget	`aria-checked`	globals only	—	A type of checkbox that represents on/off values, as opposed to checked/unchecked. Use it for binary settings toggles; aria-checked is required.
tab	widget	—	`aria-selectedaria-expanded`	needs parent: tab inside tablist	A grouping label providing a mechanism for selecting the tab content to be rendered — one panel selector in a tablist.
table	structure	—	`aria-colcountaria-rowcount`	owns: row, rowgroup	A section containing data arranged in rows and columns, analogous to the HTML table element. Use rowcount/colcount when only part of the table is in the DOM.
tablist	widget	—	`aria-activedescendantaria-multiselectablearia-orientation`	owns: tab	A list of tab elements, which are controls for switching between the associated tabpanel views.
tabpanel	structure	—	globals only	—	A container for the resources associated with a tab, where each tab is contained in a tablist. Only the currently selected panel is shown.
textbox	widget	—	`aria-activedescendantaria-autocompletearia-multilinearia-placeholderaria-readonlyaria-required`	—	A type of input that allows free-form text as its value, analogous to the HTML input type text or textarea elements.
timer	structure	—	globals only	—	A live region containing a numerical counter that indicates elapsed time from a start point, or the time remaining until an end point.
toolbar	structure	—	`aria-orientation`	—	A collection of commonly used function buttons or controls represented in compact visual form, usually horizontal.
tooltip	structure	—	globals only	—	A contextual popup that displays a description for an element it is associated with, typically appearing on hover or keyboard focus.
tree	widget	—	`aria-activedescendantaria-multiselectablearia-orientationaria-required`	owns: group, treeitem	A widget that allows the user to select one or more items from a hierarchically organized collection that can be expanded and collapsed.
treegrid	widget	—	`aria-activedescendantaria-colcountaria-rowcount`	owns: row, rowgroup	A grid whose rows can be expanded and collapsed in the same way as items in a tree, combining hierarchical and tabular navigation.
treeitem	widget	—	`aria-expandedaria-selected`	needs parent: treeitem inside tree, group	An option item of a tree — a leaf node, or a branch node that can be expanded or collapsed when it has children.

Data hand-curated from the WAI-ARIA 1.2 specification . Always confirm against the normative spec before shipping.