[whatwg] Form Control Group Labels

[Ian Hickson]

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.


> The problem with that technique is that, because of the way legends are 
> rendered in browsers, styling is somewhat restricted.

That's a CSS issue. It probably isn't a reason to invent a new syntax 
whose exclusive purpose is accessibility, especially since such syntax has 
a track record of very low uptake.


On Tue, 31 Oct 2006, Matthew Raymond wrote:
> 
> | <p>
> |   <grouplabel for="gender">Gender:</grouplabel>
> |    <label><input type="radio" name="gender" value="m">Male</label>
> |    <label><input type="radio" name="gender" value="f">Female</label>
> | </p>
> 
>    The element <grouplabel> gives the label for the group. The |for| 
> attribute in this case takes a name rather than and ID, therefore it 
> labels as a group control elements that have |name="gender"| as an 
> attribute. It introduces only one element and one attribute for an 
> unlimited amount of control elements.

Drop the "for", rename "grouplabel" to "legend", and rename "p" to 
"fieldset", and you're done. :-)


On Thu, 2 Nov 2006, Lachlan Hunt wrote:
> 
> 1. Seperate fields for a date (day, month, year)
>
> Note: I'm aware that type="date" solves this specific use case, but this 
> is still a very commonly used structure today and illustrates my point 
> nicely.

I'm not sure that this is really a good use case, because from an 
accessibility point of view, if you jump to the second or third field in a 
compound field, it doesn't help you much to know that you are in a field 
related to a date, you need to know if it's the first, second, or third 
such field.


> 2. Another use case is, which can't be solved using fieldset and legend, 
> is a table of input elements, like this:
> 
> The inputs could be checkboxes, text fields or whatever.
> 
> <table>
> <thead>
>   <tr>
>     <th><label group=" ? ">Apples</label>
>     <th><label group=" ? ">Oranges</label>
>     <th><label group=" ? ">Bananas</label>
> <tbody>
>   <tr>
>     <th scope="row"><label group=" ? ">Foo</label>
>     <td><input name="foo-apple">
>     <td><input name="foo-orange">
>     <td><input name="foo-banana">
>   <tr>
>     <th scope="row"><label group=" ? ">Bar</label>
>     <td><input name="bar-apple">
>     <td><input name="bar-orange">
>     <td><input name="bar-banana">
>   <tr>
>     <th scope="row"><label group=" ? ">Baz</label>
>     <td><input name="baz-apple">
>     <td><input name="baz-orange">
>     <td><input name="baz-banana">
> </table>

Why isn't <th> enough for this?

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'