aria-allowed-role.html

<section id="pass-section-role-alert" role="alert"></section>
<dialog id="pass-dialog-role-alertdialog" role="alertdialog"></dialog>
<section id="pass-section-role-banner" role="banner"></section>
<section id="pass-section-role-complementary" role="complementary"></section>
<object data="" role="document" type="" id="pass-object-role-document"></object>
<section id="pass-section-role-doc-afterword" role="doc-afterword"></section>
<section id="pass-section-role-doc-bib" role="doc-bibliography"></section>
<ul>
  <li id="pass-li-role-doc-biblioentry" role="doc-biblioentry"></li>
</ul>
<p>
  <span id="pass-li-role-doc-biblioentry2" role="doc-biblioentry"></span>
</p>
<ul>
  <li id="pass-li-role-doc-endnote" role="doc-endnote"></li>
</ul>
<p>
  <span id="pass-li-role-doc-endnote2" role="doc-endnote"></span>
</p>
<aside id="pass-aside-doc-example" role="doc-example"></aside>
<figure id="pass-figure-doc-example" role="doc-example"></figure>
<div id="pass-div-has-any-role" role="contentinfo"></div>
<div id="pass-div-valid-role" role="link">ok</div>
<ol id="pass-ol-valid-role" role="directory"></ol>
<nav id="pass-nav-role-doc-index" role="doc-index"></nav>
<h1 id="pass-h1-role-doc-subtitle" role="doc-subtitle"></h1>
<video id="pass-video-valid-role" role="application"></video>
<a href="" role="treeitem" id="pass-a-valid-role-tree-item"></a>
<a href="" role="button" id="pass-a-valid-role-button"></a>
<a href="" role="doc-backlink" id="pass-a-valid-role-doc-backlink"></a>
<ul id="pass-ul-valid-role" role="toolbar">
  <li></li>
</ul>
<ol id="pass-ol-role-listbox" role="listbox">
  <li></li>
</ol>
<section id="pass-section-role-marquee" role="marquee"></section>
<figure id="pass-figure-role-group" role="group"></figure>
<section id="pass-section-valid-role-application" role="application"></section>
<section id="pass-section-valid-role-content-info" role="contentinfo"></section>
<section id="pass-section-valid-role-dialog" role="dialog"></section>
<button
  type="button"
  role="checkbox"
  id="pass-button-valid-role-checkbox"
></button>
<header id="pass-header-valid-role" role="group"></header>
<footer id="pass-footer-valid-role" role="group"></footer>
<embed id="pass-embed-valid-role" role="img" />
<input type="text" role="textbox" id="pass-input-text-redundant-role" />
<input type="text" role="textbox combobox" id="pass-input-multiple-roles" />
<input
  type="text"
  role="searchbox invalidrole"
  id="pass-input-multiple-valid-and-invalid-roles"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="searchbox"
  type="text"
  aria-expanded="true"
  id="pass-input-text-role-searchbox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="combobox"
  type="text"
  aria-expanded="true"
  id="pass-input-text-role-combobox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="combobox"
  type="search"
  aria-expanded="true"
  id="pass-input-search-role-combobox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="combobox"
  type="tel"
  aria-expanded="true"
  id="pass-input-tel-role-combobox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="combobox"
  type="url"
  aria-expanded="true"
  id="pass-input-url-role-combobox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="combobox"
  type="email"
  aria-expanded="true"
  id="pass-input-email-role-combobox"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="spinbutton"
  type="text"
  aria-expanded="true"
  id="pass-input-text-role-spinbutton"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="spinbutton"
  type="number"
  aria-expanded="true"
  id="pass-input-number-role-spinbutton"
/>
<input
  aria-autocomplete="list"
  aria-label="some label"
  autocomplete="off"
  role="spinbutton"
  type="tel"
  aria-expanded="true"
  id="pass-input-tel-role-spinbutton"
/>
<input type="image" role="link" id="pass-input-image-valid-role" />
<input
  type="checkbox"
  role="menuitemcheckbox"
  id="pass-input-checkbox-valid-role"
/>
<h1 id="pass-h1-valid-role" role="none"></h1>
<img alt="" role="presentation" id="pass-img-valid-role" />
<button id="pass-button-role-radio" role="radio"></button>
<aside id="pass-aside-role-region" role="region"></aside>
<form action="" id="pass-form-role-search" role="search"></form>
<ul>
  <li id="pass-li-role-sep" role="separator"></li>
</ul>
<iframe
  src="dummy.html"
  role="presentation"
  id="pass-iframe-presentation"
></iframe>
<iframe src="dummy.html" role="none" id="pass-iframe-none"></iframe>
<ul id="pass-ul-role-none" role="none"></ul>
<ul id="pass-ul-role-presentation" role="presentation"></ul>
<ol id="pass-ol-role-none" role="none"></ol>
<ol id="pass-ol-role-presentation" role="presentation"></ol>
<my-custom-element
  id="pass-custom-element-any-role"
  role="navigation"
