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

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

2016 Results

Note: Arrowing does not render the element referenced via aria-labelledby in IE 11 / JAWS while tabbing does. This can be considered expected behaviour and is therefore listed as "supported"

Win 10, Firefox 46, JAWS 17 Supported
  • When tabbing: "2012 Sales Report - PDF - Link" TAB "2012 Sales Report - Word - Link" TAB "2012 Sales Report - Powerpoint - Link"
  • When arrowing: "Link - 2012 Sales Report - PDF" DOWN ARROW "vertical bar" DOWN ARROW "Link - 2012 Sales Report - Word" DOWN ARROW "vertical bar" DOWN ARROW "Link - 2012 Sales Report - Powerpoint"
Win 10, Firefox 46, NVDA 2016.1 Supported
  • When tabbing: "2012 Sales Report - PDF - Link" TAB "2012 Sales Report - Word - Link" (TAB "2012 Sales Report - Powerpoint - Link"
  • When arrowing: "Link - 2012 Sales Report - PDF" DOWN ARROW "Link - 2012 Sales Report - Word" DOWN ARROW "Link - 2012 Sales Report - Powerpoint"
Win 10, IE 11, JAWS 17 Supported
  • When tabbing: "2012 Sales Report - PDF - Link" TAB "2012 Sales Report - Word - Link" TAB "2012 Sales Report - Powerpoint - Link"
  • When arrowing: "Link - PDF" DOWN ARROW "vertical bar" DOWN ARROW "Link - Word" DOWN ARROW "vertical bar" DOWN ARROW "Link - Powerpoint"
Win 10, IE 11, NVDA 2016.1 Supported
  • When tabbing: "2012 Sales Report - PDF - Link" TAB "2012 Sales Report - Word - Link" TAB "2012 Sales Report - Powerpoint - Link"
  • When arrowing: "Link - 2012 Sales Report - PDF" DOWN ARROW "Link - 2012 Sales Report - Word" DOWN ARROW "Link - 2012 Sales Report - Powerpoint"

2012 Results (dated)

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.