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

Using aria-labelledby for link purpose

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

Last update: 20 April 2013

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

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

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: JAWS 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: 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.6.8, VoiceOver partial support Reads "read more - Storms hit east coast" - i.e. the content referenced by aria-labelledby does not replace the link text but is added to the link text.
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.