10 Takeaways from Building Accessible Forms

This morning I had the pleasure of attending Building Accessible Forms, a webinar hosted by AbilityNet, a United Kingdom charity that focuses on helping people with disabilities use digital technology.

Mark Walker and Robin Christopherson led the one-hour webinar and shared practical advice and tips for designing accessible forms that create better user experiences.

For any website or web application you create, you’ll likely have one or more forms. Unfortunately, poorly designed forms impact the user experience for everyone and lead to frustration and high abandonment rates.

Bad forms can be particularly problematic for people with disabilities.

By using good form design techniques and being aware of issues, you can create accessible forms that improve the user experience and decrease form abandonment for all.

What I enjoyed most from the webinar were the examples of good and poorly designed web forms. I quickly saw several areas where I can improve the accessibility of the forms I design.

Takeaways from Building Accessible Forms

Here are my top lessons learned from the webinar:

1. Set expectations.
   Tell users what they need before they start entering information in the form. And let them know how long the form will take to finish.
   
   I remember when we implemented those changes at the college for the admission application. What a change in form completion!
2. Clearly identify what form fields are required.
   If you’re going to require certain form fields, clearly state what fields are mandatory. Using a required indicator (example: asterisk)? Code the indicator within the label for each required form field.
   
   

   Another approach to consider: for greater clarity, state that all fields are required except those indicated as optional.
   

3. Properly associate labels with checkboxes.
   If labels are put in an unconventional place, the screen reader may look for the label in the wrong place.
4. Give examples of specific format.
   When data needs to be entered in a specific format, give examples or offer tips.
5. Provide summary before form submission.
   Give the user the opportunity to review the information they’ve provided before submission. Segment the form with headings for easier understanding.
6. Offer useful error messages.
   Tell the user what went wrong and how to fix it. Offer clear, easy-to-understand error messages.
   
   Provide examples to solve errors. Position form error messages at the top of page or in pop up event window.
7. Consider options other than CATPCHA.
   CAPTCHAs are problematic for many people. Instead use good spam filters. Or look at TextCaptcha as an alternative.
8. Test your forms.
   Use the Web Accessibility Toolbar (WAT) toolbar for Internet Explorer or Web Accessibility Evaluation Tool (WAVE) or WAVE Firefox toolbar to test your forms.
9. Pay close attention to mobile forms.
   On mobile devices, there are more problems building accessible forms everyone can use due to a number of factors including small screen, sunny day, scrolling, legible fonts, color contrast.
   
   Everyone is temporarily disabled when filling out a form on a mobile device: onscreen keyboard entry is difficult.
   
   Use dropdown boxes when there is limited space; checkboxes can be used for multi-select inputs.
10. Use HTML5 input types.
    HTML5 offers many custom input types— type=tel, type=date, type=email—that degrade gracefully on older browsers and devices.

As with their prior webinars, AbilityNet plans to have the webinar posted on their site. You can view the slides from the webinar on Slideshare.