E-mail List Archives
Thread: Complex use of Radio input
Number of posts in this thread: 15 (In chronological order)
From: Langum, Michael J
Date: Fri, Nov 20 2009 5:50AM
Subject: Complex use of Radio input
No previous message | Next message →
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
From: Moore,Michael (DARS)
Date: Fri, Nov 20 2009 7:00AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
If you want to use standards compliant HTML then drop the table layout and style the fieldset to make the form look like it did with the table. This will also provide an accessible form.
Mike Moore
(512) 424-4159
From: Nancy Johnson
Date: Fri, Nov 20 2009 7:10AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
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 ADDRESS 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
>
>
From: Jon Gunderson
Date: Fri, Nov 20 2009 7:35AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
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 ADDRESS REMOVED = >
>Subject: [WebAIM] Complex use of Radio input
>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS 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 > ]
>________________
>
From: ckrugman
Date: Fri, Nov 20 2009 8:55PM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
I am using JAWS 11 and had no difficulty negotiating this form. As I have
signed up on many interney survey sites for product testing and political
surveys I find this format to be quite common. I wish many sites used format
that was this accessible for screen reader navigation.
Chuck
----- Original Message -----
From: "Langum, Michael J" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 20, 2009 4:50 AM
Subject: [WebAIM] Complex use of Radio input
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
--------------------------------------------------------------------------------
>
From: Keith Parks
Date: Mon, Nov 23 2009 3:45PM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
On Nov 20, 2009, at 6:31 AM, Jon Gunderson wrote:
> Mike,
>
> Here is an example of complex form accessibility using offscreen
> labels:
> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
Sorry to reply to this rather late, but have you taken a look at that
page with CSS off? =:^o
Wow, what a nightmare. While technically it may meet the forms-
accessibility guidelines (everything having a Label), it's hard to
imagine it being *usable* by either a screen-reader user, or a user
who replaced the default style sheet with their own for visual reasons.
So it seems like on the practical side it would fail 508 (d).
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Yes We Can!*
*should not be interpreted to mean that we necessarily will
From: Jon Gunderson
Date: Tue, Nov 24 2009 8:20AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
This is not my design, but an attempt top make a design accessible from a company looking to improve accessibility more accessible.
This type of layout is not uncommon in surveys developed for the web, where most "customers" of surveys want the look of bubble forms, and will look for a vendor who will give them what they want, most "customers" apparently prioritize visual layout over accessibility.
In this case the use of hidden labels is the only way we have found to make these forms accessible to speech users. The company said the "customers" were unwilling to change the visual layout.
I would be interested in learning about your ideas of making this form more accessible.
Jon
---- Original message ----
>Date: Mon, 23 Nov 2009 14:42:16 -0800
>From: Keith Parks < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Complex use of Radio input
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
>On Nov 20, 2009, at 6:31 AM, Jon Gunderson wrote:
>
>> Mike,
>>
>> Here is an example of complex form accessibility using offscreen
>> labels:
>> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
>
>
>Sorry to reply to this rather late, but have you taken a look at that
>page with CSS off? =:^o
>
>Wow, what a nightmare. While technically it may meet the forms-
>accessibility guidelines (everything having a Label), it's hard to
>imagine it being *usable* by either a screen-reader user, or a user
>who replaced the default style sheet with their own for visual reasons.
>
>So it seems like on the practical side it would fail 508 (d).
>
>******************************
>Keith Parks
>Graphic Designer/Web Designer
>Student Affairs Communications Services
>San Diego State University
>San Diego, CA 92182-7444
>(619) 594-1046
>mailto: = EMAIL ADDRESS REMOVED =
>http://www.sa.sdsu.edu/communications
>
>http://kparks.deviantart.com/gallery
>----------------------------------------------------------
>
>Yes We Can!*
>
>*should not be interpreted to mean that we necessarily will
>
>
From: ben morrison
Date: Tue, Nov 24 2009 8:25AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
On Mon, Nov 23, 2009 at 10:42 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>> Here is an example of complex form accessibility using offscreen
>> labels:
>> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
>
>
> Sorry to reply to this rather late, but have you taken a look at that
> page with CSS off? =:^o
>
> Wow, what a nightmare. While technically it may meet the forms-
> accessibility guidelines (everything having a Label), it's hard to
> imagine it being *usable* by either a screen-reader user, or a user
> who replaced the default style sheet with their own for visual reasons.
>
> So it seems like on the practical side it would fail 508 (d).
Also that is a lot of potentially annoying long labels for a screen
reader - looks like overkill to me...
what has the feedback been?
Ben
--
Ben Morrison
From: Jon Gunderson
Date: Tue, Nov 24 2009 8:40AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
We discussed the labels in our weekly best practices group and the long labels and the ordering of information was considered important.
The newest information is first part of the label, so that people using speech get the most different information first.
We considered short labels for the 2-8 radio buttons, but once a button is selected and someone moves back to the radio group they would not have all of the question information since the selected radio button is the one with focus, forcing screen reader users to navigate to the first or last radio button to get question information.
It is important to remember that filling out surveys is something that people do rarely, so more information seemed better than less. if this was a task people did everyday, then there probably would have been other design decisions.
Jon
---- Original message ----
>Date: Tue, 24 Nov 2009 15:21:12 +0000
>From: ben morrison < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Complex use of Radio input
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>On Mon, Nov 23, 2009 at 10:42 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>>> Here is an example of complex form accessibility using offscreen
>>> labels:
>>> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
>>
>>
>> Sorry to reply to this rather late, but have you taken a look at that
>> page with CSS off? =:^o
>>
>> Wow, what a nightmare. While technically it may meet the forms-
>> accessibility guidelines (everything having a Label), it's hard to
>> imagine it being *usable* by either a screen-reader user, or a user
>> who replaced the default style sheet with their own for visual reasons.
>>
>> So it seems like on the practical side it would fail 508 (d).
>
>Also that is a lot of potentially annoying long labels for a screen
>reader - looks like overkill to me...
>what has the feedback been?
>
>Ben
>--
>Ben Morrison
>
From: Keith Parks
Date: Tue, Nov 24 2009 9:15AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
On Nov 24, 2009, at 7:16 AM, Jon Gunderson wrote:
> I would be interested in learning about your ideas of making this
> form more accessible.
I can understand the thinking behind having a fully descriptive Label
for each radio button.
Actually, my original thought for simplifying it was do they really
need *nine* different rating levels? Wouldn't 1-5 be enough
distinction? (which would eliminate over 40% of the "chatter") Are
they really going to act on the data collected differently if
something is rated at a 3 out of 9 compared to a 4 out of 9?
Or even just three levels of on some things: level of service - low |
medium | high
Yes, I can see on the "strongly disagree" to "strongly agree" scale, 5
levels makes sense. But 9 levels of subtlety seems unnecessary. But
that kind of simplification would be more related to *usability* by
someone using assistive technology, and maybe not to the textbook
accessibility of the page.
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Putting the "no" in "Innovation" since 1988.
From: Randall Pope
Date: Tue, Nov 24 2009 9:50AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
If one thinks it's bad with voices, image what it would be like for the
deafblind, who cannot hear, trying to read it with braille devices.
With Warm Regards,
Randall "Randy" Pope
American Association of the Deaf-Blind
Website: http://www.aadb.org
301 495-4402 VP/TTY
301 495-4403 Voice
301 495-4404 Fax
AIM: RandyAADB
Want to keep up with the latest news in the Deaf-Blind Community? Consider
subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
free and AADB membership is not required.
From: ben morrison
Date: Tue, Nov 24 2009 10:00AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
Personally I would have preferred to use a fieldset with a legend for
each of those groups, making the long label unnecessary, maybe select
boxes would be more usable too for the 1-9 choices...
Ben
On Tue, Nov 24, 2009 at 3:36 PM, Jon Gunderson < = EMAIL ADDRESS REMOVED = > wrote:
> We discussed the labels in our weekly best practices group and the long labels and the ordering of information was considered important.
>
> The newest information is first part of the label, so that people using speech get the most different information first.
>
> We considered short labels for the 2-8 radio buttons, but once a button is selected and someone moves back to the radio group they would not have all of the question information since the selected radio button is the one with focus, forcing screen reader users to navigate to the first or last radio button to get question information.
>
> It is important to remember that filling out surveys is something that people do rarely, so more information seemed better than less. if this was a task people did everyday, then there probably would have been other design decisions.
>
> Jon
>
>
> ---- Original message ----
>>Date: Tue, 24 Nov 2009 15:21:12 +0000
>>From: ben morrison < = EMAIL ADDRESS REMOVED = >
>>Subject: Re: [WebAIM] Complex use of Radio input
>>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>
>>On Mon, Nov 23, 2009 at 10:42 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>>>> Here is an example of complex form accessibility using offscreen
>>>> labels:
>>>> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
>>>
>>>
>>> Sorry to reply to this rather late, but have you taken a look at that
>>> page with CSS off? =:^o
>>>
>>> Wow, what a nightmare. While technically it may meet the forms-
>>> accessibility guidelines (everything having a Label), it's hard to
>>> imagine it being *usable* by either a screen-reader user, or a user
>>> who replaced the default style sheet with their own for visual reasons.
>>>
>>> So it seems like on the practical side it would fail 508 (d).
>>
>>Also that is a lot of potentially annoying long labels for a screen
>>reader - looks like overkill to me...
>>what has the feedback been?
>>
>>Ben
>>--
>>Ben Morrison
>>
From: Jon Gunderson
Date: Tue, Nov 24 2009 11:00AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
Again it is not my design, some "customer" who is paying a company wanted the 9 levels and did not want to change the rating scale. It is probably some hold over from paper based versions of the survey, but I do not know. The value of the nine levels is probably debatable, but the company just wanted to improve accessibility and contacted us.
Jon
---- Original message ----
>Date: Tue, 24 Nov 2009 08:11:27 -0800
>From: Keith Parks < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Complex use of Radio input
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
>On Nov 24, 2009, at 7:16 AM, Jon Gunderson wrote:
>
>> I would be interested in learning about your ideas of making this
>> form more accessible.
>
>
>I can understand the thinking behind having a fully descriptive Label
>for each radio button.
>
>Actually, my original thought for simplifying it was do they really
>need *nine* different rating levels? Wouldn't 1-5 be enough
>distinction? (which would eliminate over 40% of the "chatter") Are
>they really going to act on the data collected differently if
>something is rated at a 3 out of 9 compared to a 4 out of 9?
>
>Or even just three levels of on some things: level of service - low |
>medium | high
>
>Yes, I can see on the "strongly disagree" to "strongly agree" scale, 5
>levels makes sense. But 9 levels of subtlety seems unnecessary. But
>that kind of simplification would be more related to *usability* by
>someone using assistive technology, and maybe not to the textbook
>accessibility of the page.
>
>******************************
>Keith Parks
>Graphic Designer/Web Designer
>Student Affairs Communications Services
>San Diego State University
>San Diego, CA 92182-7444
>(619) 594-1046
>mailto: = EMAIL ADDRESS REMOVED =
>http://www.sa.sdsu.edu/communications
>
>http://kparks.deviantart.com/gallery
>----------------------------------------------------------
>
>Putting the "no" in "Innovation" since 1988.
>
>
From: Jon Gunderson
Date: Tue, Nov 24 2009 11:05AM
Subject: Re: Complex use of Radio input
← Previous message | Next message →
The new information is at the beginning, so for a braille user they would feel the values of the radio buttons first.
Jon
---- Original message ----
>Date: Tue, 24 Nov 2009 11:50:49 -0500
>From: "Randall Pope" < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Complex use of Radio input
>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>
>If one thinks it's bad with voices, image what it would be like for the
>deafblind, who cannot hear, trying to read it with braille devices.
>
>With Warm Regards,
>Randall "Randy" Pope
>American Association of the Deaf-Blind
>Website: http://www.aadb.org
>
>301 495-4402 VP/TTY
>301 495-4403 Voice
>301 495-4404 Fax
>AIM: RandyAADB
>
>Want to keep up with the latest news in the Deaf-Blind Community? Consider
>subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
>free and AADB membership is not required.
>
>
>
From: Jon Gunderson
Date: Tue, Nov 24 2009 11:10AM
Subject: Re: Complex use of Radio input
← Previous message | No next message
The use of select boxes is the next example on how to make this form more accessible:
http://devserv.dres.uiuc.edu/ita/jongund/citaweb/bestpractices/html/nav/form/complex/index.php?example=3
Jon
---- Original message ----
>Date: Tue, 24 Nov 2009 17:00:07 +0000
>From: ben morrison < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Complex use of Radio input
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>Personally I would have preferred to use a fieldset with a legend for
>each of those groups, making the long label unnecessary, maybe select
>boxes would be more usable too for the 1-9 choices...
>
>Ben
>
>On Tue, Nov 24, 2009 at 3:36 PM, Jon Gunderson < = EMAIL ADDRESS REMOVED = > wrote:
>> We discussed the labels in our weekly best practices group and the long labels and the ordering of information was considered important.
>>
>> The newest information is first part of the label, so that people using speech get the most different information first.
>>
>> We considered short labels for the 2-8 radio buttons, but once a button is selected and someone moves back to the radio group they would not have all of the question information since the selected radio button is the one with focus, forcing screen reader users to navigate to the first or last radio button to get question information.
>>
>> It is important to remember that filling out surveys is something that people do rarely, so more information seemed better than less. if this was a task people did everyday, then there probably would have been other design decisions.
>>
>> Jon
>>
>>
>> ---- Original message ----
>>>Date: Tue, 24 Nov 2009 15:21:12 +0000
>>>From: ben morrison < = EMAIL ADDRESS REMOVED = >
>>>Subject: Re: [WebAIM] Complex use of Radio input
>>>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>
>>>On Mon, Nov 23, 2009 at 10:42 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>>>>> Here is an example of complex form accessibility using offscreen
>>>>> labels:
>>>>> http://html.cita.illinois.edu/nav/form/complex/index.php?example=2
>>>>
>>>>
>>>> Sorry to reply to this rather late, but have you taken a look at that
>>>> page with CSS off? =:^o
>>>>
>>>> Wow, what a nightmare. While technically it may meet the forms-
>>>> accessibility guidelines (everything having a Label), it's hard to
>>>> imagine it being *usable* by either a screen-reader user, or a user
>>>> who replaced the default style sheet with their own for visual reasons.
>>>>
>>>> So it seems like on the practical side it would fail 508 (d).
>>>
>>>Also that is a lot of potentially annoying long labels for a screen
>>>reader - looks like overkill to me...
>>>what has the feedback been?
>>>
>>>Ben
>>>--
>>>Ben Morrison
>>>