4.5 Online forms
Forms can be visually and cognitively complex and challenging to use.
It is recommendable to create simple and short forms in which users are asked to enter only what is required to complete the transaction or process. Authors should avoid requesting irrelevant information that may lead users to abandon the form. Making forms accessible through improved layout structure, instructions and feedback helps persons with various types of disabilities to understand how to complete and navigate the form.
Accessibility makes forms easy to understand, fill out and submit. Clear information must be provided about how to complete the form, which form fields are mandatory, and the format of the information to be entered. Errors must be indicated clearly and in a timely manner and should be easy to recover from.
The reading and navigation order must be logical and intuitive. The use of layout tables to create columns must be avoided. It should be possible to navigate through all form elements in a logical sequence using the tab key. It is important to ensure that forms can be understood and operated using the keyboard alone; this can be achieved by avoiding the use of JavaScript for operations such as setting focus, changing form elements or submitting forms.12
There are several techniques that can be used to make form controls accessible: 13
Labels: To create accessible online forms, it is important to make sure that all form fields are correctly labelled so that screen reading software can let users know what each form field is asking for. In general, form elements have labels that may be evident to sighted users because they are placed next or close to the field. Screen reader users cannot rely on such visual cues; labels must therefore be explicitly associated with form fields in the HTML code. Form labels must identify the kind of information required in each field and should be provided for all form fields (text fields, checkboxes, radio buttons and drop-down menus). | |
Grouping controls: For groups of related fields, such as radio buttons and checkboxes, each form field must have a label as described in the previous section. The <fieldset> and <legend> elements must be used to group and describe the purpose of related form fields in order to provide necessary context. | |
Form instructions: Provide instructions to help users understand how to complete the form and use individual form controls. | |
Validating input: Validate input provided by the user and provide options to undo changes and confirm data entry. | |
User notifications: Notify users about successful task completion and any errors, and provide instructions to help them correct mistakes. | |
Multi-page forms: Divide long forms into multiple smaller forms that constitute a series of logical steps or stages, and inform users about their progress. | |
Custom controls: Use stylized form elements and other progressive enhancement techniques to provide custom controls. | |
Time limits: Avoid subjecting forms to a time limit in order to allow users to complete the form at their own pace. If, for security reasons, a time limit needs to be put in place, the user should be given the option to turn it off or extend it. |
It is worth mentioning that, on many websites, forms make extensive use of PDFs or other documents; these forms not only tend to have accessibility issues but may also be harder to use and could take longer to process than online HTML forms.
In general, forms in PDF and other document formats are easier to create than online HTML forms, especially as the persons creating them often are generalist users and not digital experts. However, PDF-based forms can be problematic from an accessibility standpoint, as they behave inconsistently with assistive technologies such as screen readers and magnifiers.14 The fields in a PDF form often do not read in a logical sequence. The reading order must therefore also be tested with the tab key to make sure that it follows a logical sequence.
Finally, Completely Automated Public Turing Test to Tell Computers and Humans Apart (CAPTCHA) fields are sometimes placed in online forms to determine if the user is really a human and thus prevent algorithms from automatically submitting forms. CAPTCHA fields are often inaccessible to blind and dyslexic users, among others. Audio CAPTCHA fields are sometimes provided as an alternative for such users, but they, in turn, pose barriers for deaf-blind users. The W3C Web Accessibility Initiative provides guidance on alternatives to the use of CAPTCHA.15