[whatwg] Form Control Group Labels (was: Re: How not to fix HTML)

[Lachlan Hunt]

Matthew Raymond wrote:
> Example:
> 
> | <p>
> |   <label group="gender">Gender:</label>
> |
> |   <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>

I just realised a problem with this proposal.  What if we want to 
associate a label with several controls, with different names?  Here's a 
few use cases:


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.

<label group=" ? ">Birthday:</label>
<label for="day"> day:
    <input type="text" name="bday-day" id="day"></label>

<label for="month"> month:
   <select name="bday-month" id="month">
     <option>January</option>
     ...
   </select>
</label>

<label for="year">year:
   <input type="text" name="bday-year" id="year"></label>


Note: It's also possible to solve that particular case using 
<legend>Birthday</legend> in a fieldset.

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>

I've come across this issue before, but the only accessible way to solve 
it that I know of is to add an individual label for every input and then 
hide it using CSS, so that it's read by screen readers but hidden to 
visual UAs.

It could possibly be argued that assitive technology should just get 
smarter, and know that it should associate <th> elements with the form 
controls and read them out like labels, but AFAIK, they don't.  We 
should try to get some feedback from people who know more about 
accessibility than we do.

Now, all of a sudden, the mistakes I made in my initial examples with 
the erroneous info attributes don't look too bad.  Maybe we do need to 
add a separate attribute to form controls for logically grouping them 
and associating them with a group label.

-- 
Lachlan Hunt
http://lachy.id.au/