Go to overview: WAI-ARIA techniques with code examples

Using aria-describedby to reference a parent list item to provide link context

This is a test based on example 6 in a draft ARIA technique developed by Jon Gunderson: Using aria-describedby for link purpose

, but modified after a correction by @jnurthen: The element referenced is no longer the parent li element but a span.

Note: The test result shows not so much a problem with aria-describedby in itself, more with the way it is implemented in the example. A revised example will be tested shortly.

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

Twitter: @wcagtest

Last update: 25 April 2014

Example

Results: Using aria-describedby to reference a parent list item to provide link context

Tabbing / swiping action is indicated with ||.

iOS 7.1 (on iPhone 5c), VoiceOver not supported
  • Swiping: Does not read the span referenced by aria-describedby: "HTML - link".
  • Touch-explore: Same behaviour as with swiping
Android 4.4.2 (on Nexus 4), Firefox 28.0.1, TalkBack supported
  • Swiping: Reads link text and then referenced element (span: "HTML - Annual report 2005-2006 - link - first item - list, three items
  • Touch-explore: Same behaviour as with swiping
Android 4.2, Firefox, Talkback (Nexus 7) not supported aria-describedby not supported: "list item one of tree - link - HTML - double-tab to activate".
Win 7, IE 9, JAWS 14 partial support - unusable
  • Tabbing: While aria-describedby is rendered, the output in this example using the parent list item as descriptor for links in the nested bullet points does not work at all - the outcome is unusable and repeats *all* nested links dog's breakfast (output from just the first link, (HTML)): "left parent - HTML - right parent - link - bullet - Annual report 2 zero zero 5 dash 2 zero zero 6 - bullet - left parent - HTML - right parent - bullet - left parent - PDF - right parent - bullet - left parent - RTF - right parent - bullet - Annual report 2 zero zero 5 - 2 zero zero 6 - bullet - HTML- bullet - PDF - bullet RTF"
  • Arrowing down (virtual cursor mode): aria-describedby not spoken.
Win 7, FF 18, JAWS 14 partial support - unusable
  • Tabbing: While aria-describedby is rendered, the output in this example using the parent list item as descriptor for links in the nested bullet points does not work, even though it is less repetitive than in IE - the outcome is unusable and repeats *all* nested links (output from just the first link, (HTML)): "left parent - HTML - right parent - link - bullet - Annual report 2 zero zero 5 dash 2 zero zero 6 - white bullet - left parent - HTML - right parent - white bullet - left parent - PDF - right parent - white bullet - left parent - RTF - right parent"
  • Arrowing down (virtual cursor mode): aria-describedby not spoken.
Win 7, IE9, NVDA 2012.2.1 supported - but confusing
  • Tabbing: The implementation in NVDA is cleaner but here also, all three links are repeated after the parent list item text "Annual Report 2005-2006" has been spoken, which clearly indicates that this use of aria-describedby is not well supported (output from all three links): "list - list - HTML - link - bullet - Annual report 2005 2006 bullet - HTML - bullet - PDF bullet - RTF || PDF - link - bullet - Annual report 2005 2006 - bullet - HTML - bullet - PDF bullet - RTF || RTF - link - bullet - Annual report 2005 2006 - bullet - HTML - bullet - PDF bullet - RTF"
  • Arrowing down (virtual cursor mode): aria-describedby not spoken.
Win 7, FF 18, NVDA 2012.2.1 supported - but confusing
  • Tabbing: As in IE the implementation in NVDA is cleaner as in JAWS but here also, all three links are repeated after the parent list item text "Annual Report 2005-2006" has been spoken, which clearly indicates that this use of aria-describedby is not well supported (output from all three links): "list with two items - list with three items - HTML - link - bullet - Annual report 2005 2006 - HTML - PDF - RTF || PDF - link - bullet - Annual report 2005 2006 - HTML - PDF - RTF || RTF - link - bullet - Annual report 2005 2006 - HTML - PDF - RTF"
  • Arrowing down (virtual cursor mode): aria-describedby not spoken.
Mac OS 10.6.8, Safari, VoiceOver Not supported VoiceOver on OSX Sfari does not announce list item referenced by aria-describedby, not when tabbing and not when arrowing: "link - HTML || link - PDF || link - RTF"
iOS 6.1,Safari, VoiceOver (iPad mini) supported - but confusing While aria-describedby after a longuish pause, all three links are repeated after the parent list item text "Annual Report 2005-2006" has been spoken, which clearly indicates that this use of aria-describedby is not well supported: "HTML - hyperlink - Annual report 2 zero zero 5 - 2 zero zero 6 - HTML - PDF - RTF"