Go to overview: WAI-ARIA techniques with code examples

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: 6 June 2016

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...

2016 re-test: aria-labelledby for link purpose: Results for screen reader tests

In the UA/AT combinations tested in 2016 The addition of tabindex="-1" does improve the NVDA screen reader output in IE 11. Compare worse results for IE 11/ NVDA in variant without tabindex on element referenced by aria-labelledby.

Win 10, Firefox 46, JAWS 17 Supported
  • When tabbing: "Storms hit east coast - link"
  • When arrowing: "Link - Storms hit east coast"
Win 10, Firefox 46, NVDA 2016.1 Supported
  • When tabbing: "Storms hit east coast - link"
  • When arrowing: "Link - Storms hit east coast"
Win 10, IE 11 , JAWS 17 Partial support
  • When tabbing: "Storms hit east coast - link"
  • When arrowing: "Link - Read more - dot - dot - dot"
Win 10, IE 11, NVDA 2016.1 Supported
  • When tabbing: "Storms hit east coast - link"
  • When arrowing: "Link - Storms hit east coast"

Old 2012 testing: 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.