Element

form

Error Type

Potential

Guidelines

  • WCAG 2.0 (Level AA)
    Guideline Group3.2 Predictable: Make Web pages appear and operate in predictable ways.
    Guideline SubgroupSuccess Criteria 3.2.3 Consistent Navigation (AA)
  • WCAG 2.0 (Level AAA)
    Guideline Group3.2 Predictable: Make Web pages appear and operate in predictable ways.
    Guideline SubgroupSuccess 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>

English | German | Italiano


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