WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forms, fieldset

for

From: Caleb Tang
Date: Jun 12, 2009 3:55AM

Hi,

While it is ok to have nested fieldset, it is important not to overuse
fieldset. It is good practice to use fieldset to group related form elements
and nested fieldset is fine to use.

Just something to bare in mind from screen reader perspective. Only the last
fieldset will be announced by screen reader.

<fieldset>
<legend>Personal Information</legend>
<label for="first">First Name</label><input type="text" id="first"
name="first" /><br/>
<label for="last">Last Name</label><input type="text" id="last"
name="last" /><br/>

<fieldset>
<legend>Gender</legend>
<input id="gender" name="gender" type="radio" value="male"/><label
for="gender">Male</label><br/>
<input id="gender" name="gender" type="radio" value="female"/><label
for="gender">Female</label>
</fieldset>

<label for="phone">Phone</label><input type="text" id="phone"
name="phone"/>

</fieldset>

Screen reader will announce "Personal Information" legend for First name and
Last name. "Gender" legend will be announce for Male and Female.

Unfortunately "Gender" will be announce for Phone because Gender is the last
fieldset seen by screen reader.

So if there a need for nested fieldset, treat the outer fieldset as
container that only hold fieldsets rather than form elements.

Note: This is tested on JAWS

Hope this help

Caleb Tang,
Accessibility & Usability Consultant



On 12/06/2009 08:58, "Kevin White" < <EMAIL REMOVED> > wrote:

> Hi,
>
> You might also want to consider changing the <h4> elements to be
> <legend>s, e.g. 'Library Instruction Session Information'. Perhaps as
> well having something other than just <strong> elements to indicate
> required fields.
>
> Not sure if there has been discussion regarding date entry but you
> might want to consider something like:
>
> <fieldset>
> <legend>Library Instruction Session Information</legend>
> <p>Please select a time for your library instruction session</p>
>
> <fieldset>
> <legend>First choice of session time</legend>
> <label for="first-date">Date (DD-MM-YYYY)</label>
> <input id="first-date" name="first-date" type="text" />
> <label for="first-time">Time (HH:MM)</label>
> <input id="first-time" name="first-time" type="text" />
> </fieldset>
>
> etc...
> </fieldset>
>
> I was curious about the need for an end time. Would users know that
> they need more than 50 mins? Or would this time include the special
> areas of emphasis only. If so, is there a need for users to work out
> how much time they need or would you be as well simplifying the form
> and having the system work out what they end-time is based on their
> choices. From an accessibility perspective this solution makes a wee
> bit more sense as users have to fill in the end-time before they
> select the special areas of emphasis, so they may not be aware of the
> time requirements when they fill in the end-time.
>
> Just some thoughts,
>
> Kevin
>
>
> On 12 Jun 2009, at 06:48, Ranti Junus wrote:
>
>> I guess I was under a mistaken impression that nested fieldset was
>> not valid.
>> I think working on that form would be easier than I anticipated. I'll
>> see what we can do to tackle this one.
>>
>> Thank you so much for your help!
>>
>>
>> ranti.
>>
>> --
>> Bulk mail. Postage paid.
>>