Every role, and what it obliges you to do

The site-wide page header, the part that repeats across pages.

Content that supports the main content and still makes sense on its own, like a sidebar.

The site-wide page footer, the copyright and contact end of the page.

A form region, worth naming when a page carries more than one.

The page's own content. There should be exactly one, and the header, footer and sidebars stay outside it.

A set of links for moving around the site or the page.

A section important enough to jump to. It only becomes a landmark once it has a name.

The search facility, marked as a region of the page rather than as a single control.

A button does something when you activate it. If it goes to a URL instead, that is a link.

A control with two or three states that has to announce which one it is in.

needs aria-checked

An input that pops up a list to help you fill it, and has to say what it controls and whether that list is open.

needs aria-controls, aria-expanded

A table you can move through cell by cell with the keyboard.

must contain row or rowgroup

One cell in a grid.

goes inside row

A link goes somewhere. If it acts on the page you are already on, that is a button.

A list of options someone can move through and choose from.

must contain group or option

A list of commands, usually opened from a trigger, and built to be driven with arrow keys.

must contain group or menuitem or menuitemradio or menuitemcheckbox

A menu that stays visible and lays its options out along a bar.

must contain group or menuitem or menuitemradio or menuitemcheckbox

One command inside a menu.

goes inside group or menu or menubar

A menu item that toggles on and off like a checkbox.

needs aria-checked · goes inside group or menu or menubar

A menu item that is one option in a set where only one can be chosen.

goes inside group or menu or menubar

One choice inside a listbox, which has to announce whether it is currently selected.

needs aria-selected · goes inside group or listbox

Shows how far a task has got. It is read-only, not something to operate.

One option in a set where only one can be chosen, and it belongs inside a radiogroup.

needs aria-checked

The container that turns a set of radios into a single choice rather than several separate ones.

must contain radio

A control that scrolls something, and has to say what it scrolls and where it currently sits.

needs aria-controls, aria-valuenow

A text input meant for search queries.

A control you set by moving a handle along a range.

needs aria-valuenow

A control for stepping a value up and down.

A binary on-or-off control with no mixed state, usually taking effect the moment it is flipped.

needs aria-checked

A label that reveals its panel, and it means nothing outside a tablist.

goes inside tablist

The container for a set of tabs, which has to actually contain tabs.

must contain tab

The panel a tab reveals.

A text input that takes free-form typing.

A hierarchy whose branches open and close.

must contain group or treeitem

A grid whose rows open and close, so it behaves as a table and a tree at once.

must contain row or rowgroup

One node in a tree.

goes inside group or tree

Hands every keystroke to your code instead of the screen reader. Use it only when nothing else will do.

A self-contained piece of content that still makes sense pulled out on its own.

A quotation from somewhere else.

The title of a table or a figure, sitting inside the thing it titles.

goes inside figure or grid or table or treegrid

One data cell in a table.

goes inside row

A fragment of computer code.

A header cell that names its column.

goes inside row

The meaning of a term.

Text that has been removed.

A list of references, such as a table of contents. ARIA 1.2 deprecates it in favor of list.

Content meant to be read rather than operated, which puts screen readers back into reading mode.

Text carrying stress emphasis, the meaning the em element has.

A stream of articles that keeps loading more as somebody scrolls.

must contain article

An illustration with a caption, referred to from the text around it.

The role a plain div or span already has. It exists for browsers, not for authors.

A set of related items that is not important enough to be a landmark and stays out of the page outline.

A heading, which carries its level in aria-level rather than in the element name.

needs aria-level

Anything built from markup that should be announced as a single image.

Text that has been added.

A list, which has to contain actual list items.

must contain listitem

One entry in a list.

goes inside directory or list

A mathematical expression.

A gauge showing where a value sits in a known range, like disk usage. It is not a progress bar.

needs aria-valuenow

Strips an element's own meaning while leaving its content in place. The same role as presentation.

An aside or annotation about the content around it.

A paragraph of text.

Strips an element's own meaning while leaving its content in place. The same role as none.

One row in a table, grid or treegrid.

goes inside grid or rowgroup or table or treegrid · must contain cell or columnheader or gridcell or rowheader

A band of rows, the equivalent of thead or tbody.

goes inside grid or table or treegrid · must contain row

A header cell that names its row.

goes inside row

A divider between sections. It becomes a control when it can be moved, and only then does it need a value.

needs aria-valuenow

Text carrying strong importance, the meaning the strong element has.

Text set below the baseline.

Text set above the baseline.

Data laid out in rows and columns for reading, not for operating.

must contain row or rowgroup

A word or phrase being defined.

A point in time or a length of it.

A container for related controls that groups them for keyboard navigation.

A small label that appears on hover or focus, and it should hold no controls of its own.

An urgent message that screen readers announce the moment it appears.

A running record where new entries pile up, like a chat history or an activity feed.

Content that scrolls, cycles or rotates on its own.

A message worth announcing that is not urgent enough to interrupt what somebody is doing.

A counter that updates as time passes.

An urgent dialog carrying a message that has to be answered before anything else.

Content layered over the page that wants a response before you go back.

Groups the widget roles that do something when you activate them.

Groups the widget roles that contain and manage other widgets, such as tablists and listboxes.

Groups the widget roles that collect a value from someone.

Groups the roles that divide a page into navigable regions.

Groups the roles that carry a value inside a known span, such as sliders and progress bars.

The base role every other role inherits from, and the source of the global attributes.

Groups the structural roles that form a distinct part of a document.

Groups the roles that introduce and label whatever follows them.

Groups the widget roles that offer a set of choices.

Groups every role that describes content rather than controls.

Groups the roles that represent interactive controls.

Groups the roles for content layered over the page.