Go to overview: WAI-ARIA techniques with code examples

Using aria-label to provide a label to div with contenteditable=true

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

Last update: 12 February 2013

This example shows how aria-label may be used on custom input elements - here, a few divs used for text input and made editable with contenteditable=true. Support is nnot great yet, but has improved since my last test in Oct 2012. No support yet on iOS 6.1 / Safari / VO and Jelly Bean 4.2 / Firefox / TalkBack.

Example

The spelling quiz

Correct the spelling of the four words below. When you are done, press submit!

ancilary
parsemonious
serendipidous
voiciferous

Results

aria-label to provide label to custom input div with contenteditable=true

Notation: Tabbing action is included as ||.

Win 7, IE 9, JAWS 14 supported
  • When tabbing: JAWS speaks aria-label, and the content of div boxes: "Correct first word - edit - ancillary - type in text || Correct second word - edit - parsemonious - type in text"etc. Support has improved since FF 13 + Jaws 13 when only aria-label was announced, not the content of the div boxes.
  • In Virtual PC cursor mode: JAWS speaks aria-label "Correct first word - ancilary - edit - Correct second word - parsemonious - edit" etc..
Win 7, FF 18, JAWS 14 partial support
  • When tabbing: Inconsistent behaviour. JAWS speaks aria-label but only somethimes the content of the divs (the words to be corrected): "Correct first word - edit - type in text" || Correct second word - edit - parsemonious || Correct third word - edit - type in text || Correct fourth and last word - edit - voiciferous "
  • Seems buggy. Vitual PC cursor mode: reads "Correct first word || edit - Correct first word - edit - ancilary". Reads "Correct first word" twice (same with "Correct second word" etc.) Also, reads "edit" twice. In some cases, Jaws announces graphics with numbers - there are no graphics on this page.
Win 7, IE9, NVDA 2012.2.1 not supported
  • When tabbing: NVDA ignores aria-label on div with contenteditable=true
  • Normal reading: Ignores aria-label, does not announce div with contenteditable=true as edit, just reads "ancilary || parsemonious || serendipidous || voiciferous"
Win 7, FF 18, NVDA 2012.2.1 supported
  • When tabbing: "Correct first word - section editable - spelling error - ancilary" || Correct second word - section editable - - spelling error - parsemonious" etc. - also announces spelling error based on checking the default text
  • Normal reading: Ignores aria-label, does not announce div with contenteditable=true as edit, just reads "ancilary || parsemonious || serendipidous || voiciferous"
Mac OS 10.6.8, VoiceOver supported
  • Tabbing: Reads aria-label but not the content of the div "Correct first word - group || Correct second word - group ". Contents of div can then be read using, for example, VO + P
  • Sequential reading (VO + A): Reads both aria-label and div content "Correct first word - group - ancilary || Correct second word - group - serendipidous" etc.
iOS 6.1, Safari, VoiceOver (iPad mini) not supported Ignores aria-label, just reads "ancilary || parsemonious || serendipidous || voiciferous" (Note: editing content of div with contenteditable=true seems tricky, VO often announces the next word, 'parsemonious' when editing 'ancilary')
Android Jelly Bean 4.2, Firefox, Talkback (Nexus 7) not supported Ignores aria-label, just reads "ancilary || parsemonious || serendipidous || voiciferous" (Note: editing content of div with contenteditable=true seems very tricky, TB seems to place text cursor randomly in word and makes it hard to move it for deleting / typing (OK, I'm a TalkBack Novice).
Win XP, IE 8, SaToGo not supported System Access SaToGo ignores aria-label (result from Oct 2012 - may need to be re-tested).