WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible conditional form fields

for

From: Kroon.Kurtis
Date: Nov 3, 2010 1:30PM

-----Original Message-----
From: D A [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, November 02, 2010 2:10 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible conditional form fields

[snip]

> How [do] folks that use JAWS deal with complex forms that intermingle
> non-form content like that?

We conform to Section 508 ... and these bits of so-called "non-form" content are often essential cues or directions for what we accept in a given field. To ensure that screen readers always pick it up and read it *before* the field, it has to be included in the label. For visual presentation, it can be marked as a span and positioned with CSS.

Here's a code example:

...
<p>
<label for="SSN">Social Security Number <span id="SSN_Additional_Info">Required: 9 digits only, no hyphens or spaces</span></label>
<input type="text" id="SSN" />
</p>
...

We might position #SSN_Additional_Info with the following CSS:

{
display: block;
float: left; /* or right: float just removes it from the normal document flow */
position: relative;
top: -1.5em; /* line it up with the top of the associated field */
right: -35em; /* left: 35em also works */
width: 15em;
}

This technique tests well in JAWS 11, and looks okay in IE7, IE8, Firefox, Safari, and Chrome. It falls down a little in Opera 10.63, but with a bit more time in Dragonfly, I could probably fix that.

Thanks!

Kurtis
FTB/WebBiz
916·845·5603