ARIA Role & Landmark Reference - Accessibility Attribute Guide

Developer Tools

Browse 66 WAI-ARIA roles with HTML examples, required attributes, and source links. Search or filter by Landmark, Widget, Document, Live region, or Window.

Role requirements follow WAI-ARIA 1.2. Common supported attributes are a curated subset, not a complete list; use the linked MDN role page as the current reference. ARIA markup shows semantics only; interactive custom controls still need their keyboard and focus behavior.

66 roles

Text size:

The primary header region of a page, typically containing the site logo and navigation.

HTML equivalent: <header> (at page level)
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<header>
  <a href="/">Example site</a>
</header>

A header inside article, aside, main, nav, or section content is not the page banner landmark.

Supporting content related to the main content but remaining meaningful when separated.

HTML equivalent: <aside>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<aside aria-label="Related links">
  <h2>Related links</h2>
</aside>

Use a visible heading or author label to distinguish multiple complementary regions.

Footer content containing metadata such as copyright info.

HTML equivalent: <footer> (at page level)
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<footer>
  <small>© 2026 Example site</small>
</footer>

A footer inside a sectioning element is not the page contentinfo landmark.

A landmark region containing a collection of form elements.

HTML equivalent: <form> with an accessible name
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<form aria-labelledby="contact-title">
  <h2 id="contact-title">Contact us</h2>
  <label>Email <input type="email" name="email"></label>
</form>

A form is exposed as a landmark when it has an accessible name.

The primary content of the page. Only one per page.

HTML equivalent: <main>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<main>
  <h1>Page title</h1>
  <p>Main content…</p>
</main>

A collection of navigational links.

HTML equivalent: <nav>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Give multiple navigation landmarks distinct accessible names.

A perceivable section of the page, typically labeled with aria-label.

HTML equivalent: <section> with an accessible name
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<section aria-labelledby="updates-title">
  <h2 id="updates-title">Updates</h2>
  <p>Latest news…</p>
</section>

A section is a region landmark only when it has an accessible name.

A landmark containing search functionality.

HTML equivalent: <search>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<search aria-label="Site search">
  <form action="/search"><label>Search <input type="search" name="q"></label></form>
</search>

A live region for time-sensitive information. Announced immediately.

HTML equivalent: No exact native live-alert element; use this role for a custom message region.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<div role="alert">Payment could not be processed.</div>

Put the role on the message container before updating its text. Avoid moving focus or using alerts for routine updates.

A dialog that contains an alert message requiring immediate acknowledgement.

HTML equivalent: <dialog> supplies dialog behavior, but not the alertdialog role.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="alertdialog" aria-labelledby="delete-title" aria-describedby="delete-description" aria-modal="true">
  <h2 id="delete-title">Delete file?</h2>
  <p id="delete-description">This action cannot be undone.</p>
  <button type="button">Cancel</button>
  <button type="button">Delete</button>
</div>

A production modal also needs focus management, a close path, and inert background content.

An interactive element that triggers an action when activated.

HTML equivalent: <button>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<button type="button">Save changes</button>

A checkable input that can be checked, unchecked, or mixed.

HTML equivalent: <input type="checkbox">
Required ARIA 1.2 attributes for this role: aria-checked
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-checkedaria-disabledaria-requiredaria-readonlyaria-invalidCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<label><input type="checkbox" name="updates"> Email updates</label>

This native checkbox needs no explicit role. A custom role="checkbox" widget must expose aria-checked and implement Space-key behavior.

A combination of a text input and a popup listbox.

HTML equivalent: <select> or <input list> with <datalist>
Required ARIA 1.2 attributes for this role: aria-controlsaria-expanded
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-controlsaria-expandedaria-autocompletearia-activedescendantaria-haspopupCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Country <select name="country"><option>Canada</option><option>Japan</option></select></label>

Prefer native controls when they meet the need. A custom combobox also needs popup, focus, and keyboard behavior from the APG pattern.

A dialog window overlaid on the main content.

