« Back to home

Reviewing aria-labelledby

Example 1: Using a child element

When aria-labelledby references a descendant element, the referenced element's text becomes the accessible name.

Accessible name for the <nav> should be: About us

Source:

• About us: contents of the <h3>

<nav aria-labelledby="aardvark">
  <h3 id="aardvark">About us</h3>
</nav>

Example 2: Anywhere in the DOM

Accessible name for the <button> should be: Buy Lawn Mower

Source:

• Buy Lawn Mower: from contents of the <p> with an ID of "bat"

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

Example 3: More than one source

Accessible name for the <button> should be: Buy Lawn Mower On special

Source:

• Buy Lawn Mower: from contents of the <p> with an ID of "cheetah"
• On special: from contents of the <p> with an ID of "zebra"

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

Example 4: Reference the element itself

Accessible name for the <button> should be: Buy Lawn Mower On special

Source:

• Buy: from contents of the <button> with an ID of "dingo"
• Lawn Mower: from contents of the <p> with an ID of "echidna"
• On special: from contents of the <p> with an ID of "ferret"

<p id="echidna">Lawn Mower</p>
<button id="dingo" aria-labelledby="dingo echidna ferret">Buy</button>
<p id="ferret">On special</p>

Example 5: Hidden elements via display: none

Accessible name for the <button> should be: Buy now

Source:

• Buy now: from contents of the hidden <p> with an ID of "gazelle"

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

Example 6: Hidden elements via CSS

Accessible name for the <button> should be: Buy now

Source:

• Buy now: from contents of the hidden <p> with an ID of "hamster"

<button aria-labelledby="hamster">Buy</button>
<p id="hamster" class="hidden">Buy now</p>

Example 7: Hidden element via aria-hidden="true"

Accessible name for the <button> should be: Goodbye world

Source:

• Goodbye world: from contents of the <p> with an ID of "ibex", despite aria-hidden="true"

<button aria-labelledby="ibex"></button>
<p id="ibex" aria-hidden="true">Goodbye world</p>

Example 8: Empty strings

If the element referenced by aria-labelledby is empty, it does not contribute an accessible name. The accessible name is then determined from any other available naming source, if one exists.

Accessible name for the <button> should be: Hello world

Source:

• Hello world: from contents of the <button>

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

Example 9: Missing ID

If aria-labelledby references an ID that does not exist in the page, that ID contributes nothing to the accessible name.

Accessible name for the <button> should be: none — the referenced ID does not exist.

Source:

• No accessible name: the element with an ID of "koala" does not exist in the page

<button aria-labelledby="koala">Buy</button>

« Back to home