Available Roles

Landmarks

Role name	HTML element
main	<main>
navigation	<nav>
banner	<header role=banner>
contentinfo	<footer role=contentinfo>
search	<form role=search>
form	<form>
complementary	<aside>
region	<section>

Content

Role name	HTML element
link	<a href=…>
none	<a>
heading	<h1>, <h2>, <h3>, etc
list	<ul>, <ol>
listitem	<li>
term	<dt>
definition	<dd>
img	<img alt="Some description">
none	<img alt="">
figure	<figure>
separator	<hr>, <li role=separator>
none	<p>
none	<div>
none	<span>
group	<details>
button	<summary>

Forms

Role name	HTML element
form	<form>
group	<fieldset>
search	<form role=search>
button	<button>
button	<input type=button>
button	<button type=submit>, <input type=submit>
textbox	<textarea>
textbox	<input type=text>
textbox	<input type=email>
textbox	<input type=tel>
textbox	<input type=url>
searchbox	<input type=search> without list attribute
radiogroup	<fieldset role=radiogroup>
radio	<input type=radio>
checkbox	<input type=checkbox>
combobox	<select> without multiple attribute
listbox	<select> with multiple attribute
option	<option>
slider	<input type=range>
none	<input type=password>
progressbar	<progress>
status	<output>

Tables

Role name	HTML element
table	<table>
rowgroup	<tbody>, <thead>, <tfoot>
rowheader	<th>
columnheader	<th>
row	<tr>
cell	<td>

Tabs

Role name	HTML element
tablist	<ul role=tablist>
tab	<button role=tab>
tabpanel	<section role=tabpanel>
You should manage focus with JavaScript.

Menus

Role name	HTML element
menu	<ul role=menu>
menuitem	<button role=menuitem>
menuitemcheckbox	<button role=menuitemcheckbox>
menuitemradio	<button role=menuitemradio>
menubar	<nav role=menubar>
You should manage focus with JavaScript.