Web Accessibility Checker : Check Details

Element

input

Error Type

Known

Guidelines

BITV 1.0 (Level 2)
Level 2
9.4 Create a logical tab order through links, form controls, and objects.
WCAG 1.0 (Level AAA)
Priority 3
9.4 Create a logical tab order through links, form controls, and objects.

Requirement

All input elements, type of "checkbox", have a valid tab index.

Error

input element, type of "checkbox", missing a tab index.

Short Description

input element that contains a type attribute value of "checkbox" must have a tabindex attribute.

How To Repair

Add a tabindex attribute to your input element.

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "checkbox".
2. Check if the input element contains a tabindex attribute.
3. Check if the tabindex attribute value contains one or more characters.

Expected Result

1. All input elements, type of "checkbox", have a valid tab index.

Failed Result

1. Add a valid tabindex attribute value to the input element.

Examples

Pass Examples

Checkbox input element has valid tabindex attribute.

<?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 #141.2 - Positive</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<p>
<label for="name">Name</label>: <input type="checkbox" name="name" id="name" tabindex="" />
</p>
</form>
</body>
</html>

Fail Examples

Checkbox input element does not have tabindex attribute.

<?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 #141.1 - Positive</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<p>
<label for="name">Name</label>: <input type="checkbox" name="name" id="name"  />
</p>
</form>
</body>
</html>