Web Accessibility Checker : Check Details

Element

form

Error Type

Potential

Guidelines

WCAG 2.0 (Level A)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.1 Error Identification (A)
WCAG 2.0 (Level AA)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.1 Error Identification (A)
WCAG 2.0 (Level AAA)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.1 Error Identification (A)

Requirement

All form submission error messages identify any empty required fields.

Error

Form submission error messages may not identify empty required fields.

Short Description

Helps the user to visualize how content has been structured and how to navigate back to previous Web units, and may identify the current location within a series of Web units.

How To Determine

Question	For all form submission error messages, are required fields identified?
PASS	Required fields are identified in all form submission error messages.
FAIL	Required fields are not identified in all form submission error messages.

Steps To Check

Procedure

1. Check all forms in the document.
2. Fill out the form leaving required fields blank and submit the form.
3. Check that an error message is returned identifying the empty mandatory fields.

Expected Result

1. All form submission error messages identify any empty required fields.

Failed Result

1. Modify the form submission error messages so they identify any required fields.

Examples

Pass Examples

Form submission error message identifies required fields.

<?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 #267.2 - Negative</title>
</head>
<body>

<p>Assume the form below was submitted to the server and has now been returned with an error message.</p>

<p><strong>Error:</strong> First name and last name fields were incomplete.</p>

<form action="http://www.test.com">

<p>
<label for="firstname">First Name (required):</label>
<input type="text" id="firstname" /><br/>
<label for="lastname">Last Name (required):</label>
<input type="text" id="lastname" /><br/>
<label for="colour">Favourite Colour:</label>
<input type="text" id="colour" /><br/>
<input type="submit" value="submit"/>
</p>

</form>

</body>
</html>

Fail Examples

Form submission error message does not identify required fields.

<?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 #267.1 - Positive</title>
</head>
<body>

<p>Assume the form below was submitted to the server and has now been returned with an error message.</p>

<p><strong>Error:</strong> Form submission incomplete.</p>

<form action="http://www.test.com">

<p>
<label for="firstname">First Name (required):</label>
<input type="text" id="firstname" /><br/>
<label for="lastname">Last Name (required):</label>
<input type="text" id="lastname" /><br/>
<label for="colour">Favourite Colour:</label>
<input type="text" id="colour" /><br/>
<input type="submit" value="submit"/>
</p>

</form>

</body>
</html>