Warning: this document has deliberate accessibility errors to demonstrate examples of some of the accessibility barriers on the Web.
On this form we have a collection of common coding errors.A very widespread technique to layout a form is to use nested tables in the way that labels and controls look visually tied. However, as they are logically separated one from each other, coding should be thought in terms of linearization.
If we focus on the first top part of the table "Role Related to Web Accessibility", it results in reading labels first, then their corresponding controls.
One of the techniques to solve this problem is to logically link labels and controls by using the label element. This has been done in the second part but improperly. The basic idea is to assign a unique identifier to each input, then to link it to its actual text. In this example, all text have been tied to the first checkbox control.
Another obstacle here consists in similar default texts into all drop down lists. We have to keep in mind that assistive technologies allow users to list all available fields from a page. Therefore, having several fields with the same text can be confusing as the user doesn't know to which it is actually linked.
Eventually, when tabbing throughout controls, we encounter the "go" button before having the opportunity to type in our comments. It means that
one people tabbing sequentially will never be able to reach that field. Navigation could also be enhanced by enclosing the "location information" block with the FIELDSET and LEGEND tags.
Please fill in the following form about your background:Attention: Fields in red are required!