HTML equivalent: <dialog>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<dialog open aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  <button type="button">Close</button>
</dialog>

For modal behavior, open the native dialog with showModal() and manage focus and closing correctly.

A cell in a grid widget.

HTML equivalent: <td> for static data; no native equivalent for an interactive grid cell.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-colindexaria-colspanaria-rowindexaria-rowspanaria-selectedCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<div role="grid" aria-label="Available times">
  <div role="row"><div role="gridcell" tabindex="0">9:00</div></div>
</div>

Use a native table for ordinary data. An interactive grid needs managed focus and the APG keyboard model.

An interactive reference to an internal or external resource.

HTML equivalent: <a href="…">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<a href="/guide">Read the guide</a>

A widget that allows the user to select one or more items.

HTML equivalent: <select multiple>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-multiselectablearia-orientationaria-requiredCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Topics <select multiple name="topics">
  <option selected>Accessibility</option>
  <option>HTML</option>
</select></label>

A widget offering a list of choices or commands to the user.

HTML equivalent: No native application menu; use <nav> with links for site navigation.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<ul role="menu" aria-label="Editor commands">
  <li role="none"><button role="menuitem" tabindex="0">Save</button></li>
</ul>

A menu needs managed focus and arrow-key behavior. A simple list of actions should use ordinary buttons instead.

An option in a menu widget.

HTML equivalent: <button> for actions or <a href> for navigation outside an application menu.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<ul role="menu" aria-label="File">
  <li role="none"><button role="menuitem" tabindex="0">Save</button></li>
</ul>

Menu items participate in the parent menu keyboard model; they are not ordinary standalone buttons.

A checkable menuitem with a checked/unchecked state.

HTML equivalent: A labeled checkbox for a standalone setting; no native menu-item equivalent.
Required ARIA 1.2 attributes for this role: aria-checked
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-checkedaria-disabledCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<ul role="menu" aria-label="View options">
  <li role="none"><button role="menuitemcheckbox" aria-checked="true" tabindex="0">Show toolbar</button></li>
</ul>

Keep aria-checked current and implement the containing menu keyboard behavior.

A checkable menuitem in a group where only one item can be checked.

HTML equivalent: A native radio group for a standalone choice; no native menu-item equivalent.
Required ARIA 1.2 attributes for this role: aria-checked
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-checkedaria-disabledCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<ul role="menu" aria-label="Text size">
  <li role="none"><button role="menuitemradio" aria-checked="true" tabindex="0">Medium</button></li>
  <li role="none"><button role="menuitemradio" aria-checked="false">Large</button></li>
</ul>

Keep one item checked and implement the containing menu keyboard behavior.

A selectable item in a listbox.

HTML equivalent: <option> inside <select>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<label>Color <select name="color"><option value="blue">Blue</option><option value="green">Green</option></select></label>

An element displaying progress of a task.

HTML equivalent: <progress>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-valuenowaria-valueminaria-valuemaxaria-valuetextCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Upload <progress max="100" value="65">65%</progress></label>

The native progress element supplies role and value semantics. A custom progressbar is not interactive or a live region.

A single-choice input in a group of radio buttons.

HTML equivalent: <input type="radio">
Required ARIA 1.2 attributes for this role: aria-checked
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-checkedaria-posinsetaria-setsizeCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="basic"> Basic</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

The native input supplies checked state and keyboard behavior; do not add a redundant role.

A group of radio buttons.

HTML equivalent: <fieldset> with <legend> and native radio inputs.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-requiredaria-orientationCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="basic"> Basic</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

A native fieldset and legend are preferred for grouping a form radio set.

A graphical object controlling the scroll position within a container.

HTML equivalent: No native HTML scrollbar role; browser-provided scrolling is preferred.
Required ARIA 1.2 attributes for this role: aria-controlsaria-valuenow
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-controlsaria-valuenowaria-valueminaria-valuemaxaria-orientationCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="scrollbar" aria-label="Document position" aria-controls="document" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" tabindex="0"></div>
<div id="document">…</div>

