Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pyrrho/790c44cbda05c79e33bcdb89746ec0f3 to your computer and use it in GitHub Desktop.
Save pyrrho/790c44cbda05c79e33bcdb89746ec0f3 to your computer and use it in GitHub Desktop.
Shamelessly stolen from, but with great appreciation for,
https://www.w3.org/TR/html-aria/
<table>
<caption>
Rules of <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attributes usage by HTML language feature
</caption>
<tbody>
<tr>
<th>HTML language feature </th>
<th>Default Implicit <abbr title="Accessible Rich Internet Applications">ARIA</abbr> semantics - <em class="rfc2119" title="SHOULD NOT">SHOULD NOT</em> be used</th>
<th><abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles, states and properties which <em class="rfc2119" title="MAY">MAY</em> be used</th>
</tr>
<tr id="ahref" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-a-element"><code>a</code></a> element with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-hyperlink-href"><code>href</code></a></td>
<td><code>role=<a href="#index-aria-link">link</a></code></td>
<td><details>
<p>Roles: <code><a href="#index-aria-button">button</a>, <a href="#index-aria-checkbox">checkbox</a>, <a href="#index-aria-menuitem">
menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-radio">radio</a>, <a href="#index-aria-tab">tab</a>, <a href="#index-aria-switch">switch</a> </code>or<code> <a href="#index-aria-treeitem">treeitem</a></code>
</p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles and the <a href="#index-aria-link">link</a> role
</p></details></td>
</tr>
<tr id="anohref" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-a-element"><code>a</code></a> element without a <a href="http://www.w3.org/TR/html51/semantics.html#attr-hyperlink-href"><code>href</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable allowed roles</p></details></td>
</tr>
<tr id="address" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-address-element"><code>address</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <a href="#index-aria-contentinfo"><code>contentinfo</code></a><br>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a>
</p></details></td>
</tr>
<tr id="areahref" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-area-element"><code>area</code></a> with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-hyperlink-href"><code>href</code></a></td>
<td><code>role=<a href="#index-aria-link">link</a></code></td>
<td><details>
<p> <a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code><a href="#index-aria-link">link</a></code> role.</p></details></td>
</tr>
<tr id="article" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-article-element">article</a></code></td>
<td><code>role=<a href="#index-aria-article">article</a></code></td>
<td><details>
<p>Roles: <code><a href="#index-aria-presentation">presentation</a>, <a href="#index-aria-document">document</a>, <a href="#index-aria-application">application</a>, <a href="#index-aria-main">main</a> or <a href="#index-aria-region">region</a></code>.<br>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the allowed roles
</p></details></td>
</tr>
<tr id="aside" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-aside-element">aside</a> </code></td>
<td><code>role=<a href="#index-aria-complementary">complementary</a></code></td>
<td><details>
<p>Roles:<code> <a href="#index-aria-note">note</a>, <a href="#index-aria-region">region</a></code> or <a href="#index-aria-search"><code>search</code></a>.</p>
<p>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a>
and any <code>aria-*</code> attributes applicable to the allowed roles
</p></details></td>
</tr>
<tr id="audio" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-audio-element">audio</a> </code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <a href="#index-aria-application"><code>application</code></a> <br>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <a href="#index-aria-application"><code>application</code></a> role.
</p></details></td>
</tr>
<tr id="base" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-base-element">base</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="body" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-body-element"><code>body</code></a></td>
<td><code>role=<a href="#index-aria-document">document</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a> </details></td>
</tr>
<tr id="button" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-button-element">button</a></code></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p>Roles: <code><a href="#index-aria-checkbox">checkbox</a></code>, <code><a href="#index-aria-link">link</a>, <a href="#index-aria-menuitem">menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-radio">radio</a></code>, or <a href="#index-aria-switch"><code>switch</code></a><br>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="typemenu" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-button-element">button</a> <a href="http://www.w3.org/TR/html51/semantics.html#attr-button-type-menu-state">type="menu"</a></code></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p>Roles: <code><a href="#index-aria-link">link</a>, <a href="#index-aria-menuitem">menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-radio">radio</a></code>. <br>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="caption" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-caption-element"><code>caption</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a></details></td>
</tr>
<tr id="col-colgroup" tabindex="-1">
<td><p><a href="http://www.w3.org/TR/html51/semantics.html#the-col-element"><code>col</code></a><code>, <a href="http://www.w3.org/TR/html51/semantics.html#the-colgroup-element">colgroup</a></code><a href="http://www.w3.org/TR/html51/semantics.html#the-colgroup-element"></a></p></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="datalist" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-datalist-element">datalist</a></code></td>
<td><code>role=<a href="#index-aria-listbox">listbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the<a href="#index-aria-listbox"> listbox</a> role. </p></details></td>
</tr>
<tr id="dd-dt" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-dd-element"><code>dd</code></a></td>
<td><code>role=<a href="#index-aria-definition">definition</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <a href="#index-aria-definition">definition</a> role.</details></td>
</tr>
<tr id="dd-dt2" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-dt-element">dt</a></code></td>
<td><code>role=</code><code><a href="#index-aria-listitem">listitem</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <a href="#index-aria-listitem">listitem</a> role.</details></td>
</tr>
<tr id="details" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-details-element">details</a></code></td>
<td><code>role=<a href="#index-aria-group">group</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code>group</code> role.</details></td>
</tr>
<tr id="dialog" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-dialog-element"><code>dialog</code></a></td>
<td><code>role=<a href="#index-aria-dialog">dialog</a></code></td>
<td><details>
<p>Role: <a href="#index-aria-alertdialog"><code>alertdialog</code></a><code></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code>dialog</code> role.
</p></details></td>
</tr>
<tr id="div" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-div-element"><code>div</code> </a></td>
<td>No role</td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="dl" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-dl-element"><code>dl</code></a></td>
<td><code>role=<a href="#index-aria-list">list</a></code></td>
<td><details>
<p>Role: <code><a href="#index-aria-directory">directory</a>, <a href="#index-aria-group">group</a>, <a href="#index-aria-listbox">listbox</a>, <a href="#index-aria-menu">menu</a>, <a href="#index-aria-menubar">menubar</a>,<a href="#index-aria-presentation"> presentation</a> , <a href="#index-aria-radiogroup">radiogroup</a>, <a href="#index-aria-tablist">tablist</a>, <a href="#index-aria-toolbar">toolbar</a></code> or <a href="#index-aria-tree"><code>tree</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="embed" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-embed-element">embed</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code><a href="#index-aria-application">application</a>, <a href="#index-aria-document">document</a>, <a href="#index-aria-presentation">presentation</a> </code>or<code> <a href="#index-aria-img">img</a></code></p>
<p>
<a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="fieldset" tabindex="-1">
<td><a href="http://w3c.github.io/html/sec-forms.html#the-fieldset-element"><code>fieldset</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Roles: <code><a href="#index-aria-group">group</a></code> or <code><a href="#index-aria-presentation">presentation</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="figure" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-figure-element"><code>figure </code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="footer" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-footer-element">footer</a></code></td>
<td>If not a descendant of an <code>article</code> or <code>section</code> element <code>role=<a href="#index-aria-contentinfo">contentinfo</a></code>, otherwise <a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Roles: <code><a href="#index-aria-group">group</a></code> or <code><a href="#index-aria-presentation">presentation</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed
</p></details></td>
</tr>
<tr id="form" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-form-element">form</a></code></td>
<td><code>role=<a href="#index-aria-form">form</a></code></td>
<td><details>
<p>Role: <a href="#index-aria-search"><code>search</code></a> or <a href="#index-aria-presentation"><code>presentation</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the allowed roles</p></details></td>
</tr>
<tr id="p-pre-blockquote" tabindex="-1">
<td><p>grouping content elements not listed elsewhere:</p><p><a href="http://www.w3.org/TR/html51/semantics.html#the-p-element"><code>p</code></a><code>, <a href="http://www.w3.org/TR/html51/semantics.html#the-pre-element">pre</a>, <a href="http://www.w3.org/TR/html51/semantics.html#the-blockquote-element">blockquote</a></code><a href="http://www.w3.org/TR/html51/semantics.html#the-blockquote-element"></a></p></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">Any <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="h1-h6" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><code>h1</code></a> to <a href="http://www.w3.org/TR/html51/semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><code>h6</code></a> element</td>
<td><code>role=<a href="#index-aria-heading">heading</a></code>, with the <code>aria-level</code> = positive integer</td>
<td><details>
Role: <a href="#index-aria-tab"><code>tab</code></a> or <a href="#index-aria-presentation"><code>presentation</code></a>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="head" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-head-element">head</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="header" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-header-element"><code>header</code></a></td>
<td>If not a descendant of an <code>article</code> or <code>section</code> element <code>role=<a href="#index-aria-banner">banner</a></code>, otherwise <a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Roles: <a href="#index-aria-group"><code>group</code></a> or <code><a href="#index-aria-presentation">presentation</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed
</p></details></td>
</tr>
<tr id="hr" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-hr-element">hr</a></code></td>
<td><code>role=<a href="#index-aria-separator">separator</a></code></td>
<td><details>
<p>Role: <code>presentation</code></p>
<p>global <a href="#index-aria-global"><code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code>separator</code> role.</p></details></td>
</tr>
<tr id="html" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-html-element">html</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="iframe" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-iframe-element"><code>iframe</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code>application, document, </code>or<code> img </code></p>
<p><a href="#index-aria-global"><code>globalaria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="iframe-seamless" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-iframe-element"><code>iframe (seamless)</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code>application, document, </code>or<code> img </code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="img-alt" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-img-element">img</a> with <a href="http://www.w3.org/TR/html51/semantics.html#attr-img-alt">alt</a>=""</code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code>presentation</code></p>
<p><strong class="nosupport">No <code>aria*</code> attributes</strong></p></details></td>
</tr>
<tr id="img" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-img-element">img</a></code></td>
<td><code>role=<a href="#index-aria-img">img</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="input-button" tabindex="-1">
<td><code>input type= </code><a href="http://www.w3.org/TR/html51/semantics.html#button-state-(type=button)"><code>button</code></a></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p>Role: <code> <a href="#index-aria-link">link</a>, <a href="#index-aria-menuitem">menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-radio">radio</a> or </code><a href="#index-aria-switch"><code>switch</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="input-checkbox" tabindex="-1">
<td><code>input type= <a href="http://www.w3.org/TR/html51/semantics.html#checkbox-state-(type=checkbox)">checkbox</a></code></td>
<td><p><code>role=<a href="#index-aria-checkbox">checkbox</a></code></p></td>
<td><details>
<p>Role: <code><a href="#index-aria-button">button</a></code> (when used in conjunction with <code>aria-pressed</code>), <code><a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a></code> <code>or </code><a href="#index-aria-switch"><code>switch</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr>
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#color-state-(type=color)">color</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<strong class="nosupport">No <code>role</code></strong>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-color" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#date-state-(type=date)">date</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-datetime" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#date-and-time-state-(type=datetime)">datetime</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-email" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#e-mail-state-(type=email)">email</a></code> with no <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-list"><code>list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-checkbox">textbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code>textbox</code> role
</p></details></td>
</tr>
<tr id="input-file" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#file-upload-state-(type=file)">file</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-hidden" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#hidden-state-(type=hidden)">hidden</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="input-image" tabindex="-1">
<td><code>input type= </code><a href="http://www.w3.org/TR/html51/semantics.html#image-button-state-(type=image)"><code>image</code></a></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p>Role: <code> <a href="#index-aria-link">link</a>, <a href="#index-aria-menuitem">menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-radio">radio</a> or </code><a href="#index-aria-switch"><code>switch</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="input-month" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#month-state-(type=month)">month</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-number" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#number-state-(type=number)">number</a></code></td>
<td><code>role=<a href="#index-aria-spinbutton">spinbutton</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code>spinbutton</code> role.
</p></details></td>
</tr>
<tr id="input-password" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#password-state-(type=password)">password</a></code></td>
<td><code>role=<a href="#index-aria-textbox">textbox</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-radio" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#radio-button-state-(type=radio)" title="attr-input-type-radio">radio</a></code></td>
<td><code>role=<a href="#index-aria-radio">radio</a></code></td>
<td><details>
<p><code>role</code>:<a href="#index-aria-menuitemradio">menuitemradio</a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code>menuitemradio</code> role.
</p></details></td>
</tr>
<tr id="input-range" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#range-state-(type=range)" title="attr-input-type-range">range</a></code></td>
<td><code>role=<a href="#index-aria-slider">slider</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> slider </code>role.
</p></details></td>
</tr>
<tr id="input-reset" tabindex="-1">
<td><code>input type= <a href="http://www.w3.org/TR/html51/semantics.html#reset-button-state-(type=reset)" title="attr-input-type-reset">reset</a></code></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code> button </code>role. </p></details></td>
</tr>
<tr id="input-search-no-list" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-search">search</a></code>, with no <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-list"><code>list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-searchbox">searchbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code> searchbox </code>role. </p></details></td>
</tr>
<tr id="input-submit" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#submit-button-state-(type=submit)" title="attr-input-type-submit">submit </a></code></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the <code> button </code>role. </p></details></td>
</tr>
<tr id="input-tel" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#telephone-state-(type=tel)" title="attr-input-type-tel">tel</a> </code>with no <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-list"><code> list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-textbox">textbox</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> </p></details></td>
</tr>
<tr id="input-text" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#text-(type=text)-state-and-search-state-(type=search)">text</a> </code>with no <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-list" title="concept-input-list"><code>list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-textbox">textbox</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> </p></details></td>
</tr>
<tr id="input-text-list" tabindex="-1">
<td><code>input type =</code> <a href="http://www.w3.org/TR/html51/semantics.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-text"><code>text</code></a><code>, <a href="http://www.w3.org/TR/html51/semantics.html#text-(type=text)-state-and-search-state-(type=search)" title="attr-input-type-search">search</a>, <a href="http://www.w3.org/TR/html51/semantics.html#telephone-state-(type=tel)" title="attr-input-type-tel">tel</a>, <a href="http://www.w3.org/TR/html51/semantics.html#url-state-(type=url)" title="attr-input-type-url">url</a>, </code>or<code> <a href="http://www.w3.org/TR/html51/semantics.html#e-mail-state-(type=email)" title="attr-input-type-email">email</a></code> with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-list"><code>list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-combobox">combobox</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> combobox </code>role.
</p></details></td>
</tr>
<tr id="input-time" tabindex="-1">
<td><code>input type= <a href="http://www.w3.org/TR/html51/semantics.html#time-state-(type=time)" title="attr-input-type-time">time</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-url" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#url-state-(type=url)">url</a></code><a href="http://www.w3.org/TR/html51/semantics.html#url-state-(type=url)" title="attr-input-type-url"></a> with no <a href="http://www.w3.org/TR/html51/single-page.html#concept-input-list" title="concept-input-list"><code>list</code></a> attribute</td>
<td><code>role=<a href="#index-aria-textbox">textbox</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="input-week" tabindex="-1">
<td><code>input type = <a href="http://www.w3.org/TR/html51/semantics.html#week-state-(type=week)">week</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="ins-del" tabindex="-1">
<td><p><a href="http://www.w3.org/TR/html51/semantics.html#the-ins-element">ins</a> and <a href="http://www.w3.org/TR/html51/semantics.html#the-del-element">del</a></p></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">Any <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="keygen" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-keygen-element"><code>keygen</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="label" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-label-element"><code>label</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="legend" tabindex="-1">
<td><a href="http://w3c.github.io/html/sec-forms.html#the-legend-element"><code>legend</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a></details></td>
</tr>
<tr id="li" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-li-element"><code>li</code></a> element whose parent is an <a href="http://www.w3.org/TR/html51/semantics.html#the-ol-element"><code>ol</code></a> or <a href="http://www.w3.org/TR/html51/semantics.html#the-ul-element"><code>ul</code></a></td>
<td><code>role=<a href="#index-aria-listitem">listitem</a></code></td>
<td><details>
<p>Role: <code><a href="#index-aria-menuitem">menuitem</a>, <a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a>, <a href="#index-aria-menuitemradio">menuitemradio</a>, <a href="#index-aria-option">option</a>, <a href="#index-aria-separator">separator</a>, <a href="#index-aria-tab">tab</a>, or <a href="#index-aria-treeitem">treeitem</a></code></p></details></td>
</tr>
<tr id="link-href" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-link-element"><code>link</code></a> element with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-link-href"><code>href</code></a></td>
<td><code>role=<a href="#index-aria-link">link</a></code></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="main" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-main-element"><code>main</code></a></td>
<td><code>role=<a href="#index-aria-main">main</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="map" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-map-element"><code>map</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="math" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#mathml"><code>math</code></a></td>
<td><code>role=<a href="#index-aria-math">math</a></code></td>
<td><details>
<p><strong class="nosupport">No <code>role</code></strong></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="menu-toolbar" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-menu-element">menu</a> <a href="http://www.w3.org/TR/html51/semantics.html#attr-menu-type">type</a> = <a href="http://www.w3.org/TR/html51/semantics.html#toolbar-state">toolbar</a></code></td>
<td><code>role=<a href="#index-aria-toolbar">toolbar</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> toolbar </code>role.
</p></details></td>
</tr>
<tr id="menuitem-command" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-menuitem-element"><code>menuitem</code></a> <code><a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type">type</a> = <a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type-state-command">command</a></code></td>
<td><code>role=<a href="#index-aria-menuitem">menuitem</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> menuitem </code>role.
</p></details></td>
</tr>
<tr id="menuitem-checkbox" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-menuitem-element"><code>menuitem</code></a> <code> <a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type">type</a> = <a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type-state-checkbox">checkbox</a></code></td>
<td><code>role=<a href="#index-aria-menuitemcheckbox">menuitemcheckbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> menuitemcheckbox </code>role.
</p></details></td>
</tr>
<tr id="menuitem-radio" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-menuitem-element"><code>menuitem</code></a> <code> <a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type">type</a> = <a href="http://www.w3.org/TR/html51/semantics.html#attr-menuitem-type-state-radio">radio</a></code></td>
<td><code>role=<a href="#index-aria-menuitemradio">menuitemradio</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> menuitemradio </code>role.
</p></details></td>
</tr>
<tr id="meta" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-meta-element">meta</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="meter" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-meter-element">meter</a></code></td>
<td><code>role=<a href="#index-aria-progressbar">progressbar</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a></details></td>
</tr>
<tr id="nav" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-nav-element">nav</a></code></td>
<td><code>role=<a href="#index-aria-navigation">navigation</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a></details></td>
</tr>
<tr id="noscript" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-noscript-element">noscript</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="object" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-object-element"><code>object</code></a><code></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code><a href="#index-aria-application">application</a>, <a href="#index-aria-document">document</a>, </code>or<code> <a href="#index-aria-img">img</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="ol" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-ol-element">ol</a> </code></td>
<td><code>role=<a href="#index-aria-list">list</a></code></td>
<td><details>
<p>Role: <code><a href="#index-aria-directory">directory</a>, <a href="#index-aria-group">group</a>, <a href="#index-aria-listbox">listbox</a>, <a href="#index-aria-menu">menu</a>, <a href="#index-aria-menubar">menubar</a>,<a href="#index-aria-presentation"> presentation</a> , <a href="#index-aria-radiogroup">radiogroup</a>, <a href="#index-aria-tablist">tablist</a>, <a href="#index-aria-toolbar">toolbar</a></code> or <a href="#index-aria-tree"><code>tree</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="optgroup" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-optgroup-element"><code>optgroup</code></a></td>
<td><code>role=<a href="#index-aria-group">group</a></code></td>
<td><details><a href="#index-aria-global">global <code>aria-*</code> attributes</a></details></td>
</tr>
<tr id="option" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-option-element">option</a> element that is in a <a href="http://www.w3.org/TR/html51/semantics.html#concept-select-option-list">list of options</a> or that represents a
suggestion in a <a href="http://www.w3.org/TR/html51/semantics.html#the-datalist-element">datalist</a></td>
<td><code>role=<a href="#index-aria-option">option</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="output" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-output-element">output</a></code></td>
<td><code>role=<a href="#index-aria-status">status</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr>
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-param-element">param</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="picture" tabindex="-1">
<td><code><a href="http://picture.responsiveimages.org/">picture</a> </code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="progress" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-progress-element">progress</a></code></td>
<td><code>role=<a href="#index-aria-progressbar">progressbar</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> progressbar </code>role.
</p></details></td>
</tr>
<tr id="script" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-script-element">script</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="section" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-section-element"><code>section</code></a></td>
<td><code>role=<a href="#index-aria-region">region</a></code></td>
<td><details>
<p>Role: <code><a href="#index-aria-alert">alert</a>, <a href="#index-aria-alertdialog">alertdialog</a>, <a href="#index-aria-application">application</a>, <a href="#index-aria-banner">banner</a>, <a href="#index-aria-complementary">complementary</a>, <a href="#index-aria-contentinfo">contentinfo</a>, <a href="#index-aria-dialog">dialog</a>, <a href="#index-aria-document">document</a>, <a href="#index-aria-log">log</a>, <a href="#index-aria-main">main</a>, <a href="#index-aria-marquee">marquee</a>, <a href="#index-aria-navigation">navigation</a>, <a href="#index-aria-search">search</a>, or <a href="#index-aria-status">status</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="select" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-select-element"><code>select</code></a></td>
<td><code>role=<a href="#index-aria-listbox">listbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="source" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-source-element">source</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="span" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-span-element"><code>span</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="style" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-style-element">style</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="svg" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#svg">SVG</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <code><a href="#index-aria-application">application</a>, <a href="#index-aria-document">document</a>, or <a href="#index-aria-img">img</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="summary" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-summary-element">summary</a></code></td>
<td><code>role=<a href="#index-aria-button">button</a></code></td>
<td><details>
<p>Role: <code>button</code> with
<code>aria-expanded="true"</code> if the parent (<code>details</code>) element's <a href="http://www.w3.org/TR/html51/semantics.html#attr-details-open"><code>open</code></a> attribute is present, <code>
aria-expanded="false"</code> otherwise.
</p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> button </code>role.
</p></details></td>
</tr>
<tr id="table" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-table-element"><code>table</code></a></td>
<td><code>role=<a href="#index-aria-table">table</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="template" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-template-element">template</a> </code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="textarea" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-textarea-element">textarea</a> </code></td>
<td><code>role=<a href="#index-aria-textbox">textbox</a></code></td>
<td><details>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="tbody-tfoot-thead" tabindex="-1">
<td><p><a href="http://www.w3.org/TR/html51/semantics.html#the-tbody-element"><code>tbody</code></a>, <a href="http://www.w3.org/TR/html51/semantics.html#the-thead-element"><code>thead</code></a>, <a href="http://www.w3.org/TR/html51/semantics.html#the-tfoot-element"><code>tfoot</code></a></p></td>
<td><code>role=<a href="#index-aria-rowgroup">rowgroup</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a></p></details></td>
</tr>
<tr id="el-title" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-title-element">title</a></code></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="td" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-td-element">td</a></code></td>
<td>role=<a href="#index-aria-cell">cell</a></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="text-level-semantics" tabindex="-1">
<td>
<p>Text level semantic elements not listed elsewhere:</p>
<p><a href="http://www.w3.org/TR/html51/semantics.html#the-em-element"><code>em</code></a><code>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-strong-element">strong</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-small-element">small</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-s-element">s</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-cite-element">cite</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-q-element">q</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-dfn-element">dfn</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-abbr-element">abbr</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-time-element">time</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-code-element">code</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-var-element">var</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-samp-element">samp</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-kbd-element">kbd</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-sub-and-sup-elements">sub and sup</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-i-element">i</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-b-element">b</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-u-element">u</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-mark-element">mark </a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-ruby-element">ruby</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-rt-element">rt</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-rp-element">rp</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-bdi-element">bdi</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-bdo-element">bdo</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-br-element">br</a>,
<a href="http://www.w3.org/TR/html51/semantics.html#the-wbr-element">wbr</a> </code>
</p>
</td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<strong>Any</strong> <code>role</code>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="th" tabindex="-1">
<td><code><a href="http://www.w3.org/TR/html51/semantics.html#the-th-element">th</a></code><a href="http://www.w3.org/TR/html51/semantics.html#the-th-element"></a></td>
<td><code>role=<a href="#index-aria-columnheader">columnheader</a></code> or <code><a href="#index-aria-rowheader">rowheader</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="tr" tabindex="-1">
<td><p><a href="http://www.w3.org/TR/html51/semantics.html#the-tr-element"><code>tr</code></a></p></td>
<td><code>role=<a href="#index-aria-row">row</a></code></td>
<td><details>
<p><strong>Any</strong> <code>role</code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="track" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-track-element"><code>track</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details><strong class="nosupport">No <code>role</code> or <code>aria*</code> attributes</strong></details></td>
</tr>
<tr id="ul" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-ul-element"><code>ul</code></a></td>
<td><code>role=<a href="#index-aria-list">list</a></code></td>
<td><details>
<p>Role: <code><a href="#index-aria-directory">directory</a>, <a href="#index-aria-group">group</a>, <a href="#index-aria-listbox">listbox</a>, <a href="#index-aria-menu">menu</a>, <a href="#index-aria-menubar">menubar</a>, <a href="#index-aria-tablist">tablist</a>, <a href="#index-aria-toolbar">toolbar</a>, <a href="#index-aria-tree">tree</a>, <a href="#index-aria-presentation">presentation</a></code></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
allowed roles
</p></details></td>
</tr>
<tr id="video" tabindex="-1">
<td><a href="http://www.w3.org/TR/html51/semantics.html#the-video-element"><code>video</code></a></td>
<td><a href="#dfn-no-corresponding-role" class="internalDFN" data-link-type="dfn">No corresponding role</a></td>
<td><details>
<p>Role: <a href="#index-aria-application"><code>application</code></a></p>
<p><a href="#index-aria-global">global <code>aria-*</code> attributes</a> and any <code>aria-*</code> attributes applicable to the
<code> application </code>role.
</p></details></td>
</tr>
<tr id="attr-disabled" tabindex="-1">
<td>Element with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-fe-disabled"><code>disabled</code></a> attribute</td>
<td><code>aria-disabled="true"</code></td>
<td><details>
<p>Use the <code>disabled</code> attribute on any element that is <a href="http://www.w3.org/TR/html51/single-page.html#attributes-1">allowed the <code>disabled</code> attribute</a> in HTML5.
</p>
<p>Only use the <code>aria-disabled</code> attribute for elements that are <strong>not allowed</strong> to have a <code>disabled </code>attribute in HTML5
</p></details></td>
</tr>
<tr id="attr-required" tabindex="-1">
<td>Element with a <a href="http://www.w3.org/TR/html51/semantics.html#attr-input-required"><code>required</code></a> attribute</td>
<td><code>aria-required="true"</code></td>
<td><details>
<p>Use the <code>aria-required</code> attribute on any element that is <a href="http://www.w3.org/TR/html51/index.html#attributes-1">allowed the <code>required</code> attribute</a> in HTML5.
</p>
<p><em class="rfc2119" title="MAY">MAY</em> also be used for elements that have an attached <abbr title="Accessible Rich Internet Applications">ARIA</abbr> role which allows the <code>aria-required
</code> attribute.
</p></details></td>
</tr>
<tr id="attr-readonly" tabindex="-1">
<td>Element with a <a href="http://www.w3.org/TR/html51/semantics.html#the-readonly-attribute"><code>readonly</code></a> attribute</td>
<td><code>aria-readonly="true"</code></td>
<td><details>
<p>Use the <code>readonly</code> attribute on any element that is <a href="http://www.w3.org/TR/html51/index.html#attributes-1">allowed the <code>readonly</code> attribute</a> in HTML5.
</p>
<p>Only use the <code>aria-readonly</code> attribute for elements that are <em>not allowed</em> to have a <code>readonly</code> attribute in HTML5
</p></details></td>
</tr>
<tr id="attr-hidden" tabindex="-1">
<td>Element with a <a href="http://www.w3.org/TR/html51/editing.html#the-hidden-attribute"><code>hidden</code></a> attribute</td>
<td><code>aria-hidden="true"</code></td>
<td><details>
<p>Use the <code>aria-hidden</code> attribute on any HTML element. </p>
<p><strong>Note:</strong> If an element has a <code>hidden</code> attribute, an <code>aria-hidden</code> attribute is not required.</p></details></td>
</tr>
<tr id="IDL-ValidityState" tabindex="-1">
<td>Element that is a <a href="http://www.w3.org/TR/html51/semantics.html#candidate-for-constraint-validation">candidate for constraint validation</a> but that does not <a data-anolis-xref="concept-fv-valid" href="http://www.w3.org/TR/html51/semantics.html#concept-fv-valid">satisfy its constraints</a></td>
<td><code>aria-invalid="true"</code></td>
<td><details>
<p>Only use the <code>aria-invalid</code> attribute for elements that <em>are not </em><a href="http://www.w3.org/TR/html51/semantics.html#category-submit">submittable elements</a> in HTML5 </p></details></td>
</tr>
</tbody>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment