aria-labelledby and aria-describedby tests

1. using span with single aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-1" aria-describedby="desc-1">

3. using div with single aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-2" aria-describedby="desc-2">

2. using label with single aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-3" aria-describedby="desc-3">

4. using p with single aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-4" aria-describedby="desc-4">

5. using span multiple aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-1 label-2" aria-describedby="desc-1 desc-2">

6. using label with single aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-3 label-5" aria-describedby="desc-3 desc-5">

7. using span with tabindex=-1 and multiple aria-labelledby and aria-describedby references

<input type="text" aria-labelledby="label-3 label-6" aria-describedby="desc-3 desc-6">

referenced labels and descriptions

Label 1

<span id="label-1">Label 1</span>

Description 1

<span id="desc-1">Description 1</span>

Label 2

<div id="label-2">Label 2</div>

Description 2

<div id="desc-2">Description 2</div>

<label id="label-3">Label 3</label>

<label id="desc-3">Description 3</label>

Label 4

<p id="label-4">Label 4</p>

Description 4

<p id="desc-4">Description 4</p>

<label id="label-5">Label 5</label>

<label id="desc-5">Description 5</label>

Label 6

<span id="label-6" tabindex=-1>Label 6</span>

Description 6

<span id="desc-6" tabindex=-1>Description 6</span>

Author: steve faulkner The Paciello Group
contact: sfaulkner@paciellogroup.com

Creative Commons License
This work is licenced under a Creative Commons Licence.

Updated: 02/08/2011