Use a custom scrollbar only when necessary; it must be focusable and support keyboard interaction.

A text box for specifying search criteria.

HTML equivalent: <input type="search">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Search <input type="search" name="q"></label>

An input for selecting a value from a range.

HTML equivalent: <input type="range">
Required ARIA 1.2 attributes for this role: aria-valuenow
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-orientationCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Volume <input type="range" min="0" max="100" value="50"></label>

For a custom slider aria-valuenow is required. aria-valuemin/max are optional bounds (default 0 and 100); implement arrow-key behavior too.

A form input widget for selecting a value within a discrete range.

HTML equivalent: <input type="number">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-requiredCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Quantity <input type="number" min="1" max="10" value="2"></label>

A toggle button with two states: on and off.

HTML equivalent: <input type="checkbox">; use role="switch" only when the on/off meaning matters.
Required ARIA 1.2 attributes for this role: aria-checked
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-checkedaria-disabledaria-readonlyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<label><input type="checkbox" role="switch" checked> Dark mode</label>

The native checked state maps to the switch state; custom switches must keep aria-checked current.

A tab control for switching between panels.

HTML equivalent: No direct native HTML tab control.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-selectedaria-controlsCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<div role="tablist" aria-label="Account">
  <button role="tab" id="profile-tab" aria-selected="true" aria-controls="profile-panel" tabindex="0">Profile</button>
</div>
<section role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">Profile settings…</section>

A complete tabs pattern also needs associated panels and arrow-key focus management.

A container for tab elements.

HTML equivalent: No direct native HTML tab control.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-orientationCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="tablist" aria-label="Account">
  <button role="tab" id="profile-tab" aria-selected="true" aria-controls="profile-panel" tabindex="0">Profile</button>
  <button role="tab" id="security-tab" aria-selected="false" aria-controls="security-panel" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">Profile settings…</section>
<section role="tabpanel" id="security-panel" aria-labelledby="security-tab" hidden>Security settings…</section>

A tablist needs roving focus and arrow-key behavior; see the APG pattern.

A panel associated with a tab.

HTML equivalent: No direct native HTML tab panel.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="tablist" aria-label="Account"><button role="tab" id="profile-tab" aria-selected="true" aria-controls="profile-panel">Profile</button></div>
<section role="tabpanel" id="profile-panel" aria-labelledby="profile-tab" tabindex="0">Profile settings…</section>

Connect the panel to its tab with aria-labelledby and manage hidden panels and focus.

A text input widget.

HTML equivalent: <input> or <textarea>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Message <textarea name="message"></textarea></label>

A numerical counter displaying elapsed or remaining time.

HTML equivalent: No native HTML element has the timer role.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-livearia-atomicCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="timer" aria-label="Time remaining">02:15</div>

Timer has implicit aria-live="off"; announce changes only when users need them.

A popup that displays information related to an element on hover or focus.

HTML equivalent: No direct native HTML tooltip role.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<button type="button" aria-describedby="save-tip">Save</button>
<div role="tooltip" id="save-tip">Save your changes</div>

Keep the content non-interactive and available on keyboard focus as well as hover.

An item in a tree widget.

HTML equivalent: No direct native HTML tree widget.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-expandedaria-selectedaria-checkedaria-levelaria-posinsetaria-setsizeCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

ARIA role markup example

<ul role="tree" aria-label="Folders">
  <li role="treeitem" tabindex="0">Inbox</li>
</ul>

A complete tree pattern needs parent/child structure and managed focus.

A section of a page that forms an independent part of a document.

HTML equivalent: <article>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<article>
  <h2>Release notes</h2>
  <p>Version 2 is available.</p>
</article>

A cell in a tabular container.

HTML equivalent: <td> inside a table row
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<table><tbody><tr><td>North</td></tr></tbody></table>

A table cell containing column header information.

HTML equivalent: <th scope="col">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-sortaria-colindexaria-colspanCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<table><thead><tr><th scope="col">Name</th></tr></thead><tbody><tr><td>Ada</td></tr></tbody></table>

