WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Complex use of Radio input

for

From: Jon Gunderson
Date: Nov 20, 2009 7:35AM

Mike,

Here is an example of complex form accessibility using offscreen labels:
http://html.cita.illinois.edu/nav/form/complex/index.php?example=2

Here is an alternative using select boxes instead of radio buttons if your client will agree:
http://html.cita.illinois.edu/nav/form/complex/index.php?example=3

Jon


---- Original message ----
>Date: Fri, 20 Nov 2009 07:50:48 -0500
>From: "Langum, Michael J" < <EMAIL REMOVED> >
>Subject: [WebAIM] Complex use of Radio input
>To: "'WebAIM Discussion List'" < <EMAIL REMOVED> >
>
>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
>________________
> Employee Viewpoint Survey Pilot Study
>
> +----------------------------------------------------------------------------------------+
> |(2) How satisfied are | | | Neither | | | No |
> |you with the following| Very |Satisfied|Satisfied nor|Dissatisfied| Very |Basis|
> |Work/Life programs in |Satisfied| |Dissatisfied | |Dissatisfied| to |
> | your agency? | | | | | |Judge|
> |----------------------+---------+---------+-------------+------------+------------+-----|
> | a) Telework |[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> |----------------------+---------+---------+-------------+------------+------------+-----|
> | b) Alternative Work |[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> | Schedules (AWS) | | | | | | |
> |----------------------+---------+---------+-------------+------------+------------+-----|
> |c) Health and Wellness| | | | | | |
> |Programs (for example,| | | | | | |
> | exercise, medical |[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> | screening, quit | | | | | | |
> | smoking programs) | | | | | | |
> |----------------------+---------+---------+-------------+------------+------------+-----|
> |d) Employee Assistance|[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> | Program (EAP) | | | | | | |
> |----------------------+---------+---------+-------------+------------+------------+-----|
> |e) Child Care Programs| | | | | | |
> |(for example, daycare,| | | | | | |
> | parenting classes, |[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> | parenting support | | | | | | |
> | groups) | | | | | | |
> |----------------------+---------+---------+-------------+------------+------------+-----|
> |f) Elder Care Programs| | | | | | |
> |(for example, support |[ ] |[ ] |[ ] |[ ] |[ ] |[ ] |
> | groups, speakers) | | | | | | |
> +----------------------------------------------------------------------------------------+
>
> [ < Back ] [ Next > ]
>________________
>