Online Web Forms
From the basic site search function that may be on your web site to larger online forms, ADA compliance needs to be considered. Allowing people who are sight or hearing-impaired to use assistive technology to view and fill out the forms on your web site is just the right thing to do.
Below you will find a list of questions with pointers, that you can use to review while making your forms compliant.
Is your form set up correctly?
- All forms should include instructive text at the beginning of the form. This includes any necessary instructions and cues. This text should be in an aria-describedby=””
- The form should be set up in a logical reading & navigation order, which is usable and understandable. This includes any controls, labels and functionality. Also the form should be able to be completed and submitted using the keyboard or via assistive technology.
- Any tables should have a summary which should be contained in a aria-describedby=””.
Are there links on your form? If so, can they be activated using the keyboard?
- As noted above, all form functions and links should be should be usable & navigable (using the tab key) through the keyboard.
Do all fillable fields have labels associated with them?
- Placeholder text for forms and other inputs (for example, a search bar) is not enough alone for assistive technology to pick up on. All fields should be using either a label=”” or title=”” attribute in conjunction and placed immediately to the left of the fillable field.
- Labels should be unique for each field and not used on more than one field. This is due to screen readers not supporting labels that have been associated to multiple form fields or fields that have more than one label associated to them.
Does your form include checkboxes or radio buttons?
- If so, they should be grouped through association using fieldset and legend. This is so that visitors with disabilities or using a screen reader will have the legend associated with the group of elements (fieldset) read to them and the element itself.
- Single checkboxes or basic radio buttons such as male/female for gender that make sense from their labels do not require fieldset and legend,
- Nested fieldsets should generally be avoided.
Does your form have multiple select menus?
- It is recommended that multiple select menus be avoided since not all browsers provide intuitive keyboard navigation for them. Consider replacing them with multiple checkboxes which are more accessible.
Are there any images used as buttons, design elements or as the form itself?
- All images should have Alt text assigned to them just like on your website.
Scanning a PDF and posting it does not fulfill the requirement and should be converted to readable text using a OCR (optical character recognition) or rebuilt so they are accessible. That way, the text can be read by text readers. We have listed several options below with no liability, others can be found with a quick internet search.
- Adobe Acrobat Pro DC
Google Drive - An article that explains how to convert photos or PDF's to text.
Note - The image will be at the beginning of the document while the text will be below that after the conversion.
- i2OCR - a free online OCR
- An external article that reviews the Top 20 online OCR online services tool to extract text from images.
How does your form handle validation and error recovery?
- Forms should not rely on client-side validation and error recovery. This is due to some users having disabled scripting.
While there are a lot of programs that allow you to create forms for websites, which can be found with a quick internet search, we encourage the use of Google forms which are ADA compliant. To help make your Google forms compliant, consider the following tips;
- Provide an introduction to the form and any instructions in the Description box of the Google form.
- Consider activating a progress bar by clicking the gear in the upper right corner and clicking the Presentation tab and selecting the Show progress bar option. Also consider stating how many questions there are in the description box.
- If the form is large you might want to considering splitting it into different sections using the Add section option.
- Any images should have Alt text for those that use a reader.
Form Evaluation tools
There are several form evaluation tools available on the internet which can be found with a quick search. Below you will find a link to a free evaluation tool with no liability.
- WAVE or Web Accessibility Evaluation Tool - Enter the URL of the page that contains the form in the field.
- Example of properly handled forms
- Creating Accessible Forms & Usable and Accessible Form Validation and Error Recovery on WebAIM
How can I develop accessible web-based forms? - an external article on developing accessible web forms.
Compared to HTML, PDF forms have some inherent accessibility limitations. There is no real way to associate the visible text label with the form field, but there is a way to provide a text description that will be read to a screen reader while navigating through the PDF.
Below you will find a list of questions with pointers, that you can use to review while making your PDF forms compliant.
Do all of the form fields have tags and have the correct labels and markup?
- All form fields need to be tagged with Form and should should have Descriptions for those that use text readers.
- All form fields should have text next to it describing what is needed. Also include an accessible label that describes the purpose of the form field to a screen reader. This is provided through the Tooltip.
- All buttons should have a value attribute.
- Hidden input fields should not have a label element. For example, input type="hidden"
Are all of the form fields keyboard accessible and navigable?
- All form fields should be keyboard accessible and navigable by the keyboard by clicking Tab (to move through the fields) or Enter/Return (to choose a field). Test the tab order to see if it may need to be fixed.
Does the form contain multiple choice answers?
- If so, they should be grouped through association as form field sets.
- Each choice should have a value that matches the answer. Also each choice needs to have a name that is the same as the group they are part of.
Finally is the PDF script dependent or contain timed responses?
- For ADA compliance, PDFs should not be script-dependent. Especially if they interfere with keyboard navigation or prevent the use of any input device.
- Avoid using Timed Responses altogether. It creates un-necessary anxiety. If you must have Timed Responses, they should be extended so that a visitor is given enough time to read and then respond. We suggest removing time limits in forms.