[whatwg] Form Control Group Labels
Ian Hickson
ian at hixie.ch
Tue Oct 28 02:32:13 PDT 2008
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. `._.-(,_..'--(,_..'`-.;.'
More information about the whatwg
mailing list