Monthly Archives: June 2012

Use of aria-describedby with form elements that have descriptor text

If form fields have formatting help or descriptor information for the input, such as “Passwords must be 8 characters long”, one cannot assume that screen readers are reading that input by default.

<label for="choosePassword">Choose Password:</label>
<input id="choosePassword">
<span class="help">Passwords must be 8 characters long</span>

When users tab through the form, and focus to this field is reached, assistive technology such will say “tab Choose Password colon edit” (JAWS, in this case, with verbosity settings set to advanced). This user is completely missing out on needed information to fill out the form field.

For a screen reader to read the help text, one can address this gap in one of two ways. One way is to incorporate the extra text as part of the label:

<label for="choosePassword">
    Choose Password:
    <span class="help">Passwords must be 8 characters long</span>
</label>
<input id="choosePassword">

For some web designers this is perfectly fine. They will nest the descriptor text within the label, and leave it there, or perhaps use CSS to position that element elsewhere. Screen readers will read the descriptor text just as it normally would read the label.

The second way is to use the aria-describedby attribute:

<label for="choosePassword">Choose Password:</label>
<input id="choosePassword" aria-describedby="choosePasswordHelp">
<span class="help" id="choosePasswordHelp">Passwords must be 8 characters long</span>

The aria-describedby attribute value should match the id of the descriptor text. JAWS will read the above as “tab Choose Password colon edit Passwords must be 8 characters long”.

Using aria-describedby much less intrusive on your HTML than nesting potentially long descriptor text into the label, as it’s merely the introduction of an attribute on existing markup. The downside is that not all assistive technologies necessarily support aria attributes. In this case, the JAWS screen reader and VoiceOver do support aria-describedby, and that’s enough for me to adopt aria-describedby as part of my regular practice. (NVDA does not support it as of this writing according to my tests, and I don’t know about Window-Eyes and other technologies.).

Even more uses

aria-describedby need not be limited to one value, but instead it allows a space-delimited set of values (like the class attribute). This can come in handy in the instance that there are errors related to a field in question.

<p id="error_choosePassword" class="error">Error: Please enter a valid password.</p>
...
<label for="choosePassword">Choose Password:</label>
<input id="choosePassword" aria-describedby="error_choosePassword choosePasswordHelp">
<span class="help" id="choosePasswordHelp">Passwords must be 8 characters long</span>

Now when focus is put on the text field, JAWS will say “tab Choose Password colon edit Error colon Please enter a valid password. Passwords must be 8 characters long”.