« 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">

Example 8: Empty attribute value

aria-describedby="" is present but has no value at all, no ID reference of any kind.

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

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

Example 9: Self-reference

This button's aria-describedby points at its own id. The ID resolves, so per the accessible description computation, its own visible text becomes its own description too, redundant, but not technically broken.

Accessible description for the <button> should be: Submit, the same as its own accessible name.

<button id="seahorse" aria-describedby="seahorse">Submit</button>

Example 10: Reference to element hidden with visibility: hidden

Distinct from Examples 3 and 4, this specifically tests visibility: hidden. The referenced element still occupies layout space, unlike display: none, but per the accessible name and description computation, hidden text still contributes to the description regardless of how it's hidden. The referenced element itself just won't get its own outline or badge, since it isn't visibly rendered.

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

<label class="label" for="tapir">Name</label>
<p style="visibility: hidden;" id="urchin">Must be your full name</p>
<input class="input" id="tapir" aria-describedby="urchin">

« Back to home