Web Accessibility Cookbook

Chapter 9. Constructing Forms

Forms are an integral part of the web. Besides links, they’re the most important tool for providing interactivity to a website. They allow a user to sign up for newsletters, log into their bank account, book a hotel room, or post an idea on social media.

Form design is complex, and with complexity comes the potential for mistakes and bad decisions. I could write an entire book about the do’s and don’ts of form design. This chapter only scratches the surface focusing on the most common and significant problems users face.

9.1 Create Forms

Problem

If forms are not designed well, users may have a hard time performing critical tasks like filling out an application or contact form or ordering from an online store. Bad choices in form design affect all users, especially less savvy users and those with cognitive disabilities, motor disabilities, and low vision.

Solution

When you create a form, follow certain basic principles.

• Use native form elements, if possible.

• Use the proper form element for the intended purpose.

• Keep forms as short and straightforward as possible.

• Label and describe all fields.

• Inform users about changes to the form.

Figure 9-1 and Example 9-1 illustrate using different elements and attributes to create a simple but feature-rich form in HTML.

Figure 9-1. A simple sign-up form using labeled form fields and fieldsets