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>
<input type="text" name="name" id="name">
<br>
<label for="email">email:</label>
<input type="text" name="email" id="email">
</form>

</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.4

Referring UWEM Test

12.4_HTML_01

This 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.

    Bad example:
    <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>
    Good example:
    <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>