A definition of a term.

HTML equivalent: <dd> inside a description list
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications</dd>
</dl>

A perceivable section of content, typically with a caption.

HTML equivalent: <figure> with <figcaption>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<figure>
  <img src="chart.png" alt="Monthly sales rise through June">
  <figcaption>Monthly sales</figcaption>
</figure>

A composite widget with rows of cells, similar to a spreadsheet.

HTML equivalent: <table> for static data; no native interactive grid widget.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-colcountaria-rowcountaria-multiselectableCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="grid" aria-label="Available times">
  <div role="row"><div role="gridcell" tabindex="0">9:00</div></div>
</div>

A complete grid needs managed focus and the APG keyboard model; use a native table for ordinary tabular data.

A set of related user interface objects.

HTML equivalent: <fieldset> with <legend> for form controls
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<fieldset>
  <legend>Notifications</legend>
  <label><input type="checkbox"> Email</label>
</fieldset>

A heading for a section.

HTML equivalent: <h1> through <h6>
Required ARIA 1.2 attributes for this role: aria-level
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-levelCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<h2>Account settings</h2>

Use a real h1–h6 element whenever possible; native headings keep the document outline meaningful.

A container for a collection of elements that form an image.

HTML equivalent: <img alt="…">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<img src="chart.png" alt="Sales increase from January to June">

For decorative images use alt="". A group of SVG or chart elements may need role="img" and an accessible name.

A group of non-interactive list items.

HTML equivalent: <ul>, <ol>, or <dl>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

A single item in a list.

HTML equivalent: <li> inside <ul> or <ol>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<ul>
  <li>First item</li>
</ul>

A row of cells within a grid or table.

HTML equivalent: <tr> inside a table section
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<table><tbody><tr><td>North</td></tr></tbody></table>

A table cell containing header information for a row.

HTML equivalent: <th scope="row">
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<table><tbody><tr><th scope="row">North</th><td>12</td></tr></tbody></table>

A section containing data arranged in rows and columns.

HTML equivalent: <table> with a caption and header cells
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<table>
  <caption>Quarterly totals</caption>
  <thead><tr><th scope="col">Quarter</th></tr></thead>
  <tbody><tr><td>Q1</td></tr></tbody>
</table>

A word or phrase with a corresponding definition.

HTML equivalent: <dt> inside a description list
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Usually comes from visible contents; an author label may be used when supported.

Preferred native HTML

<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications</dd>
</dl>

A widget that allows the user to select one or more items from a hierarchically organized collection.

HTML equivalent: No direct native HTML tree widget.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<ul role="tree" aria-label="Project files">
  <li role="treeitem" tabindex="0" aria-expanded="false">src
    <ul role="group" hidden><li role="treeitem" tabindex="-1">README.md</li></ul>
  </li>
</ul>

A complete tree needs nested groups, managed focus, and arrow-key interaction.

A grid whose rows can be expanded and collapsed like a tree.

HTML equivalent: <table> for static data; no native interactive hierarchical grid.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="treegrid" aria-label="Project files">
  <div role="row" aria-level="1" aria-expanded="false"><div role="gridcell" tabindex="0">src</div></div>
</div>

A complete treegrid needs row expansion, managed focus, and keyboard behavior.

Advisory information that updates without interrupting the current task.

HTML equivalent: <output> for a result; otherwise no exact generic native status element.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<output>Changes saved.</output>

Status updates are polite and should not move focus. The output element is useful for results.

A live region where new information is added in meaningful sequence, such as a chat transcript.

HTML equivalent: No exact native live-log element; an ordered list is a suitable host.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<ol role="log" aria-label="Chat messages">
  <li>Sam: Are you joining?</li>
</ol>

Add new entries to the existing log; the role has polite live-region behavior by default.

A group of related controls presented as a single composite widget.

