tested 07/03/11

alertdialog and aria-labelledby tests

The following tests were developed to test the results published in the blog post: It's Spelled aria-labelledby.

Result summary

IE and Firefox calculate the accessible name for an element with a role of alertDialog differently.
If the element does not have a correctly associated accessible name
- IE uses the text of the element with role=alertdialog
- Firefox does not assign an accessible name
If the alertDialog role is on an element that has a tabindex set, Firefox and IE both provide the accessible name from the text content of the element referenced in the aria-labelledby attribute.
If the alertDialog or dialog roles are on an element that does not have a tabindex set Firefox and IE provides the accessible name from the text content of the element referenced in the aria-labelledby attribute.
incorrect spelling: aria-labeledby is not supported by IE.

Note: I consider IE's behaviour to be less correct than the Firefox behaviour

Results using Internet Explorer 9 and Firefox 3.6:
test case	accessible name in IE	accessible name in Firefox
no labelledby	element text content "this is dialog text."	none
correctly spelled labelledby	referenced element text content "correctly labelled"	referenced element text content "correctly labelled"
incorrectly spelled labeledby	element text content	none
correctly spelled labelledby with tabindex set	referenced element text content	referenced element text content
incorrectly spelled labelledby with tabindex set	element text content	none

Note: IE 8 and IE 9 platform previews have limited support for aria-labelledby and no support for aria-describedby. It still works with JAWS 11+ as freedom scientific hacked the attribute support for IE.IE 9 has improved support for aria-labelledby and aria-describedby, the improved support is not documented or tested here.

the tests

no labelledby

no labelledby code

<DIV role="alertdialog"> this is dialog text. </DIV>

correctly spelled labelledby

correctly spelled labelledby code

<DIV role="alertdialog" aria-labelledby="pooter"> this is dialog text. </DIV>

incorrectly spelled labeledby

incorrectly spelled labeledby code

<DIV role="alertdialog" aria-labeledby="pooter"> this is dialog text. </DIV>

correctly spelled labelledby with tabindex set

correctly spelled labelledby with tabindex set code

<DIV role="alertdialog" aria-labelledby="pooter" tabindex="0"> this is dialog text. </DIV>

incorrectly spelled labeledby with tabindex set

incorrectly spelled labeledby with tabindex set code

<DIV role="alertdialog" aria-labeledby="pooter" tabindex="0"> this is dialog text. </DIV>

Referenced text

correctly labelled