Accessible Forms

Why it Matters |   How To... |   Testing |   Guidelines

Why it Matters

Screen reader ] users need to be able to tab through a form and understand the purpose of each form element. If the form is not designed properly screen reader users may have problems understanding which text label describes each form field. They may be unsure which fields are compulsory and how the fields are grouped. If the form elements cannot be identified when users try to complete the form, they can experience problems, potentially reducing the submission of information and causing fustration.

Labels need to be added to ensure that users with screen readers know what each form field is for by using the appropriate tag. By grouping the information they can also increase the usability for mainstream users by improving the layout of the form. Grouping is done by adding the fieldset tag and also the legend tag to label the group.

[return to top]

How To...

The following guidelines should be adhered to:

  • All form elements should have an associated label
  • Labels should appear before most form controls but after checkboxes and radio buttons
  • Compulsory fields should be identified
  • Form items should be grouped using fieldset and legend tags

Details on how to do this can be found in the following articles:

[return to top]

Testing

Accessibility toolbars provide a number of ways to examined and test the accessibility of forms. In particular you checking if any form controls have missing labels. Using a screen reader is also helpful [return to top]

Guidelines

10.2: 12.3 12.4:

Checkpoint 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.

Checkpoint 12.3 Divide large blocks of information into more manageable groups where natural and appropriate.

Checkpoint 12.4 Associate labels explicitly with their controls.

[return to top]