Check a Page
id for form control element
(Referring UWEM Test: 12.4_HTML_01)Test info
Failure cause
Found form control element without id attribute.
The inspected element is a
- select,
- textarea, or
- input
form control element with the id attribute undefined.
Why this may be a barrier
To be identifiable all form controls must have explicitly associated labels. This relationship between form controls and labels is defined in the underlying HTML using the id attribute.
Good Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: DEFINED ID-ATTRIBUTES for form controls</title></head>
<body><form><label for="name">name:</label></form>
<input type="text" name="name" id="name">
<br>
<label for="email">email:</label>
<input type="text" name="email" id="email"></body>
</html>
Solution
Define the id attribute for the form control elements.
References
Related WCAG 1.0 Checkpoint
12.4"Associate labels explicitly with their controls." [Priority 2]
WCAG 1.0 Checkpoint 12.4Referring UWEM Test
12.4_HTML_01This test is targeted to find form control elements without id.
Examples
-
Identifying form elements
In the bad example, the input fields are not identifiable, because they don't have an id.
Once ids are assigned to the elements, they can be labelled to define the correllation between the elements and their descriptions.
<body><form action="evalForm.php" method="post">
Email:<input type="text" size="30" name="email" /><br />
Receive updates:
<input type="checkbox" name="updates" /><br /><input type="submit" value="Send" />
</form></body>
<body><form action="evalForm.php" method="post">
<label for="email">Email:</label><input type="text" size="30" name="email" id="email" /><br />
<label for="updates">Receive updates:</label>
<input type="checkbox" name="updates" id="updates" /><br /><input type="submit" value="Send" />
</form></body>
