last updated 10/06/14
aria-labelledby and aria-describedby with single or multiple id references.aria-labelledby and aria-describedby with single or multiple id references.aria-labelledby or aria-describedby with single or multiple id references unless the referenced element is what Microsft classes as an accessible element. IE non accessible elements can be made into accessible elements by the addition of tabindex="-1" as documented or via the addition of an ARIA role (when appropriate).| Test | Expected | IE 11 | Firefox 29 | Chrome 35 |
|---|---|---|---|---|
| 1 | Name: text box | Name: none (x) | Name: text box | Name: text box |
| 2 | Name: text box | Name: none (x) | Name: text box | Name: text box |
| 3 |
|
Name: none (x) Description:none (X) |
|
|
| 4 |
|
Name: none (x) Description:none (X) |
|
|
| 5 |
|
Name: none (x) Description: none (X) |
|
|
| 6 | Name: text box Description: A text box for testing purposes. A second paragraph for testing purposes. |
Name: text box Description: none (X) |
Name: text box Description: A text box for testing purposes. A second paragraph for testing purposes. |
Name: none Description: A text box for testing purposes. A second paragraph for testing purposes. |
| 7 |
|
|
|
|
aria-labelledby and aria-describedby tests<p id="l1">text box</p>
<p id="l2">TEXT</p>
<p id="l3">box</p>
<p id="d1">A input type=text for testing purposes.</p>
<p id="d2">A second paragraph for testing purposes.</p>
<p id="l4" tabindex="-1">TEXT (-1)</p>
<p id="l5" tabindex="-1">box (-1)</p>
<p id="d3" tabindex="-1">A input type=text for testing purposes. (-1)</p>
<p id="d4" tabindex="-1">A second paragraph for testing purposes. (-1)</p>
aria-labelledby and aria-describedby attributes can include either single or multiple id references (space seperated). id values the text content of the element with the referenced id value becomes the content of the accessible name (aria-labelledby) or description (aria-describedby) property. id values the text content of the elements with the referenced id values becomes the content of the accessible name (aria-labelledby) or description (aria-describedby) property.tabindex=-1 set.input type="text" with aria-labelledby with single id referenceinput type="text" with aria-labelledby with multiple id referencesinput type="text" with aria-labelledby and aria-describedby with single id reference input type="text" with aria-labelledby with a single id reference and aria-describedby with multiple id referencesinput type="text" with aria-labelledby with multiple id references and aria-describedby with multiple id referencesinput type="text" with title="text box" and aria-describedby with multiple id referencesinput type="text" with aria-labelledby with multiple id references and aria-describedby with multiple id references. <p tabindex="-1"> elements.Author: steve faulkner The Paciello Group
contact: [email protected]
This work is licensed under a Creative Commons Attribution 4.0 International License.
text box
TEXT
box
TEXT (-1)
box (-1)
A text box for testing purposes.
A second paragraph for testing purposes.
A text box for testing purposes (-1).
A second paragraph for testing purposes (-1).