VI. How To?

6.4. Page Design

6.4.4. Forms

There are two kind of accessibility problems with forms on the Internet, those problems depends on the type of disability the user may have.

In the case of blind people, the problem encountered with forms is quite close to the one encountered with tables, a blind user is not able to see the fields and their label; and if the HTML code does not clearly link the labels to the fields, or if no label are specified, it may be difficult for the blind user make sure he or she is filling in the right field.

<form action="#" method="post">
 <p>Salutation:
  Miss <input type="radio" name="field1" value="1">
  Mrs <input type="radio" name="field1" value="2">
  Mr <input type="radio" name="field1" value="3">
 </p>
 <p>Surname: <input name="field1" type="text"></p>
 <p>Forename: <input name="field2" type="text"></p>
</form>

This form will be difficult for a blind person to fill in because the input fields are not linked to any label, in this case, Jaws will not be able to says which radio correspond to which label. The Blind user may thus not be able to select the right salutation for example.

By specifying a label tag, associated to the input one, via the use of for and id attributes, the link between the field and its label is clear.

<form action="#" method="post">
 <p>Salutation:
  <label for="miss">Miss</label> <input type="radio" name="field1" id="miss" value="1">
  <label for="mrs">Mrs</label> <input type="radio" name="field1" id="mrs" value="2">
  <label for="mr">Mr</label> <input type="radio" name="field1" id="mr" value="3">
 </p>
 <p><label for="surname">Surname: </label><input id="surname" name="field1" type="text"></p>
 <p><label for="forename">Forename: </label><input id="forename" name="field2" type="text"></p>
</form>

In the case of seeing people, forms can also represent an accessibility problem that could be assimilated to a usability or ergonomic problem: if the form is complex and difficult to understand people with learning difficulties may not be able to fill it in properly. Indeed, the accessibility of a form does not only reside in its code, the way the fields are organised or the way the filling errors are indicated can be disturbing to some users.

Good practices, in the conceptions of accessible forms, thus consist in making sure that the logical order of the route between fields is not broken by the inappropriate use of the tabindex attribute (because new fields have been added without modifying the existing tabindex route, for example); that the errors made by the users are clearly identified and explained; that fields are wide enough for the user to read its content without needing to move along the field...

Page Top