In the last piece I did on accessible web forms, I mentioned that in Forms Mode the JAWS screen reader won’t announce any content in a form that isn’t marked up in a form HTML tag. 90% of the time you can make forms more accessible by using labels for each field, but sometimes you want to provide more information than can fit nicely into the label (e.g. some extra help text) without making a meal of the layout and styling. Here’s a way of styling content in an HTML label tag so it looks like it’s separate from the label, but will still get read out by screen readers.
The problem
A typical web form scenario – a form question has a label (‘Choose a password’), but you also want some extra information for the user to help them (i.e. hints about password length and strength, for security):
Most often you would see this kind of thing marked up using an HTML span or paragraph tag for the extra text, like so:
<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" />
<p>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>This is fine for sighted users but JAWS users in Forms Mode would hear the label asking them to choose a password, but none of the help text to go with it, since it’s in a <p> tag and not a recognised form element.
The solution
I’ve seen a couple of ways of dealing with this so it’s more accessible. Firstly, you can duplicate the help text so it’s in a <p> tag for sighted users and inside the label too, but hidden off-screen – so screen readers announce it. Secondly, you could use two labels matched to the same input, one to go alongside the input field and the second for the help text.
I’m not overkeen on either (duplicating the content adds unnecessary markup, and there’s limited support amongst screen readers for multiple labels), so I had a go at doing something myself using CSS.
I changed the markup so that each label input pair were in ordered lists (perfectly valid and has the added advantage that screen reader users will hear the number of questions in the form/fieldset), then included the help text within the password label in a <span> that can be postioned and styled differently.
The markup looks like this:
<form name="signUp">
<fieldset>
<legend>Sign up now!</legend>
<ol>
<li><label for="username">Choose a username</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Choose a password<span class="hidden">. </span><span class="labelXtra">Your password needs to be at least 8 characters long, including at least one number or special character.</span></label>
<input type="password" id="password" />
</li>
<li>
<label for="email">Email address</label>
<input type="text" id="email" />
</li>
<li>
<label for="confirmEmail">Confirm email address</label>
<input type="text" id="confirmEmail" />
</li>
</ol>
</fieldset>
<ol>
<li>
<input id="submit" type="image" alt="Sign up for updates" value="Sign up" src="submitButton.gif"/>
</li>
</ol>
</form>Each label and input is floated left, and cleared by the list items (important if the help text you want to use is mid-way through a set of questions and not at the end). Here’s the relevant CSS:
ol{
margin:0;
padding:0;
}
ol li{
clear:both;
list-style:none;
margin:0;
padding:10px 0;
}
label{
float:left;
width:200px;
display:block;
}
input{
float:left;
width:190px;
border:1px solid #a4570a;
padding:2px;
}
input.submitButton{/*make sure styling for your input fields doesn't affect the submit button*/
float:none;
width:68px;
border:0;
padding:0;
margin:0;
}
/**Move the help text away from the rest**/
span.labelXtra{
display:block;
margin-top:12px;/*put some space between the Help text and the label*/
width:400px;/*Extend the help text under both label and input field - IE6 doesn't like this, see fix below*/
font-size:0.85em;
padding-left:28px;/*Allow room for background Help icon*/
background:url(infoIcon.gif) top left no-repeat;/*Help icon bg image*/
}Browser compatibility
This works OK in Firefox (version 3.x), Safari 4.x, Opera 9 and Internet Explorer 7 and 8. IE6 however doesn’t like it one bit, refusing to float the password input field to the right of the label (due to the span holding the help text being wider than the containing label). I wouldn’t advocate spending time getting things pixel perfect in IE6, but I would recommend a fix that enables things to look a bit more presentable.
The following IE6-specific CSS can be put in at the end:
* html span.labelXtra{
width:200px;
padding-left:0;
background:none;
}This resets the width of the help text span (labelXtra class) to match the label, so the input field can float past it and sit nicely next to our main field label. It doesn’t look as nice, but it does work.
So there you have it, a screen reader-accessible way of doing form help text. There’s other uses for this kind of thing too, such as form error messages – which I’ll have a look at next time around.
Written by: Andy Bryant
Published on: 11 Aug 2009
Tags: Accessibility, assistive technology, conditional comments, CSS, HTML, IE, JAWS, screen readers, Web design, web forms
Nice article, and a good solution. Isn’t it a shame that ol’ IE6 gets in the way…
A simple aria-describedby that points to the longer paragraph does the same thing without resorting to CSS and structural workarounds.
@Jared Thanks, I’m sure ARIA makes this kind of thing far easier to implement – as yet I haven’t had the time to get to grips with it, but I certainly intend to.