Go to overview: WAI-ARIA techniques with code examples

Using aria-labelledby for concatenated label text: Extend timeout example

Updated: 16 May 2017

Following on from ARIA9: Using aria-labelledby to concatenate a label from several text nodes, this is small example that shows how aria-labelledby can be used to concatenate several elements into one label, which should be rendered when the keyboard focus (or swipe focus on touch screens - e.g. with iOS rotor set to form controls) lands on the text input.

Support in JAWS 17 is solid across main browsers. Equally supported using NVDA with Firefox and Chrome. When using NVDA with IE, the default version drops 'minutes'. Putting tabindex="-1" on the span 'minutes' makes NVDA read it but it still omits the value of the textfield (20) in the sequential reading. While "Extend timeout to - minutes - Eingabefeld - 20 markiert" is not ideal, it probably can be understood.

iOS /Safari/Voiceover does not read 'minutes' in all variants.

An earlier version from 9 May 2017 had duplicate IDs (from copying across code) which caused wrong results. The example has now been updated to make IDs unique and include correct screen reader output results.

Original example

(Adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe in 2008)

minutes

Screenreader output

Same example with tabindex=-1 on "Minutes" (attempt to tackle an IE bug)

minutes

Screenreader output

Same example with label elements around both components drawn in by aria-labelledby

Screenreader output

Same example with a role tooltip on span Minutes

This is not recommended practice - just an attempt to trick IE into accepting the third element, Minutes, as part if the concatenated label.

minutes

Screenreader output