Go to overview: WAI-ARIA techniques with code examples

Use of aria-describedby to add description to a text input field (plus tabindex=-1 on element referenced)

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

Last update: 19 November 2012

This is a variant of an example that uses the aria-describedby attribute on an input element to reference the descriptive paragraph ("Please provide...") qualifying the input needed. The only difference is that tabindex="-1" has been added to the descriptive paragraph. (Return to example without tabindex).

First example

Other content

Please provide both first name and surname here.

aria-describedby to add description to a text input field

Win 7, FF 15, JAWS 13 Partial support (buggy)
  • When tabbing: Reads content referenced by aria-describedby twice: "Your name - colon - edit - Please provide both first name and surname here. - Please provide both first name and surname here.".
  • Normal reading: Content of aria-describedby ignored: Reads "Your name - colon - other content" etc.
Win 7, IE9, JAWS 13 supported
  • When tabbing: Reads "Your name - edit - Please provide both first name and surname here."
  • Normal reading: Content of aria-describedby ignored: Reads "Your name - other content" etc.
Win 7, FF 13, NVDA 2012.2.1 supported
  • When tabbing: Reads "Your name - edit with auto-complete - Please provide both first name and surname here."
  • Normal reading: Ignores aria-describedby: ""Your name - edit with auto-complete - other content" etc.
Win 7, IE9, NVDA 2012.2.1 supported
  • When tabbing: Reads "Your name - edit - Please provide both first name and surname here."
  • Normal reading: Ignores aria-describedby: "Your name - edit - Other content" etc.
Win XP, FF 15, NVDA 2011.13 supported
  • When tabbing: Reads "Your name - colon - edit - Please provide both first name and surname here."
  • Normal reading: Ignores aria-describedby, reads "Your name - colon - edit - other content" etc.
Win XP, IE8, NVDA 2011.13 supported
  • When tabbing: "Your name - colon - edit - Please provide both first name and surname here."
  • Normal reading: Ignores aria-describedby, reads "Your name - colon - edit - other content" etc.
Win XP, IE8, SaToGo supported
  • When tabbing: Reads "Your name - editable text, blank - Please provide both first name and surname here."
  • Normal reading: Ignores aria-describedby, reads "Your name - editable text - other content" etc.
Win XP, IE7, JAWS 8 not supported

In both tabbing and normal reading: Ignores aria-describedby, reads: "your name - colon - edit ".
Win XP, FF 3.5.9, JAWS 8 not supported

In both tabbing and normal reading: Ignores aria-describedby, reads: "your name - colon - edit ".
Win XP, IE7, NVDA 11 supported

Tabbbing through: Supports aria-describedby, reads: "your name - edit - Please provide both first name and surname here.".
Win XP, FF 3.5.9, NVDA 11 supported

Tabbing through: Supports aria-describedby, reads: "your name - edit - Please provide both first name and surname here.".
Mac OS 10.5.8, VoiceOver ? *********Still to be checked.
Android 4.2, Firefox 18, TalkBack (German version) Not supported
  • Ignores aria-describedby Reads "Beschriftung Your Name - Eintrag Your Name".