ARIA Ref

A message with important information. Asserted to screen readers immediately.

<div role="alert">Form submitted successfully!</div>

A dialog that contains an alert message and requires user interaction.

<div role="alertdialog" aria-labelledby="title">...</div>

An interactive element that triggers an action when clicked or pressed.

<div role="button" tabindex="0">Click me</div>

A checkable input with three possible states: true, false, or mixed.

<div role="checkbox" aria-checked="false" tabindex="0">Agree</div>

Supporting content related to the main content. Equivalent to <aside>.

<div role="complementary">Related articles</div>

Information about the parent document. Equivalent to <footer>.

<div role="contentinfo">Copyright 2024</div>

An overlay window that appears above the page content.

<div role="dialog" aria-modal="true" aria-labelledby="title">...</div>

A region containing form elements. Use with aria-label.

<div role="form" aria-label="Login form">...</div>

A heading for a section. Must have aria-level.

<div role="heading" aria-level="2">Section Title</div>

An image. Use when the image is composed of multiple elements.

<div role="img" aria-label="Company logo">...</div>

An interactive reference to a resource.

<span role="link" tabindex="0">Learn more</span>

A list of items. Contains role="listitem" children.

<div role="list"><div role="listitem">Item 1</div></div>

A region where new information is added in a meaningful order.

<div role="log" aria-live="polite">Chat messages...</div>

The main content of the document. Equivalent to <main>.

<div role="main">Primary content</div>

A list of choices or actions, like a context menu.

<ul role="menu"><li role="menuitem">Save</li></ul>

A collection of navigational links. Equivalent to <nav>.

<div role="navigation" aria-label="Main">...</div>

Displays the progress of a task.

<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>

A checkable input in a group where only one can be checked at a time.

<div role="radio" aria-checked="true" tabindex="0">Option A</div>

A perceivable section with a specific purpose. Use with aria-label.

<section role="region" aria-label="Search results">...</section>

A region containing a search facility.

<div role="search"><input type="search" /></div>

A divider between sections of content.

<div role="separator"></div>

An input that allows selecting a value from a range.

<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0">50</div>

A container for advisory information that is not important enough for alert.

<div role="status">3 results found</div>

A tab in a tablist. Controls a tabpanel.

<button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>

A list of tab elements.

<div role="tablist">...</div>

A container for the content associated with a tab.

<div role="tabpanel" id="panel1" aria-labelledby="tab1">Content</div>

A region containing a numerical counter tracking elapsed time.

<div role="timer" aria-live="off">00:30</div>

A contextual popup showing a description for an element.

<div role="tooltip" id="tip1">Helpful info</div>

A hierarchical list. Contains treeitem children.

<ul role="tree"><li role="treeitem">Folder</li></ul>