HTML equivalent: No direct native HTML toolbar element.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="toolbar" aria-label="Text formatting">
  <button type="button" aria-pressed="true">Bold</button>
  <button type="button">Italic</button>
</div>

A persistent horizontal or vertical menu of commands.

HTML equivalent: No native HTML menubar for application commands.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<ul role="menubar" aria-label="Editor menu">
  <li role="none"><button role="menuitem" tabindex="0">File</button></li>
</ul>

A scalar measurement within a known range, such as storage used or a score.

HTML equivalent: <meter>
Required ARIA 1.2 attributes for this role: aria-valuenow
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-valuenowaria-valueminaria-valuemaxaria-valuetextCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<label>Storage used <meter min="0" max="100" value="72">72%</meter></label>

Use meter for a measurement, not task progress. The native meter supplies its own role and value.

A divider between sections; it can also be a focusable range control when users can move it.

HTML equivalent: <hr> for a static thematic break; no native resizable separator control.
Required ARIA 1.2 attributes for this role: aria-valuenow(when focusable)
Common supported attributes: aria-labelaria-labelledbyaria-describedbyaria-orientationaria-valuenowaria-valueminaria-valuemaxCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<hr>

Use hr for a static divider. A focusable separator must implement range values and keyboard behavior.

A scrollable stream of articles where content can be loaded as the reader moves through it.

HTML equivalent: No exact native feed element; use article elements for entries.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="feed" aria-label="Latest articles">
  <article aria-labelledby="article-one-title"><h2 id="article-one-title">New guide</h2><p>Read the guide…</p></article>
</div>

Removes an element’s implicit role from the accessibility tree while leaving its contents available.

HTML equivalent: No HTML element is equivalent to removing an element’s semantics.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: None in this curated list.Curated subset; see MDN for the full, current list.
Name from: No accessible name; this role removes semantics from the accessibility tree.

ARIA role markup example

<ul role="presentation"><li>Decorative grouping only</li></ul>

This does not hide the element or its text. Prefer native markup with the desired semantics; some semantic descendants may retain their roles.

A synonym for presentation that removes an element’s implicit role from the accessibility tree.

HTML equivalent: No HTML element is equivalent to removing an element’s semantics.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: None in this curated list.Curated subset; see MDN for the full, current list.
Name from: No accessible name; this role removes semantics from the accessibility tree.

ARIA role markup example

<ul role="none"><li>Decorative grouping only</li></ul>

This does not hide the element or its text. Prefer native markup with the desired semantics; some semantic descendants may retain their roles.

A non-interactive section whose content is complementary to the main content.

HTML equivalent: No exact native note element; <aside> may host complementary content.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<aside role="note" aria-label="Important note">
  Keep a backup before continuing.
</aside>

Signals a region with a highly interactive, application-style keyboard model.

Use sparingly. This can switch screen readers out of browse mode; reserve it for interfaces requiring application-style interaction and test with assistive technology.

HTML equivalent: No suitable native HTML element; ordinary pages and web apps should not use this role.
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

ARIA role markup example

<div role="application" aria-label="Spreadsheet editor">
  <p>Cell A1: Budget</p>
  <button type="button">Edit cell</button>
</div>

A group of rows in a table or grid, such as a table head, body, or foot.

HTML equivalent: <thead>, <tbody>, or <tfoot>
Required ARIA 1.2 attributes for this role: None listed in the ARIA 1.2 role characteristics.
Common supported attributes: aria-labelaria-labelledbyaria-describedbyCurated subset; see MDN for the full, current list.
Name from: Provide an author label with aria-labelledby or aria-label when users need a name.

Preferred native HTML

<table>
  <thead><tr><th scope="col">Name</th></tr></thead>
  <tbody><tr><td>Ada</td></tr></tbody>
</table>

How to use this tool

Search by role name or description, or choose Landmark, Widget, Document, Live region, or Window.
Expand a role to review its HTML equivalent, required attributes, name-from hint, and references.
Copy the displayed preferred HTML or ARIA example with its Copy snippet button.

