Web Accessibility Checker : Check Details

Element

form

Error Type

Known

Guidelines

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

Requirement

All radio button groups are marked using fieldset and legend elements.

Error

Form missing fieldset and legend to group multiple radio buttons.

Short Description

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

How To Repair

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

Steps To Check

Procedure

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

Expected Result

1. All radio button groups are marked using fieldset and legend elements.

Failed Result

1. Add fieldset and legend elements to groups of radio buttons.

Examples

Pass Examples

radio button 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" />
<title>OAC Testfile - Check #168 - Negative</title>
</head>
<body>

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

</body>
</html>

Fail Examples

radio button 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>OAC Testfile - Check #168 - Positive</title>
</head>
<body>

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

</body>
</html>