Go to overview: WAI-ARIA techniques with code examples

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

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

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

Win 10, Firefox 46, JAWS 17 Supported
  • When tabbing: "Storms hit east coast - link"
  • When arrowing: "Storms hit east coast - link"
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 Not supported
  • When tabbing: "Read more - link"
  • When arrowing: "Link - Read more"

Old 2012 tests - 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.5.8, VoiceOver supported Reads "link - Storms hit east coast" - i.e. the content referenced by aria-labelledby replaces the link text.