ARIA Roles Reference
// Searchable reference of all ARIA roles
57 ARIA roles across 4 categories
banner<header>
Site-wide header, typically containing the logo and main navigation.
complementary<aside>
Supporting content related to the main content.
contentinfo<footer>
Footer region containing information about the page or site.
form<form>
A region containing a collection of form-related elements.
main<main>
The primary content of the page.
navigation<nav>
A collection of navigational links.
region<section>
A perceivable section of the page with a specific purpose.
search<search>
A region containing search functionality.
alert
A message with important, usually time-sensitive, information.
alertdialog
A dialog that contains an alert message requiring user response.
button<button>
An interactive element that triggers an action when activated.
checkbox<input type="checkbox">
A checkable input with true/false/mixed states.
combobox
A composite widget combining a text input with a listbox or grid popup.
dialog<dialog>
A window overlaid on the main content requiring user interaction.
gridcell
A cell in a grid or treegrid, optionally interactive.
link<a href>
An interactive reference to a resource.
listbox<select>
A widget that allows selecting one or more items from a list.
menu
A list of choices or actions offered to the user.
menubar
A menu that is usually presented horizontally.
menuitem
An option in a menu or menubar.
menuitemcheckbox
A menuitem with a checkable state.
menuitemradio
A menuitem in a group where only one can be checked.
option<option>
A selectable item in a listbox.
progressbar<progress>
A widget displaying the progress of a task.
radio<input type="radio">
A checkable input in a group where only one can be checked.
scrollbar
A graphical object controlling the scrolling of content.
slider<input type="range">
An input where the user selects a value from a range.
spinbutton<input type="number">
A numeric input that can be incremented/decremented.
switch
A type of checkbox that represents on/off values.
tab
A grouping label for a tabpanel.
tabpanel
A container for the content associated with a tab.
textbox<input type="text">
An input that allows free-form text.
tooltip
A contextual popup displaying a description for an element.
treeitem
An option item of a tree, which may be expanded or collapsed.
article<article>
A self-contained composition forming an independent part of a document.
cell<td>
A cell in a tabular container.
columnheader<th scope="col">
A header cell for a column in a table.
definition<dd>
A definition of a term or concept.
figure<figure>
A piece of self-contained content with an optional caption.
group<fieldset>
A set of user interface objects not in a page summary.
heading<h1>-<h6>
A heading for a section of the page.
img<img>
An element representing an image.
list<ul>, <ol>
A section containing listitem elements.
listitem<li>
A single item in a list.
math
Content representing a mathematical expression.
note
Supplementary content parenthetic or ancillary to the main content.
row<tr>
A row in a tabular container.
rowgroup<thead>, <tbody>, <tfoot>
A group of rows in a table.
rowheader<th scope="row">
A header cell for a row in a table.
separator<hr>
A divider separating sections of content.
table<table>
A section containing data arranged in rows and columns.
term<dt>
A word or phrase with a corresponding definition.
toolbar
A collection of commonly used function buttons or controls.
log
A live region where new information is added in a meaningful order.
marquee
Non-essential information that changes frequently.
status<output>
An advisory providing information that is not important enough for an alert.
timer
A numerical counter indicating the elapsed or remaining time.
#About ARIA Roles Reference
Free online ARIA roles reference. Browse and search all WAI-ARIA roles organized by category with descriptions and usage guidelines for accessible web development. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
What are ARIA roles and why are they important? ▾
ARIA roles define the type or purpose of an HTML element for assistive technologies like screen readers. They help convey the structure and behavior of web content to users who cannot see the visual presentation.
Should I use ARIA roles on native HTML elements? ▾
Generally no. Native HTML elements like <nav>, <button>, and <main> already have implicit ARIA roles. The first rule of ARIA is to use native HTML elements whenever possible. Only add ARIA roles when no native element provides the semantics you need.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/aria-roles-reference" width="100%" height="500" frameborder="0" title="ARIA Roles Reference"></iframe>