« Back to home

Testing aria-describedby

Which of the examples below correctly reference a description element?

Example 1: Single visible reference

Accessible description for the <input> should be: Must be your full name

<label for="alpaca">Name</label>
<p id="badger">Must be your full name</p>
<input id="alpaca" aria-describedby="badger">

Example 2: Reference to more than one source

Accessible description for the <input> should be: Must be your full name Error: This field is required

<label for="camel">Name</label>
<p id="dolphin">Must be your full name</p>
<input id="camel" aria-describedby="dolphin echidna">
<p id="echidna">Error: This field is required</p>

Example 3: Reference to element hidden with display: none

Accessible description for the <input> should be: Must be your full name

<label for="gazelle">Name</label>
<p style="display: none;" id="hedgehog">Must be your full name</p>
<input id="gazelle" aria-describedby="hedgehog">

Example 4: Reference to element hidden with CSS

Accessible description for the <input> should be: Must be your full name

<label class="label" for="impala">Name</label>
<p class="hidden" id="jaguar">Must be your full name</p>
<input class="input" id="impala" aria-describedby="jaguar">

Example 5: Missing ID reference

There should be no accessible description for the <input>.

<label class="label" for="kangaroo">Name</label>
<input class="input" id="kangaroo" aria-describedby="leopard">

Example 6: Empty referenced element

If the element referenced by aria-describedby is empty, it does not contribute an accessible description.

There should be no accessible description for the <input>.

<label class="label" for="meerkat">Name</label>
<p id="numbat"></p>
<input class="input" id="meerkat" aria-describedby="numbat">

Example 7: Multiple references where one is missing

Accessible description for the <input> should be: Must be your full name

The ID quoll does not exist in the page and contributes nothing to the description.

<label class="label" for="ostrich">Name</label>
<p id="parrot">Must be your full name</p>
<input class="input" id="ostrich" aria-describedby="parrot quoll">

« Back to home