This is just a quick note on spelling. The specification for aria-labelledby identifies the attribute's correct spelling as "aria-labelledby", as opposed to what might be its expected U.S. English spelling, "aria-labeledby". Apparently, the approved spelling was selected to minimize the difficulty for developers
. However, seeing as how easy it is to find examples in the wild where the attribute is spelled "aria-labeledby" suggests that perhaps some difficulty for developers remains.
Browser and Accessiblity API Support
Internet Explorer 8 supports both spellings, i.e., "aria-labelledby" and "aria-labeledby". No matter the attribute's spelling, IE8 passes the attribute value to the MSAA accessibility API, which allows supporting assistive technologies, such as screen readers, to construct the relevant component's accessible name using that value.
Update (March 7, 2011): Thanks to Steve Faulkner for setting things straight (see Steve's comment below). Turns out, in fact, that IE does not support the incorrect spelling "aria-labeledby", but instead, in the absence of a proper label, builds the component's accessible name using whatever text exists within the component. You can read my reply to Steve which explains how I ended up coming to this false conclusion about IE. This is good news, in the end.
Firefox 3.6, on the other hand, only supports the attribute when it is spelled correctly as per the specification. The attribute's value is passed along to both the MSAA and IA2 accessibility APIs that Firefox supports only when the attribute is spelled "aria-labelledby". Otherwise, if the attribute is spelled "aria-labeledby", assistive technologies running on top of Firefox are not able to construct an accessible name for the associated component.
It's in the Spelling
If you need an additional reason to spell the attribute according to spec, let it be that that Firefox only supports it when it's spelled "aria-labelledby". If it's spelled "aria-labeledby", any accessibility benefits intended by using the attribute will be lost to those using Firefox, which is the preferred browser for many, especially those using the NVDA screen reader.
This difference in how the two browsers behave and the information they provide accessibility APIs also helps to explain the results from the two tests provided below.
Test #1: aria-labelledby spelled correctly
Below is an ARIA alertdialog whose label is referenced using aria-labelledby spelled according to the specification.
This alertdialog example requires that JavaScript be enabled.
Text for alertdialog #1
Test #1 Results
- In Firefox 3.6, both the NVDA 2011.1b2 and JAWS 12 screen readers announce the referenced label, "alertdialog #1 label," when reading the dialog.
- In IE8, JAWS 12 announces the referenced label when reading the dialog, but NVDA 2011.1b2 announces neither the dialog's label nor its text content.
Test #2: aria-labeledby spelled incorrectly
An alertdialog whose label is referenced using aria-labeledby spelled incorrectly, according to the specification.
This alertdialog example requires that JavaScript be enabled.
Text for alertdialog #2
Test #2 Results
- In Firefox 3.6, NVDA 2011.1b2 and JAWS 12 do not announce the referenced label, "alertdialog #2 label," when reading the dialog.
In IE8, JAWS 12 announces the referenced label, "alertdialog #2 label," whileNVDA 2011.1b2 announces neither the dialog's label nor its text content. Update (March 7, 2011): It's now clear, based on tests by Steve Faulkner, that JAWS in IE reads the label text only as part of the larger sequence of all the text contained in the dialog, and is not announcing it as an explicit label, per se.
Spell it as Specified
Despite the fact that, in some instances, aria-labelledby is supported when it's spelled "aria-labeledby", it is probably best just to play it safe and spell it "aria-labelledby" as defined by the specification. You'll not only be following the standard, but, and more importantly, users of Firefox with assistive technologies that support ARIA will benefit. Update (March 7, 2011): While contrary to my initial conclusion, IE does not support the "aria-labeledby" spelling. Apparently, however, a development version of Google Chrome supports both spellings. I've not looked at this, but Chrome's accessibility support is still very much in development at this stage.
aria-labelledby