Go to overview: WAI-ARIA techniques with code examples

aria-labelledby for concatenating a label from file name and file type

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

Last update: 19 November 2012

Example


Download 2012 Sales Report: PDF | Word | Powerpoint


Explanation: the string "2012 Sales Report" is in a span element with id="report-title". The links concatenate the content of this span and their respective own link text, which is contained in spans carrying id="pdf", id="doc", and id="ppt" respectively.

Results of screen reader tests for aria-labelledby to concatenate a label from file name and file type

In the versions / combinations of browsers and screen readers tested, adding tabindex=-1" to the elements containing the label info does not make a difference. It also does not affect results whether span encloses a or vice versa.

Win 7, FF 15, JAWS 13 Partial support (buggy)
  • When tabbing: Reads content referenced by aria-labelledby twice: "2012 Sales Report - 2012 Sales Report- PDF - Link.".
  • Normal reading: Content of aria-labelledby ignored: Reads ">Link - PDF - vertical bar - Link - Word - Vertical bar - Link - Powerpoint"
Win 7, IE9, JAWS 13 not supported
  • When tabbing: Ignores aria-labelledby, reads "Link - PDF - vertical bar - Link - Word - vertical bar - link - Powerpoint"
  • Normal reading: Content of aria-labelledby ignored: Reads ">Link - PDF - vertical bar - Link - Word - Vertical bar - Link - Powerpoint"
Win 7, FF 13, NVDA 2012.2.1 not supported
  • Tabbing: Ignores aria-labelledby, reads ">PDF - Link - Word - Link - Powerpoint -link"
  • Normal reading: Content of aria-labelledby ignored: Reads ">Link -PDF - link - Word - Link - Powerpoint"
Win 7, IE9, NVDA 2012.2.1 not supported
  • When tabbing: Ignores aria-labelledby, reads "PDF - link - Word - link - Powerpoint - link"
  • Normal reading: Content of aria-labelledby ignored: Reads "link- PDF - link - Word - link - Powerpoint"
Win XP, IE8, NVDA 2011.3 not supported
  • When tabbing: Ignores aria-labelledby, reads "PDF - link - Word - link - Powerpoint - link"
  • Normal reading: Content of aria-labelledby ignored: Reads "link- PDF - bar - link - Word - bar - link - Powerpoint"
Win XP, FF 16.02, NVDA 2011.3 not supported
  • When tabbing: Ignores aria-labelledby, reads "PDF - link - Word - link - Powerpoint - link"
  • Normal reading: Content of aria-labelledby ignored: Reads "link- PDF - bar - link - Word - bar - link - Powerpoint"
Mac OS 10.5.8, VoiceOver ? *********Still to be checked.