[whatwg] Form Control Group Labels

[Thomas Broyer]

On Tue, Oct 28, 2008 at 10:32 AM, Ian Hickson wrote:
> On Tue, 31 Oct 2006, Lachlan Hunt wrote:
>>
>> [...] The problem is that each radio button or checkbox has it's own
>> label, but the whole group is often associated with a single question
>> and there is no way mark that up.
>>
>> e.g.
>>
>> <p>Gender:
>>   <label for="m"><input type="radio" id="m" name="gender" value="m">
>>     Male</label>
>>   <label for="f"><input type="radio" id="f" name="gender" value="f">
>>     Female</label>
>> </p>
>>
>> In this case, when screen readers are in forms mode and the user is
>> tabbing between form controls, it will only read out "Male" and
>> "Female", it won't read out "Gender:".
>>
>> There are workarounds using fieldset and legend for the question, like
>> this.
>>
>> <fieldset>
>>   <legend>Gender:</legend>
>>   <label for="m"><input type="radio" id="m" name="gender" value="m">
>>     Male</label>
>>   <label for="f"><input type="radio" id="f" name="gender" value="f">
>>     Female</label>
>> </fieldset>
>
> That's not a workaround. It's exactly what you're supposed to do.
> <fieldset> lets you group a set of controls with a common legend, which is
> exactly the problem you described.

Wouldn't aria-labelledby [1] be better-suited? (if and once ARIA is
added to HTML5)

<span id=gender>Gender:</span>

<input type=radio name=gender id=gender-male value=m
   aria-labelledby="gender male"
<label id=male for=gender-male>Male</label>

<input type=radio name=gender id=gender-female value=f
   aria-labelledby="gender female">
<label id=female for=gender-female>Female</label>

According to [2] it works in most AT (and note the use of <label
for=""> to both degrade gracefully and gain the "click to check"
behavior in "visual" browsers).

[1] http://www.w3.org/TR/wai-aria/#labelledby
[2] http://www.marcozehe.de/2008/03/23/easy-aria-tip-2-aria-labelledby-and-aria-describedby/


-- 
Thomas Broyer