WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible conditional form fields

for

From: Michael.Moore
Date: Nov 3, 2010 7:54AM

Getting to intervening text within a form has always been a bit tricky.

Using tabindex=0 is well supported but the instructions are not programmatically bound to the correct input, and it adds extra tab stops to a form. If you navigate directly to a form field using a form field list you will miss the instruction. Also if the instruction comes after the form field you will read it too late if you are tabbing through the interface. This is a common design pattern for password rules.

A promising new technique is the aria-describedby attribute.

The aria-describedby attribute points to the id of another element that provides additional information about another element. Andy Bryant has a good example of using the attribute in a sign up form on his LessFuss Design blog.

<http://www.lessfussdesign.com/blog/2010/08/using-aria-describedby-for-form-help-text/>;

His code looks like this:

<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>

There is also live test case here: <http://codetalks.org/source/enhanced-html-forms/describedby.html>;

We have tested this with JFW 10, 11, and 12 and NVDA 2010.2 beta 1 using FF 3.6 and it worked flawlessly. We also tested it successfully with Voiceover on IOS 4.1. The attribute was not supported in JFW 9 or with any version of JAWS or NVDA on IE7 or IE8.

In JAWS the paragraph that was pointed to by the aria-described attribute was read after the label and in voiceover it was read before.

Mike Moore