See also variant of example without tabindex on element referenced by aria-labelledby

Using aria-labelledby for link purpose (with tabindex="-1" set for referenced element)

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Last update: 22 October 2012

This is a code variant of the WAI-ARIA technique example showing the use of aria-labelledby for link purpose in the W3C wiki was proposed by Léonie Watson and is reproduced here only to extend screen reader testing (and thereby, inform the user agent notes on the wiki page).

The example is simple: On the "read more" link at the end of the text below, the aria-labelledby attribute points to the id of the h2 heading "Storms hit east coast".

In this variant, the h2 referenced by aria-labelledby is given a tabindex attribute with the value -1, which is meant to ensure that IE will see the element in the accessibility tree.

Storms hit east coast

Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns. Read more...

aria-labelledby for link purpose: Results for screen reader tests

In the UA/AT combinations tested, The addition of tabindex="-1" does not change the screen reader output anywhere. So results are exactly the same as in variant without tabindex on element referenced by aria-labelledby.

Win 7, IE 9, JAWS 13 not supported JAWS ignores aria-labelledby in both normal reading of page and tabbing - just reads "link - Read more - dot - dot - dot" (normal reading) and "Read more - dot - dot - dot - link" when tabbing..
Win 7, FF 13, JAWS 13 supported
  • When tabbing: JAWs reads reads "Storms hit East coast - link", i.e., it replaces the link text with the content of the element referenced by aria-labelledby
  • Normal reading: Ignores aria-labelledby - just reads "link - read more - dot - dot - dot".
Win 7, IE9, NVDA 2012.2.1 partial support
  • When tabbing: NVDA reads "Read more - Storms hit East cost - link" i.e., the content referenced by aria-labelledby does not replace, but is added to the link text
  • Normal reading: aria-labelledby is ignored: "link - read more"
Win 7, FF 13, NVDA 2012.2.1 not supported Ignores aria-labelledby in both normal reading of page and tabbing. Reading mode: "link - read more", when tabbing: "read more - link"
Win XP, FF 15.0, NVDA 2011.3 not supported aria-labelledby is ignored: NVDA just reads "link - read more - dot - dot -dot" in normal reading, and "read more - dot - dot - dot - link" when tabbing.
Win XP, IE 8, NVDA 2011.3 partial support
  • When tabbing: NVDA reads "Read more - dot - dot -dot - Storms hit east coast - link", i.e., the content referenced by aria-labelledby does not replace, but is added to the link text
  • Normal reading: NVDA reads "link - Read more - dot - dot -dot".
Win XP, IE 8, SaToGo not supported SaToGo ignores aria-labelledby completely.
Mac OS 10.5.8, VoiceOver supported Reads "link - Storms hit east coast" - i.e. the content referenced by aria-labelledby replaces the link text.