- From: Thomas Broyer <t.broyer@gmail.com>
- Date: Tue, 28 Oct 2008 18:08:43 +0100
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
Received on Tuesday, 28 October 2008 10:08:43 UTC