Reviewing aria-labelledby

Example 1

<nav aria-labelledby="aaa">
  <h4 id="aaa">About us</h4>
</nav>

Example 2 - Anywhere in the DOM?

<p id="bbb">Buy Lawn Mower</p>
<button aria-labelledby="bbb">Buy</button>

Example 3 - More than one source?

<p id="ccc">Buy Lawn Mower</p>
<button aria-labelledby="ccc ddd">Buy</button>
<p id="ddd">On special</p>

Example 4 - Reference the element itself?

<p id="yyy">Lawn Mower</p>
<button id="xxx" aria-labelledby="xxx yyy zzz">Buy</button>
<p id="zzz">On special</p>

Example 5 - Hidden elements?

<p id="eee" style="display: none">Buy now</p>
<button aria-labelledby="eee">Buy</button>

Example 6 - Hidden elements?

<p id="fff" class="off-screen">Buy now</p>
<button aria-labelledby="fff">Buy</button>

Example 7 - Empty strings?

<button aria-labelledby="ggg">Hello world</button>
<p id="ggg"></p>

Example 8 - Empty strings?

<button aria-labelledby="hhh"></button>
<p id="hhh"></p>

Example 9 - Hidden?

<nav aria-labelledby="iii"></nav>
<p id="iii" hidden>Hello world</p>

Example 10 - aria-hidden?

<nav aria-labelledby="jjj"></nav>
<p id="jjj" aria-hidden="true">Goodbye world</p>

Testing home