Go to overview: WAI-ARIA techniques with code examples

Using aria-describedby to add a description to a text input field

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

Last update: 25 April 2014

The follwing example uses the aria-describedby attribute on an input element to reference the descriptive paragraph ("Please provide...") qualifying the input needed. It also uses the label element to provide a visible label (example adapted from Steve Faulkner's HTML5 Accessibility Chops: form control labeling).

In all the tests documented here, there was no difference in output when the descriptive paragraph referenced by aria-describedby was given a tabindex attribute (tabindex="-1") (see variant of this page with tabindex=-1 on the element referenced). However, according to Steve Faulkner, tabindex="-1" should be provided on non-interactive elements referenced, to ensure support for some browser / screen reader combinations such as IE9 and JAWS 11 (not tested here).

First example

Other content

Please provide both first name and surname here.

Results of screen reader tests for aria-describedby to add a description to a text input field

iOS 7.1 (on iPhone 5c), VoiceOver not supported
  • Swiping: Reads first the content of aria-label then element type "Your name - text field. Does not read element referenced by aria-describedby
  • Touch-explore: Same behaviour as with swiping
Android 4.4.2 (on Nexus 4), Firefox 28.0.1, TalkBack supported
  • Swiping: Reads first the content of aria-label then the sentence referenced by aria-describedby: "Your name - Please provide both first name and surname here". No output of element type (text field).
  • Touch-explore: Same behaviour as with swiping
Android 4.2, Firefox 18, TalkBack (German version) Not supported
  • Ignores aria-describedby Reads "Beschriftung Your Name - Eintrag Your Name".
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.