Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html-aam/names.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>HTML-AAM Element Accessible Name From Author Tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<p>Tests the accName for elements defined in <a href="https://w3c.github.io/html-aam/#accessible-name-and-description-computation">HTML-AAM: Accessible Name Computations By HTML Element</a>.
These tests are meant to show whether an element returns a name per the naming mechanism used. See <a href="https://wpt.fyi/results/accname">wpt: accname</a> for expanded accName testing.</p>
<!--
The following elements are those which can be named by authors. They do not receive their name from elements for which they are an accessibility ancestor.
There are other elements which can be named by author, but have additional ways in which they can be named. These elements will be tested separately.
-->
<h2>address element</h2>
<address data-testname="address no name" data-expectedlabel="" class="ex">x</address>
<address data-testname="address aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</address>
<address data-testname="address aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</address>
<address data-testname="address title" title="title" data-expectedlabel="title" class="ex">x</address>
<address data-testname="address aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</address>
<address data-testname="address aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</address>
<address data-testname="address aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</address>
<address data-testname="address aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</address>
<h2>aside element</h2>
<aside data-testname="aside no name" data-expectedlabel="" class="ex">x</aside>
<aside data-testname="aside aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</aside>
<aside data-testname="aside aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</aside>
<aside data-testname="aside title" title="title" data-expectedlabel="title" class="ex">x</aside>
<aside data-testname="aside aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</aside>
<aside data-testname="aside aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</aside>
<aside data-testname="aside aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</aside>
<aside data-testname="aside aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</aside>
<h2>blockquote element</h2>
<blockquote data-testname="blockquote no name" data-expectedlabel="" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</blockquote>
<blockquote data-testname="blockquote title" title="title" data-expectedlabel="title" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</blockquote>
<blockquote data-testname="blockquote aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</blockquote>
<h2>details element</h2>
<details data-testname="details no name" data-expectedlabel="" class="ex"><summary>x</summary></details>
<details data-testname="details aria-label" aria-label="label" data-expectedlabel="label" class="ex"><summary>x</summary></details>
<details data-testname="details aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details>
<details data-testname="details title" title="title" data-expectedlabel="title" class="ex"><summary>x</summary></details>
<details data-testname="details aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details>
<details data-testname="details aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details>
<details data-testname="details aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><summary>x</summary></details>
<details data-testname="details aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><summary>x</summary></details>
<h2>figure element</h2>
<figure data-testname="figure no name" data-expectedlabel="" class="ex">x</figure>
<figure data-testname="figure aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</figure>
<figure data-testname="figure aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</figure>
<figure data-testname="figure title" title="title" data-expectedlabel="title" class="ex">x</figure>
<figure data-testname="figure aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</figure>
<figure data-testname="figure aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</figure>
<figure data-testname="figure aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</figure>
<figure data-testname="figure aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</figure>
<h2>footer element</h2>
<footer data-testname="footer no name" data-expectedlabel="" class="ex">x</footer>
<footer data-testname="footer aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</footer>
<footer data-testname="footer aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</footer>
<footer data-testname="footer title" title="title" data-expectedlabel="title" class="ex">x</footer>
<footer data-testname="footer aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</footer>
<footer data-testname="footer aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</footer>
<footer data-testname="footer aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</footer>
<footer data-testname="footer aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</footer>
<h2>form element</h2>
<form data-testname="form no name" data-expectedlabel="" class="ex">x</form>
<form data-testname="form aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</form>
<form data-testname="form aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</form>
<form data-testname="form title" title="title" data-expectedlabel="title" class="ex">x</form>
<form data-testname="form aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</form>
<form data-testname="form aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</form>
<form data-testname="form aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</form>
<form data-testname="form aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</form>
<h2>hgroup element</h2>
<hgroup data-testname="hgroup no name" data-expectedlabel="" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-label" aria-label="label" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup title" title="title" data-expectedlabel="title" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><h3>x</h3><p>y</p></hgroup>
<hgroup data-testname="hgroup aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><h3>x</h3><p>y</p></hgroup>
<h2>hr element</h2>
<hr data-testname="hr no name" data-expectedlabel="" class="ex">
<hr data-testname="hr aria-label" aria-label="label" data-expectedlabel="label" class="ex">
<hr data-testname="hr aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">
<hr data-testname="hr title" title="title" data-expectedlabel="title" class="ex">
<hr data-testname="hr aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">
<hr data-testname="hr aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">
<hr data-testname="hr aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">
<hr data-testname="hr aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">
<h2>ol element</h2>
<ol data-testname="ol no name" data-expectedlabel="" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ol>
<ol data-testname="ol title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ol>
<ol data-testname="ol aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ol>
<h2>main element</h2>
<main data-testname="main no name" data-expectedlabel="" class="ex">x</main>
<main data-testname="main aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</main>
<main data-testname="main aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</main>
<main data-testname="main title" title="title" data-expectedlabel="title" class="ex">x</main>
<main data-testname="main aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</main>
<main data-testname="main aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</main>
<main data-testname="main aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</main>
<main data-testname="main aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</main>
<h2>menu element</h2>
<menu data-testname="menu no name" data-expectedlabel="" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></menu>
<menu data-testname="menu title" title="title" data-expectedlabel="title" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></menu>
<menu data-testname="menu aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></menu>
<h2>nav element</h2>
<nav data-testname="nav no name" data-expectedlabel="" class="ex">x</nav>
<nav data-testname="nav aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</nav>
<nav data-testname="nav aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</nav>
<nav data-testname="nav title" title="title" data-expectedlabel="title" class="ex">x</nav>
<nav data-testname="nav aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</nav>
<nav data-testname="nav aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</nav>
<nav data-testname="nav aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</nav>
<nav data-testname="nav aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</nav>
<h2>search element</h2>
<search data-testname="search no name" data-expectedlabel="" class="ex">x</search>
<search data-testname="search aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</search>
<search data-testname="search aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</search>
<search data-testname="search title" title="title" data-expectedlabel="title" class="ex">x</search>
<search data-testname="search aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</search>
<search data-testname="search aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</search>
<search data-testname="search aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</search>
<search data-testname="search aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</search>
<h2>section element</h2>
<section data-testname="section no name" data-expectedlabel="" class="ex">x</section>
<section data-testname="section aria-label" aria-label="label" data-expectedlabel="label" class="ex">x</section>
<section data-testname="section aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex">x</section>
<section data-testname="section title" title="title" data-expectedlabel="title" class="ex">x</section>
<section data-testname="section aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex">x</section>
<section data-testname="section aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex">x</section>
<section data-testname="section aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex">x</section>
<section data-testname="section aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex">x</section>
<h2>ul element</h2>
<ul data-testname="ul no name" data-expectedlabel="" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-label" aria-label="label" data-expectedlabel="label" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-labelledby" aria-labelledby="labelledby" data-expectedlabel="labelledby" class="ex"><li>x</li></ul>
<ul data-testname="ul title" title="title" data-expectedlabel="title" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-labelledby vs aria-label vs title" aria-labelledby="labelledby" aria-label="label" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-labelledby vs aria-label" aria-labelledby="labelledby" aria-label="label" data-expectedlabel="labelledby" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-labelledby vs title" aria-labelledby="labelledby" title="title" data-expectedlabel="labelledby" class="ex"><li>x</li></ul>
<ul data-testname="ul aria-label vs title" aria-label="label" title="title" data-expectedlabel="label" class="ex"><li>x</li></ul>
<!-- element to reference for aria-labelledby tests -->
<div id="labelledby">labelledby</div>
<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>