Element

input

Error Type

Known

Guidelines

  • BITV 1.0 (Level 2)
    Guideline GroupLevel 1
    Guideline Subgroup12.4 Associate labels explicitly with their controls.
  • Section 508
    Guideline GroupN - accessible forms
  • Stanca Act
    Guideline GroupRequirement 14: Form Labels
  • WCAG 1.0 (Level AA)
    Guideline GroupPriority 2
    Guideline Subgroup12.4 Associate labels explicitly with their controls.
  • WCAG 1.0 (Level AAA)
    Guideline GroupPriority 2
    Guideline Subgroup12.4 Associate labels explicitly with their controls.
  • 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)
  • WCAG SRWSD

Requirement

All input elements, type of "radio", have an explicitly associated label.

Error

input element, type of "radio", missing an associated label.

Short Description

input element that contains a type attribute value of "radio" must have an associated label element. An associated label is one in which the for attribute value of the label element is the same as the id attribute value of the input element.

How To Repair

Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "radio".
2. The input element must have an explicitly associated label using one or more of the following methods.
3. The input element has an id attribute value that matches the for attribute value of a label element.
4. and/or
5. The input element has a title attribute.
6. and/or
7. The input element is contained by a label element.

Expected Result

1. All input elements, type of "radio", have an explicitly associated label.

Failed Result

1. Create a label element for the input element and associate these elements using the ID and for attributes.
2. and/or
3. Add a title attribute to the input element.
4. and/or
5. Add a label element that contains the input element.

Examples

Pass Examples

input element has an associated label using label element.
<?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 #121 - Negative</title>
</head>
<body>
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="dogradio">Dogs:</label> 
<input type="radio" id="dogradio" name="choice1" tabindex="1" />
</p>
</form>
</body>
</html>

Fail Examples

input element does not have associated label.
<?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 #121 - Positive</title>
</head>
<body>
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label>Dogs:</label> 
<input type="radio" name="choice1" tabindex="1" />
</p>
</form>
</body>
</html>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API