- From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
- Date: Thu, 02 Nov 2006 17:19:00 +1100
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/
Received on Wednesday, 1 November 2006 22:19:00 UTC