Web Accessibility Checker : Check Details

Element

input

Error Type

Potential

Guidelines

BITV 1.0 (Level 2)
Level 1
10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
Stanca Act
Requirement 14: Form Labels
WCAG 1.0 (Level AA)
Priority 2
10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
WCAG 1.0 (Level AAA)
Priority 2
10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
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 input elements, type of "radio", have a label that is positioned close to the control.

Error

input element label, type of "radio", is not positioned close to control.

Short Description

input element with a type attribute value of "radio" must have an associated label element positioned close to it.

How To Determine

Question	Does input field with type "radio" have a label positioned close to it?
PASS	Label is close to input field with type "radio."
FAIL	Label is not close to input field with type "radio."

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "radio".
2. View the input element within the document and check the positioning of its label.

Expected Result

1. All input elements, type of "radio", have a label that is positioned close to the control.

Failed Result

1. Position the label close to the control.

Examples

Pass Examples

Label is close to radio button control.

<?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>Testfile - Check #125.2 - Negative</title>
</head>
<body>
<p>Select your favourite animal using the form below:</p>
<form action="http://www.example.com" method="post">
<table>
<tr><td><input type="radio" /></td><td>dog</td></tr>
<tr><td><input type="radio" /></td><td>cat</td></tr>
<tr><td><input type="radio" /></td><td>polar bear</td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>

Fail Examples

Label is not close to radio button control.

<?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>Testfile - Check #125.1 - Positive</title>
</head>
<body>
<p>Select your favourite animal using the form below:</p>
<form action="http://www.example.com" method="post">
<table width="100%">
<tr><td><input type="radio" /></td><td align="right">dog</td></tr>
<tr><td><input type="radio" /></td><td align="right">cat</td></tr>
<tr><td><input type="radio" /></td><td align="right">polar bear</td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>