legend for fieldset

(Referring UWEM Test: 12.3_HTML_01)

Test info

Failure cause

The inspected fieldset element does not contain a legend element.

You used a fieldset to divide form-controls into logical groups, but did not specify a label for this group using the legend element.

Why this may be a barrier

"The fieldset element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
The legend element allows authors to assign a caption to a fieldset. The legend improves accessibility when the fieldset is rendered non-visually."
W3: Adding structure to forms: the fieldset and legend elements

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with fieldset and LEGEND-ELEMENT</title></head>
<body>

<h2>Fieldset with legend</h2>
<form>
<fieldset>
<legend>Tests</legend>
<input type="text" size="40" maxlength="40" name="test1">
<br>
<input type="text" size="40" maxlength="40" name="test2">
</fieldset>
</form>

</body>
</html>

Solution

Add a context to the fieldset by adding a legend element as a child.

References

Related WCAG 1.0 Checkpoint

12.3

"Divide large blocks of information into more manageable groups where natural and appropriate." [Priority 2]
WCAG 1.0 Checkpoint 12.3

Referring UWEM Test

12.3_HTML_01

This test is targeted to find fieldsets without legend.

Examples

  • Defining a fieldset

    A fieldset groups input elements.
    The heading for a group must be defined with the legend element to indicate the meaning of the group.
    In the following bad example, the legend for the fieldset is missing.

    Bad example:
    <body>
    <form action="evalForm.php" method="post">

    <fieldset>
     
    <label for="name">Name:</label>
    <input type="text" size="30" name="name" id="name" /><br />

    <label for="email">Email:</label>
    <input type="text" size="30" name="email" id="email" /><br />

    <label for="birth">Date of birth:</label>
    <input type="text" size="10" name="birth" id="birth" />
    </fieldset>
     
    <input type="submit" value="Send" />
     
    </form>
    </body>
    Good example:
    <body>
    <form action="evalForm.php" method="post">

    <fieldset>
    <legend>Personal information:</legend>

    <label for="name">Name:</label>
    <input type="text" size="30" name="name" id="name" /><br />

    <label for="email">Email:</label>
    <input type="text" size="30" name="email" id="email" /><br />

    <label for="birth">Date of birth:</label>
    <input type="text" size="10" name="birth" id="birth" />
    </fieldset>
     
    <input type="submit" value="Send" />
     
    </form>
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide