W3C home > Mailing lists > Public > whatwg@whatwg.org > November 2006

[whatwg] How not to fix HTML

From: Simon Pieters <zcorpan@hotmail.com>
Date: Wed, 01 Nov 2006 21:05:56 +0000
Message-ID: <BAY109-F101C1F09B6FFB148A288F5B4F80@phx.gbl>
Hi,

From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
>I believe the issue is with the way screen readers handle existing forms.  
>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:".
>
>In this specific case, that's probably not a major issue because male and 
>female are fairly self explanitory, but there are many cases where it's 
>not.
>
>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>

I thought this was exactly what fieldset was designed to do. Group related 
form controls. Why do you consider it a workaround?

>Because of the way screen readers work, they now read out "Gender: Male" 
>and "Gender: Female" as they tab to each control.
>
>This example demonstrates this technique.
>http://www.alistapart.com/d/prettyaccessibleforms/example_3/
>
>The problem with that technique is that, because of the way legends are 
>rendered in browsers, styling is somewhat restricted.

I'd propose fixing the styling issues instead of changing the markup.

Alternatively screen readers could be made smarter, also without changing 
the markup. Consider:

   <p>Gender: <label><input name=g value=m type=radio> male</label>
                     <label><input name=g value=f type=radio> 
female</label></p>

Now the screen reader finds a group of radio buttons not in a fieldset. 
Radio buttons almost always have a question assigned to them. So go up a 
level in the tree (to the P) and get its child text nodes or .textContent or 
something, and use that as the "legend" for the radio group. (I'm not saying 
this algorithm is fool-proof, just saying that we don't necessarily need to 
change the markup to solve this issue.)

Regards,
Simon Pieters

_________________________________________________________________
Eragon p?  vita duken 15/12! http://www.msn.se/noje/eragon/
Received on Wednesday, 1 November 2006 13:05:56 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:58:49 UTC