Last August I wrote a piece about using CSS to overcome a common problem for screen reader users with web forms – where help text associated with a field isn’t announced by screen readers when in Forms Mode. The CSS solution was convoluted and flaky in IE6. Fortunately there’s a better way: use aria-describedby.
The problem
In a nutshell, all the information about a form field the user needs isn’t always put in the field’s label when it’s coded. Often you’ll have a paragpraph of text explaining why a field needs to be completed – or the type of information you should put in it, and the label itself is more succinct. Sighted users can associate the descriptive text with the field, but screen reader users my not even have the text read out to them.
Why? Because in Forms Mode, screen readers such as JAWS only announce form elements such as <fieldset>, <legend>, <label> and <input>. They’ll get the label, but they won’t necessarily get the context of it or fully understand what they’re being asked to complete. (Ever seen a form with a huge paragraph explaining the terms and conditions before submitting, followed by a checkbox with a label that just says ‘I have read and agree to the terms and conditions’? That’s the kind of thing I mean!)
The CSS solution
Basically the CSS solution I wrote about involved putting all your field’s associated help text inside the corresponding label, wrapped in a <span> which could then be styled. The text would be announced by screen readers because it forms part of the label, and you could visually separate the help text from the rest of the label using CSS.
Not only was this convoluted (involving reams of extra CSS commands and a bit more markup), it was also flaky on older browsers, particularly IE6, and limited your form layout choices (which you’d never sell to a web designer…). Isn’t there an easier way? There certainly is. In the comments on my post, Jared Smith wrote this:
A simple aria-describedby that points to the longer paragraph does the same thing without resorting to CSS and structural workarounds.Jared W Smith
A bit deflating to read after several hours of CSS chicanery, but absolutely right. Using the ARIA attribute is a quick way of associating a field with any text not in it’s label, with only a small amount of extra markup.
Using aria-describedby
Using the same example I used in my first post, here’s how to use the aria-describedby attribute to associate the help text with the field. Here’s how the form looks to the sighted user. The help text is in a regular HTML <p> paragraph below the password field and label:
And here’s the markup. Essentially it works by binding the field with an element (or multiple elements) on the page with specific IDs. Even if that element is not a recognised form element, a screen reader will announce the contents as long as the aria-describedby attribute points to it. The NVDA screen reader even reads out the contents of this description automatically after it’s announced the name & type of control, assuming that it’s providing extra information of benefit to screen reader users.
<form name="signUp">
<fieldset>
<legend>Sign up now!</legend>
<label for="username">Choose a username</label>
<input type="text" id="username" />
<label for="password">Choose a password.</label>
<input type="password" id="password" aria-describedby="passwordDescriber" />
<p id="passwordDescriber">Your password needs to be at least 8 characters long, including at least one number or special character.</p>
<label for="email">Email address</label>
<input type="text" id="email" />
<label for="confirmEmail">Confirm email address</label>
<input type="text" id="confirmEmail" />
</fieldset>
<input id="submit" type="image" alt="Sign up for updates" value="Sign up" src="submitButton.gif"/>
</form>
Another clear advantage of using aria-describedby is that once you’ve got your binding between the field and the element(s) providing the description, you can put the element (i.e. the <p id=”passwordDescriber”>) anywhere in your markup, in the same way as you can with field labels.
Screen reader & browser suport
Both JAWS and Window-Eyes support aria-describedby (along with other WAI-ARIA attributes), and the free screen reader NVDA will find the element and read the contents automatically after reading the control name and type. IE lags behind Firefox and Opera in terms of WAI-ARIA support – there’s no support in IE6 or 7, bu there is in version 8 and 9 should have it too. WebKit (behind the Safari browser) also supports ARIA.
The important thing to remember is that there is no detrimental effect of using ARIA attributes in your HTML now. When viewed in IE6 or 7 for example it won’t work, but neither will it break anything.
So go ahead and use it now. I think it’s one of the most awesome HTML atributes ever. But then I’m sad like that.
Written by: Andy Bryant
Published on: 24 Aug 2010
Tags: Accessibility, ARIA, assistive technology, eadn, screen readers, web forms
According to http://www.w3.org/TR/WCAG20-TECHS/aria.html#ARIA1, IE 8 doesn’t support aria-describedby. (It does support some ARIA, but not all.) I haven’t tested this myself — just going off this page. Still, I think this is a good technique to use in many cases.
Thanks for this article, it’s very clear.
I looked into aria-describedby after listening to a seminar by Derek Featherstone called “In Top Form: designing and building accessible forms”. http://bit.ly/huuxUg
He mentions Aria but doesn’t go into details. I recommend this seminar, I learnt a lot even though I thought I had more Accessibility knowledge thatn the average front-end person.
It’s great that you use Aria but it wasn’t silly at all to use text within the label in the first place, precisely because of the poor support of Aria at the moment. We should use Aria but still think about the users who don’t have access to such extra info or don’t know about it. It’s like with CSS3 and HTML5: progressive enhancement is The Way
There is this great survey done on screen reader users by WebAIM: http://webaim.org/projects/screenreadersurvey2/#landmarks
You’ll see that 42% of these users don’t even know about Aria, and 5% have browsers that don’t support it at all.
Now I’m going to look into aria-labeledby because I still don’t know how to use that one…
Thanks for your post – I’ve also started using this recently – it’s a great solution to the common problem of how to mark up contextual help in web forms.
I also like the ARIA validation attributes for IE7+ form styling – in this case it’s great to be able to use accessible markup as a means to several ends.
@FlowerMountain – tried to view the Derek Featherston piece but it’s password protected
. I have heard him speak before though, and he’s very knowledgeable.