WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Radio Buttons Again!

for

From: Randy Pearson
Date: Oct 20, 2003 7:05AM

Tim,

We're dealing with the same issue. I would like to say we have an adequate
solution, but I cannot. As an example form fragment:

Name: [_____________]
Favortite Color: ( ) Red ( ) Green ( ) Blue

1. For the textbox you'll wrap "Name" in a <label for=id>; however you
cannot do that for the "Favorite Color" label, because the radio buttons
have three different ID's.

2. We're resigned at the moment to leaving the label as "plain text" in this
case, and only using <label> wrappers on the items (Red, Blue, Green).

3. Aside: I read somewhere recently that for radio buttons, the labels
should actually preceed the physical control, more like this:

Favortite Color: Red ( ) Green ( ) Blue ( )

This advice was based on the sequencing that a screen reader would use.
We're not doing this yet, but we are thinking about it.

4. If the form is layout uses an HTML <table>, I was wondering if this
situation would be improved by placing the "Favorite Color" text (and other
labels) in <th> cells, and then specifying "headers" in the adjacent <td>.

5. This situation also applies to "choose all that apply" checkboxes.

6. Ironically, this situation does not apply to <select> dropdowns, as they
have a single ID. What that means is, if you could "detect" users with
screen readers, you could possibly arrange to switch interfaces.

>> Unfortunately, I haven't figured a good method for contorting the
>> caption element for a fieldset using CSS so it appears on the same line
>> as the radio buttons.

We looked at this too. Seems no modern browser is allowing <legend> within a
<fieldset> to be styled. Seems quite crude right now. Something to explore
again in 2+ years I imagine.

-- Randy



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/