Element

form

Error Type

Known

Guidelines

  • WCAG 2.0 (Level A)
    Guideline Group1.3 Ensure that information and structure can be separated from presentation
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)

Requirement

All checkbox groups are marked using fieldset and legend elements.

Error

Form missing fieldset and legend to group multiple checkbox buttons.

Short Description

form element content must contain both fieldset and legend elements if there are related checkbox buttons.

How To Repair

Add a fieldset and legend element to the form for each group of checkbox buttons.

Steps To Check

Procedure

1. For each form in the document, check if there are checkbox controls that contain the same name attribute.
2. If there are multiple checkbox controls with the same name attribute, check if they are contained by a fieldset element.
3. If there is a fieldset element that contains multiple checkbox controls, check if the fieldset element contains a legend element.

Expected Result

1. All checkbox groups are marked using fieldset and legend elements.

Failed Result

1. Add fieldset and legend elements to groups of checkbox controls.

Examples

Pass Examples

Checkbox group contains both fieldset and legend elements.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<META content="text/xhtml; charset=UTF-8" http-equiv="Content-Type">

<title>ATRC Testfile - Check #247.2 - Negative</title>
</head>
<body>

<form action="http://example.com/donut" method="post">
<fieldset>
<legend>Donuts Requested (check all that apply)</legend>
<p>
<input type="checkbox" name="flavour" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="checkbox" name="flavour" id="cream" value="cream" />
<label for="cream">Cream Filled</label><br/>
<input type="checkbox" name="flavour" id="honey" value="honey" />
<label for="honey">Honey Glazed</label>
</p>
</fieldset>
<p><input type="submit" value="Purchase Donuts"/></p>
</form>

</body>
</html>

Fail Examples

Checkbox group contains no fieldset or legend elements.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #247.1 - Positive</title>
</head>
<body>

<form action="http://example.com/donut" method="post">
<p>
<input type="checkbox" name="flavour" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="checkbox" name="flavour" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="checkbox" name="flavour" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label>
<br/><input type="submit" value="Purchase Donuts"/>
</p>
</form>

</body>
</html>
Web site engine's code is copyright © 2023
Inclusive Design Institute