260 lines
18 KiB
HTML
260 lines
18 KiB
HTML
<!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>
|