WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Complex use of Radio input

for

From: Nancy Johnson
Date: Nov 20, 2009 7:10AM

There are different ways depending on the situation. What I ended up
doing is using hidden labels for screen readers only and it was a
situation where there were three fields for a date with one label.

<label for="incident_month" class="hiddentext">Month</label>
<select name="incident_month" title="Month" id="incident_month" tabindex="3">

<option value=0>Month</option>
<option Value=0>_____</option>

css I used
/*use for screenreaders only when the screen readers need a label in
the a form element but sighted viewers do not*/
.hiddentext {
position:absolute;
left:0px;
top:-1000px;
width:1px;
height:1px;
overflow:hidden;
}

Hope this helps
Nancy Johnson

On Fri, Nov 20, 2009 at 7:50 AM, Langum, Michael J
< <EMAIL REMOVED> > wrote:
> I have a customer who has submitted a form that uses a table layout to associate radio buttons with a top-level question (in the first cell of the first row) and a series of sub-questions (within each of the following rows). I have attached a simplified extract of the customers proposed HTML.
>
> The table structure gives a good visual layout that is easy for a sighted person to use.
>
> But it doesn't really allow associating <label> tags with each <input>. Nor does it work well with a <fieldset> and <legend> containers for the radio buttons.
>
> Does anyone have a solution that is fully compliant with section 508, and uses standards compliant HTML?
>
> -- Mike Langum
> U.S. Office of Personnel Management
>
>