Testing aria-labelledby and aria-describedby support in popular browsers on Windows.

Results

Notes:

Expected values are derived from the WAI-ARIA specification:
- aria-labelledby
- aria-describedby
Actual values are derived from the output from the inspect32 tool, which is used to show the values of the MSAA Name and Description properties for each test image/input.

screenshot of the inspect32 application displaying example values of the name role and description properties for test 8

Summary

Firefox 6 supports aria-labelledby and aria-describedby with single or multiple id references.
Chrome 4.1 supports aria-labelledby and aria-describedby with single or multiple id references.
IE 8 and IE platform preview supports aria-labelledby with a single id reference only (MSAA).
IE 8 and IE platform preview does not support aria-describedby (MSAA).
The presence or absence of an empty alt attribute has no effect.
When an input type="image" has no aria-labelledby and no alt attribute Firefox reports the src attribute value as the accessble name (see test 6).
The presence of a non empty alt or title attribute overrides aria-labelledby in IE8.
Chrome 4.1 incorrectly reports alt attribute content as the accessible description (MSAA).
The Opera and Safari browsers on Windows do not have any support for aria-labelledby or aria-describedby.

Expected and actual output for single and multiple values in aria-labelledby and aria-describedby
Test	Expected	IE 8	IE 9 platform preview	Firefox 3.6	Opera 10.51	Safari 4.0	Chrome 4.1.249.1036
1	Name: RGB button	Name: RGB button	Name: RGB button	Name: RGB button	X	X	Name: RGB button
2	Name: RGB button	Name: RGB (X)	Name: RGB (X)	Name: RGB button	X	X	Name: RGB button
3	Name: RGB button Description: An image button for testing purposes.	Name: RGB button Description:none (X)	Name: RGB button Description:none (X)	Name: RGB button Description: An image button for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes.
4	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: RGB button Description:none (X)	Name: RGB button Description:none (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.
5	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: RGB (X) Description: none (X)	Name: RGB (X) Description: none (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.
6	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: none (X) Description: none (X)	Name: none (X) Description: none (X)	Name: "images/rgbbutton.gif" (x) Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: none Description: An image button for testing purposes. A second paragraph for testing purposes.
7	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name:test title (X) Description: none (X)	Name:test title (X) Description: none (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.
8	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: test alt (X) Description: none (X)	Name: test alt (X) Description: none (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.
9	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: none (X) Description: test alt (X)	Name: none (X) Description: test alt (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.
10	Name: test title Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: test title Description: none (X)	Name: test title Description: none (X)	Name: test title Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: test title Description: An image button for testing purposes. A second paragraph for testing purposes.
11	Name: test alt Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: test alt Description: none (X)	Name: test alt Description: none (X)	Name: test alt Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name:none (x) Description: An image button for testing purposes. A second paragraph for testing purposes.
12	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	Name: test alt (X) Description: none (X)	Name: test alt (X) Description: none (X)	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.	X	X	Name: RGB button Description: An image button for testing purposes. A second paragraph for testing purposes.

`aria-labelledby` and `aria-describedby` tests

labels and descriptions

single id label

RGB button

multiple id label

RGB

button

single id description

An image button for testing purposes.

+ multiple id description

A second paragraph for testing purposes.

Tests 1-6

notes:

Tests 1-6 test whether the correct values are assigned to the correct properties by the browser in the MSAA accessibility API. The aria-labelledby and aria-describedby attributes can include either single or multiple id references (space seperated).
For single id values the text content of the element with the referenced id value becomes the content of the name (aria-labelledby) or description (aria-describedby) property.
For multiple id values the text content of the elements with the referenced id values becomes the content of the name (aria-labelledby) or description (aria-describedby) property.

test 1. input type="image" with no `alt=""` and `aria-labelledby` with single `id` reference

test 2. input type="image" with no `alt=""` and `aria-labelledby` with multiple `id` references

test 3. input type="image" with no `alt=""`, `aria-labelledby` and `aria-describedby` with single `id` reference

test 4. input type="image" with no `alt=""`, `aria-labelledby` with a single `id` reference and `aria-describedby` with multipe `id` references

test 5. input type="image" with no `alt=""`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 6. input type="image" with no `alt=""`, and `aria-describedby` with multipe `id` references

Tests 7- 12

notes:

Tests 7 - 11 test whether the inclusion of a title or alt attribute with/without content affects the value that is found in the MSAA name and description properties. It is expected as per the WAI-ARIA specification that the ARIA attributes should overide any native attributes.

test 7. input type="image" with an empty `alt=""`, `title="test title"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 8. input type="image" with an `alt="test alt"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 9. input type="image" with an `alt="test alt"`, `title=""`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 10. input type="image" with a `title="test title"`,and `aria-describedby` with multipe `id` references

test 11. input type="image" with an `alt="test alt"`,and `aria-describedby` with multipe `id` references

test 12. `input type="image"` with an `alt="test alt"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

References

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

This work is licenced under a Creative Commons Licence.

RGB button

RGB

button

An image button for testing purposes.

A second paragraph for testing purposes.

Testing aria-labelledby and aria-describedby support in popular browsers on Windows.

Results

Notes:

Summary

aria-labelledby and aria-describedby tests

labels and descriptions

single id label

multiple id label

single id description

+ multiple id description

Tests 1-6

notes:

test 1. input type="image" with no alt="" and aria-labelledby with single id reference

test 2. input type="image" with no alt="" and aria-labelledby with multiple id references

test 3. input type="image" with no alt="", aria-labelledby and aria-describedby with single id reference

test 4. input type="image" with no alt="", aria-labelledby with a single id reference and aria-describedby with multipe id references

test 5. input type="image" with no alt="", aria-labelledby with mutliple id references and aria-describedby with multipe id references

test 6. input type="image" with no alt="", and aria-describedby with multipe id references

Tests 7- 12

notes:

test 7. input type="image" with an empty alt="", title="test title", aria-labelledby with mutliple id references and aria-describedby with multipe id references

test 8. input type="image" with an alt="test alt", aria-labelledby with mutliple id references and aria-describedby with multipe id references

test 9. input type="image" with an alt="test alt", title="", aria-labelledby with mutliple id references and aria-describedby with multipe id references

test 10. input type="image" with a title="test title",and aria-describedby with multipe id references

test 11. input type="image" with an alt="test alt",and aria-describedby with multipe id references

test 12. input type="image" with an alt="test alt", aria-labelledby with mutliple id references and aria-describedby with multipe id references

References

`aria-labelledby` and `aria-describedby` tests

test 1. input type="image" with no `alt=""` and `aria-labelledby` with single `id` reference

test 2. input type="image" with no `alt=""` and `aria-labelledby` with multiple `id` references

test 3. input type="image" with no `alt=""`, `aria-labelledby` and `aria-describedby` with single `id` reference

test 4. input type="image" with no `alt=""`, `aria-labelledby` with a single `id` reference and `aria-describedby` with multipe `id` references

test 5. input type="image" with no `alt=""`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 6. input type="image" with no `alt=""`, and `aria-describedby` with multipe `id` references

test 7. input type="image" with an empty `alt=""`, `title="test title"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 8. input type="image" with an `alt="test alt"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 9. input type="image" with an `alt="test alt"`, `title=""`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references

test 10. input type="image" with a `title="test title"`,and `aria-describedby` with multipe `id` references

test 11. input type="image" with an `alt="test alt"`,and `aria-describedby` with multipe `id` references

test 12. `input type="image"` with an `alt="test alt"`, `aria-labelledby` with mutliple `id` references and `aria-describedby` with multipe `id` references