Web Accessibility Checker : Check Details

Element

form

Error Type

Potential

Guidelines

WCAG 2.0 (Level AA)
3.2 Predictable: Make Web pages appear and operate in predictable ways.
Success Criteria 3.2.3 Consistent Navigation (AA)
WCAG 2.0 (Level AAA)
3.2 Predictable: Make Web pages appear and operate in predictable ways.
Success Criteria 3.2.3 Consistent Navigation (AA)

Requirement

The tab order specified by tabindex attributes follows a logical order.

Error

Tab order may not follow logical order.

Short Description

Provide a logical tab order when the default tab order does not suffice.

How To Determine

Question	Does the tab order follow a logical order?
PASS	Tab order follows a logical order.
FAIL	Tab order does not follow a logical order.

Steps To Check

Procedure

1. Check the HTML code to see if the tabindex attribute is used.
2. Start at the beginning of the document and view the keyboard focus change as you enter tab characters.

Expected Result

1. The tab order specified by tabindex attributes follows a logical order.

Failed Result

1. Change the tabindex values so the tab order is logical and follows relationships in the document.

Examples

Pass Examples

Tab order is logical.

<?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 #264.3 - Negative</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<p>
<input type="submit" value="submit" tabindex="1" />
</p>
</form>
</body>
</html>

Fail Examples

Tab order is not logical.

<?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 #264.1 - Positive</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<p>
<input type="submit" value="submit" />
</p>
</form>
</body>
</html>