Accessible Forms: How to Best Create Them | Compliant

These days, web designing with accessibility in mind is standard practice — at least it should be. Millions of Americans live with some form of disability.

Even with accessibility standards, some web elements simply get overlooked or pushed to the back of the priority line during the design process.

Forms are one of those elements. Many see them as the boring elements of a website, so they don’t get much attention. But, creating accessible forms is just as important when it comes to equal access for those with disabilities.

What Is an Accessible Form?

On a web page, forms are literally the linchpins of most ecommerce interactions, social interactions, and modes of capturing important information; they allow a user to enter data on the web page (e.g., ordering a product).

Web users can fill out required fields on forms using checkboxes, a radio button (or option buttons), or text fields. On the backend of the web page, forms are enclosed in the HTML element (e.g., <form>).

But, in terms of design, forms aren’t exactly the crown jewel of the website. Form accessibility often gets overlooked. But, failure to create accessible forms can put up unnecessary barriers for those with disabilities.

For example, one study found that roughly 70 percent of websites were inaccessible for individuals with visual impairments due to critical accessibility blockers, such as missing form and button labels. These seemingly minor elements can lead to a loss in revenue if input fields impede the ability to complete a purchase.

Many individuals with visual impairments rely on assistive technologies, such as screen readers to interpret information on a website. In one WebAIM survey, screen reader users found complex forms problematic on most websites.  

An accessible online form helps remove these barriers for users with diverse abilities, whether individuals with visual impairments, cognitive disabilities, or navigating the web from a keyboard.

Accessible forms should be easy to understand, complete, and submit for all visitors. To be considered accessible, the form instructions, the cues, required form fields, and field formatting requirements should be identifiable.  

What Should I Keep in Mind When Creating Accessible Forms?

The good news is that you don’t have to fly blind when creating accessible forms. The standard for web accessibility can be found in the Web Content Accessibility Guidelines (WCAG), created by the World Wide Web Consortium (W3C). The WCAG provides success criteria and standards for form concepts.

It is important to understand the basic elements of a form to make it as accessible as possible. There are three basic components:

• Structure – This may include the ordering for fields or particular form fields.

• Input fields – Inputs include various form inputs (input ID), such as text fields.

• Label – Simply tells a user what the input field means and helps them navigate.

Let’s take a look at some other important aspects of creating accessible forms.

Ask Whether the Information Is Accessible

The form information itself must be accessible to all users. One way to do this is by providing clear visual labels, not relying on placeholder text, which tends to be poorly colored and lacking in sufficient contrast.

Low contrast form fields can be problematic for those with visual impairments, such as low vision. Plus, assistive technologies like screen readers normally don’t detect placeholder texts. The content must be easily perceived and discoverable; avoid hover states for label descriptions as well. Hover states are a barrier to those who rely on screen magnifiers.

Also, it is important to provide clear form instructions to help users understand how to complete the form, how to use form control (e.g., tab key or keyboard shortcuts), and form submission.

Structure the Information

The structure of the information must be clear in the presentation. Labeling and form fields should follow a logical sequence to avoid confusion. You must ensure that both the reading and navigation order are logical and intuitive for the user.  

An issue can arise if layout tables are used since they do not have logical headers in standard HTML. But, using CSS does provide greater flexibility when it comes to layout. Typically, layout tables are not used in HTML5 code.

In short, the layout table must be linear on the backend within the code to not present a barrier to screen readers. Test this by following the tab order to see if it follows a logical sequence of information.

For multi-step forms, make sure you utilize prompts or a process indicator to display sequential progress throughout the form. This helps the user know what’s been completed and what remains.

PDF forms fields are notorious for being out of order. Creating accessible Adobe PDF forms using Adobe Acrobat Pro would require its article.

Keep Things as Simple as Possible

In the world of accessibility, less is more. Some designers believe this sacrifices styling. But, focus styling doesn’t have to limit design. It provides a better way to keep information clear.  

Following a logical order, as discussed above, helps keep things simple. Also, providing form validation helps avoid confusion. This could be providing users with options to undo changes, confirm data entry in corresponding form fields, or using notifications like an error message to help correct mistakes.

Also, it is good to chunk longer forms in smaller sections to keep the presentation simple and reduce cognitive load. Reducing content into sizable chunks can help users with cognitive disabilities.

Use Active and Passive Voice

In grammar school, we were taught that active voice means a sentence has a subject that acts upon its verb, while passive voice means the subject is the recipient of the verb’s action. So, which is better for accessible forms?

Well, the WCAG recommends using active voice for documents written in English; these tend to be shorter and easier to understand. But, some believe that passive voice is good for headings. Either way, the point is this: Verb tenses should be used consistently.

Add Alt Text and Hypertext

Adding alternate texts (alt texts or alt attributes) to images on web pages is a must. But, these also help to identify the purpose of non-text content, which includes controls and user inputs.  

Also, standard hypertext links should be utilized in lieu of drop-down menus to ensure keyboard navigation usability if found within the forms.

Use Controls in Groups

The WCAG also recommends grouping controls by using fieldsets or legend elements to help associate related form controls. Grouping controls make forms more understandable for users, which is one principle of accessible design. It helps make related controls easier to distinguish.  

Also, grouping controls allow individuals to focus on smaller, more manageable groups (e.g., chunking). This is done visually on the form and within the code, using <fieldset> and <legend> elements.

Try Separators, Fieldset, and Labels

Of course, certain tags can be used in the HTML to separate or chunk content within the forms. Fieldsets were mentioned above; these are primarily used to enclose related form controls.

Labels are also important. Label controls are used to identify all form controls, including checkboxes, radio buttons, and text fields. They describe the purpose of the form control.

ARIA labels (aria-label attribute) should be utilized if you visually indicate an element’s purpose, e.g., a button that uses a graphic instead of a text. This can help provide instruction for screen readers.

Within the code, an aria-described by attribute tells the screen reader to use the matching input as a description. For example, the screen reader might announce that MM/DD/YYYY correlates with the ID attribute “DOB.”

Of course, ARIA labels can be much more complex.

Why Should I Use Accessible Forms?

Forms can be cognitively and visually complex for some users. Creating accessible forms simply makes the process easier for everyone, especially for those with disabilities.

Those with cognitive disabilities will benefit from a simpler layout structure, while those with visual impairments who use assistive technology will better identify and understand form controls.

All in all, accessible forms are good practice for everyone.

Conclusion

Forms are prevalent in the digital environment. They are used to capture information, order products, and so much more.

However, they are typically at the bottom of the list when it comes to design and accessibility. Accessible forms help mitigate the barriers that some individuals with disabilities face when filling out forms online.

Yes, creating accessible forms can help improve your bottom line, but more importantly, it opens the door to equal access for all.