What is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes defined by the W3C that communicate semantic meaning to assistive technologies like screen readers. ARIA fills the gap where native HTML elements lack sufficient semantic information.

ARIA role categories

Category	Examples	Purpose
Landmark	banner, navigation, main, contentinfo	Page regions for screen reader navigation
Widget	button, slider, tab, grid, tree	Interactive controls and composite widgets
Document	heading, list, table, img	Content organization
Live region	alert, status, log, timer	Dynamic content updates
Window	dialog, alertdialog	Dialogs that separate a focused task

The role browser keeps these categories filterable and includes selected commonly used roles; abstract roles are omitted because authors should not assign them. Expanded role cards show curated required attributes from WAI-ARIA 1.2 and a short supported-attribute subset. Attribute support varies by role, so use the linked MDN page for the complete, current reference.

The ARIA golden rule

Use native HTML elements whenever possible. ARIA's first rule is: don't use ARIA if a native HTML element or attribute already provides the needed semantic. A <button> already has button semantics and keyboard behavior, so do not add a redundant role="button". The same principle applies to <main>, <nav>, <article>, and native list and form controls.

ARIA states and properties

Beyond roles, ARIA provides two categories of attributes:

States (dynamic, can change): aria-checked, aria-disabled, aria-expanded, aria-selected, aria-hidden, aria-pressed.
Properties (stable, describe characteristics): aria-label, aria-labelledby, aria-describedby, aria-required, aria-live, aria-controls, aria-owns.

Common ARIA patterns

Pattern	Key roles/attributes	Notes
Modal dialog	`role="dialog"`, `aria-modal="true"`, `aria-labelledby`	Focus must be trapped inside the dialog while open
Tab panel	`role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected`	Arrow keys navigate between tabs
Accordion	`aria-expanded` on the trigger button	Content panel is conditionally rendered or hidden
Live alert	`role="alert"`	Screen readers announce content immediately; use sparingly
Status message	`role="status"`, `aria-live="polite"`	Announces after current speech completes
Combobox	`role="combobox"`, `aria-autocomplete`, `aria-expanded`	Complex pattern; follow ARIA 1.2 authoring practices carefully
Tooltip	`role="tooltip"`, `aria-describedby`	Must be keyboard-accessible; shown on focus, not just hover

Testing ARIA

Screen readers: Test with NVDA + Firefox (Windows), VoiceOver + Safari (macOS/iOS), and TalkBack (Android). Each has quirks; testing across platforms is important.
Automated tools: axe DevTools browser extension catches ~30–40% of accessibility issues automatically. Google Lighthouse also includes an accessibility audit.
Keyboard navigation: Tab through your entire interface without a mouse. Every interactive element must be reachable and operable by keyboard alone.

Frequently asked questions

When should I use ARIA roles?

Use ARIA roles when native HTML semantics are insufficient. Always prefer native HTML elements (button, nav, main, etc.) before adding role attributes.

What is a landmark role?

Landmark roles define regions of a page (banner, main, navigation, etc.). They allow screen reader users to jump directly to key sections.

Browse all developer tools

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

ARIA role markup example

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

Preferred native HTML

Preferred native HTML

ARIA role markup example

ARIA role markup example

ARIA role markup example

ARIA role markup example

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

ARIA role markup example

ARIA role markup example

ARIA role markup example

Preferred native HTML

ARIA role markup example

ARIA role markup example

ARIA role markup example

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

Preferred native HTML

ARIA role markup example

ARIA role markup example

Preferred native HTML

ARIA role markup example

ARIA role markup example

ARIA role markup example

Preferred native HTML

Preferred native HTML

ARIA role markup example

ARIA role markup example

ARIA role markup example

ARIA role markup example

ARIA role markup example

Preferred native HTML

How to use this tool

What is ARIA?

ARIA role categories

The ARIA golden rule

ARIA states and properties

Common ARIA patterns

Testing ARIA

Frequently asked questions

When should I use ARIA roles?

What is a landmark role?

Related tools