Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do fieldset tags have any accessibility benefits?

Tags:

html

I know that a lot of the features in HTML are required for web pages to be accessible to people with poor or no sight, that special browsers can read aloud the text for these.

In order for this to work properly, you must make sure that you follow good HTML coding standards, e.g. you should make sure that your images have an alternate text, that you don't use tables for layout, etc.

But what I'm not sure about is the importance of the fieldset element to group input fields. Do the fieldset tag give any special accessibility benefit, or are they purely used for layout?

like image 616
Pete Avatar asked Feb 11 '10 09:02

Pete


2 Answers

Short answer: Yes. Structure and semantics are good.

For example.

Many screen readers have a "forms mode" in which they ignore anything that isn't related to a form.

() Cat
() Dog
() Rabbit

That is pretty meaningless

<fieldset>
    <legend>What is your favourite animal?</legend>

    () Cat
    () Dog
    () Rabbit
</fieldset>

Now the fieldset legend gives it context.

A paragraph wouldn't work — it isn't presented to the user in forms mode. A label wouldn't work — it describes a field, not a set of them. You would use a label for each of cat, dog and rabbit.

like image 73
Quentin Avatar answered Sep 19 '22 03:09

Quentin


Yes. See: http://www.alistapart.com/articles/prettyaccessibleforms/

Some screen readers will even read the legend for each label in a fieldset.

<fieldset>
    <legend>What is your favorite animal?</legend>
    <input type="radio" name="animal" id="Cat" /> <label for="Cat">Cat</label>
    <input type="radio" name="animal" id="Dog" checked="checked" /> <label for="Dog">Dog</label>
    <input type="radio" name="animal" id="Rabbit" /> <label for="Rabbit">Rabbit</label>
</fieldset>
  • What is your favorite animal? Radio button. Cat. Not Selected.
  • What is your favorite animal? Radio button. Dog. Selected.
  • What is your favorite animal? Radio button. Rabbit. Not Selected.
like image 21
Byran Zaugg Avatar answered Sep 21 '22 03:09

Byran Zaugg