></my-custom-element>
<!-- links -->
<a id="pass-dpub-1" role="doc-backlink" href="#">ok</a>
<a id="pass-dpub-2" role="doc-biblioref" href="#">ok</a>
<a id="pass-dpub-3" role="doc-glossref" href="#">ok</a>
<a id="pass-dpub-4" role="doc-noteref" href="#">ok</a>
<!-- images -->
<img alt="foo" id="pass-dpub-5" role="doc-cover" />
<!-- listitems -->
<ul>
  <li id="pass-dpub-6" role="doc-biblioentry">ok</li>
</ul>
<ul>
  <li id="pass-dpub-7" role="doc-endnote">ok</li>
</ul>
<hr id="hr-presentation" role="presentation" />
<hr id="hr-none" role="none" />
<span role="text" id="span-text" />
<div role="text" id="div-text" />
<p role="text" id="p-text" />
<div
  id="pass-graphics-document"
  role="graphics-document"
  aria-label="doc"
></div>
<div id="pass-graphics-object" role="graphics-object"></div>
<div id="pass-graphics-symbol" role="graphics-symbol"></div>

<dd id="fail-dd-no-role" role="link"></dd>
<dt id="fail-dt-no-role" role="banner"></dt>
<label id="fail-label-no-role" role="presentation"></label>
<ol id="fail-ol-invalid-role" role="banner"></ol>
<a href="" role="doc-acknowledgments" id="fail-a-invalid-role"></a>
<section id="fail-section-invalid-role" role="doc-subtitle"></section>
<embed id="fail-embed-invalid-role" role="doc-abstract" />
<input type="image" id="fail-input-image-invalid-role" role="doc-afterword" />
<button id="fail-button-role-cell" role="cell"></button>
<aside id="fail-aside-doc-foreword" role="doc-foreword"></aside>
<aside id="fail-aside-role-tab" role="tab"></aside>
<button
  id="fail-button-role-gridcell"
  role="gridcell"
  title="IconCheckmark"
  aria-label="IconCheckmark icon"
></button>
<input id="fail-input-role-gridcell-multiple-role" role="gridcell combobox" />
<div style="display: none">
  <button
    id="incomplete1"
    class="mm-tabstart"
    type="button"
    role="presentation"
  ></button>
</div>
<button
  id="incomplete2"
  type="button"
  aria-hidden="true"
  role="presentation"
></button>
<!-- links -->
<div id="fail-dpub-1" role="doc-backlink">ok</div>
<div id="fail-dpub-2" role="doc-biblioref">ok</div>
<div id="fail-dpub-3" role="doc-glossref">ok</div>
<div id="fail-dpub-4" role="doc-noteref">ok</div>
<!-- images -->
<div id="fail-dpub-5" role="doc-cover">ok</div>
<img role="doc-cover" aria-label="foo" id="pass-img-valid-role-aria-label" />
<img role="menuitem" title="bar" id="pass-img-valid-role-title" />
<div id="image-baz">hazaar</div>
<img
  role="switch"
  aria-labelledby="image-baz"
  id="pass-img-valid-role-aria-labelledby"
/>
<img role="radio" aria-label="test" id="pass-img-valid-role-radio" />
<img role="text" aria-label="foo" id="fail-img-invalid-role-aria-label" />
<img role="spinbutton" title="bar" id="fail-img-invalid-role-title" />
<img
  role="combobox"
  aria-labelledby="image-baz"
  id="fail-img-invalid-role-aria-labelledby"
/>
<img role="button" id="fail-img-no-accessible-name-present" />

<!-- listitems -->
<div id="fail-dpub-6" role="doc-biblioentry">ok</div>
<div id="fail-dpub-7" role="doc-endnote">ok</div>
<h1 role="text" id="fail-text-1">ok</h1>
<button role="text" id="fail-text-2">ok</button>
<a href="#" role="text" id="fail-text-3">ok</a>
<main role="text" id="fail-text-4">ok</main>

<!-- landmarks -->
<main><header role="banner" id="pass-header-banner">ok</header></main>
<main><footer role="contentinfo" id="pass-footer-contentinfo">ok</footer></main>
<nav role="none" id="pass-navnone-1">ok</nav>
<nav role="presentation" id="pass-navnone-2">ok</nav>

<img usemap="#my-map" />
<map name="my-map">
  <area shape="circle" coords="5,5,10" role="button" id="pass-imgmap-1" />
  <area shape="circle" coords="5,15,10" role="link" id="pass-imgmap-2" />
  <area
    shape="circle"
    coords="15,5,10"
    href="#"
    role="button"
    id="fail-imgmap-1"
  />
  <area shape="circle" coords="15,15,10" role="checkbox" id="fail-imgmap-2" />
</map>