Use of Headings in Fieldsets
Hi all
Consider this:
| Code: |
|
<fieldset> <legend>Method of Contact</legend> <p>How shall we contact you?</p> <label for="how_contact_phone"> ... selection of labels and radio buttons </fieldset> |
I'm having a conversation with a developer who thinks it would be better to make the <p> that precedes the radios into an <h2>.
Is it more semantically correct to use headings rather than paragraphs within fieldsets? Is it more accessible with regard to the example above?
Thanks
Share: 
Nested fieldset and legend is the right structure for this content. However, the more usable solution is to simply the form whenever possible.
The text "Method of Contact" is ambiguous. Contact who? So you have some text to explain it's really asking: "How shall we contact you?" This explanation is so short yet so complete that it could entirely replace the unhelpful legend text:
| Code: |
| <fieldset>
<legend>How shall we contact you?</legend> <label for="how_contact_phone"> ... selection of labels and radio buttons </fieldset> |
Share:
Forgive me for posting a weak example of code. I agree with your comments entirely, but the question remains - if you need to introduce a set of radio buttons within a fieldset is it best to use a heading? What about a simple yes/no selection? Does this require a heading to markup the question? Or are you saying that a series of radio buttons should warrant a fieldset of their own?
Share:
Fieldsets can be nested, so you could nest a second fieldset around the radio buttons, with a legend of its own.
I seem to remember that screenreaders ignore headings, paragraphs and other non-forms elements when in forms mode, so text in headings might not be read out once a screenreader user starts to fill out the form.
Share:
| eatyourgreens wrote: |
|
I seem to remember that screenreaders ignore headings, paragraphs and other non-forms elements when in forms mode, so text in headings might not be read out once a screenreader user starts to fill out the form. |
Yeah, JAWS certainly does in forms mode.
To complicate matters further, there're also bugs with some versions of Jaws and nested fieldset legends. I think it was version 8 that was fairly random in which legend it announced. I'll have to check, I had a test case somewhere.
-Matt
Matt Machell
Web Design and Development Blog
Member of the Multipack
Share:
| stephenlang wrote: |
| [...] if you need to introduce a set of radio buttons within a fieldset is it best to use a heading? |
It ends up something like this (many attributes omitted):
| Code: |
| <fieldset>
<legend>Your Details</legend> <label>Name</label> <input> <label>Address</label> <textarea></textarea> <label>Phone Number</label> <input> <label>E-mail</label> <input> <fieldset> <legend>How you you like us to contact you?<legend> <input type="radio"> <label>Post</label> <input type="radio"> <label>Telephone</label> <input type="radio"> <label>E-mail</label> </fieldset> <input type="checkbox"> <label>Receive our Newsletter?</label> </fieldset> <input type="submit"> |
| stephenlang wrote: |
| What about a simple yes/no selection? Does this require a heading to markup the question? |
Stephen, can you give a more realistic example of what this might be used for? I find that if I'm struggling to figure out the markup for something, it's often because that something is too weird. Redesigning it to be normal is the best solution in these cases, but that's not always possible.
| stephenlang wrote: |
| Or are you saying that a series of radio buttons should warrant a fieldset of their own? |
(EDIT) Re-arranged to make a bit more sense.
Last edited by Ben Millard on 04 Sep 2008 04:53 am; edited 1 time in total
Share:
Cerbera, thanks for your input on this. I don't have a proper example as I'm currently working on the CSS for a generic form template. So most of the things coming up are "what ifs?" For example, what to do with radio buttons, can we use nested fieldset etc.
The idea is to provide the CSS with HTML examples for contractors to build applications (which, when you don't get what you asked for, can be done badly).
Share: