Forms on websites are powerful tools for gathering valuable information. Whether you're making a purchase, subscribing to a newsletter, or applying for a job, forms are ubiquitous. However, for blind users who rely on screen readers, these forms can pose significant challenges if not designed with accessibility in mind. In this blog post, we'll explore common accessibility pitfalls in form design and offer practical solutions to create forms that everyone can use effortlessly.

Illustration of two hands holding smartphones displaying news articles, surrounded by icons of communication such as a megaphone, envelopes, a thumbs-up, and speech bubbles.

The Importance of Descriptive Labels

Illustration of a woman holding a 'Yes' bubble in one hand and a 'No' bubble in the other, with a questioning expression and a speech bubble with a question mark above her head.

Forms often contain various elements like text boxes, dropdown menus, radio buttons, and checkboxes. For screen reader users, the labels assigned to these elements are crucial. These labels are read aloud, so they must clearly describe the element's purpose and include any necessary instructions.

For instance, if a set of radio buttons is merely labelled “yes” and “no,” a screen reader user won't understand what these choices relate to. While there might be text above the element visually explaining its function, screen reader users often navigate using quick keys or lists of form components, bypassing the surrounding text. To make your forms accessible, ensure all elements have clear and descriptive labels. Instead of “yes” and “no,” use “Yes, I want to be contacted” and “No, I do not want to be contacted.” This clarity helps users make informed decisions.

Annotating Mandatory Fields

Illustration of a person holding a giant pen, filling out a large form with checkboxes, text fields, and signatures, with a plant in the background.

Not every field in a form needs to be filled out, so it's essential to clearly indicate which fields are required. This can be done by adding an asterisk (*) or the words "required" or "mandatory" to the form field label. If you use an asterisk, explain its meaning at the form's beginning.

Without mandatory annotations in the form label, screen reader users might struggle to identify required fields, forcing them to navigate across the page to look for annotations, adding complexity. Including the required field annotation directly in the form label simplifies this process and enhances accessibility.

Handling Form Errors Effectively

If a user submits a form with errors or incomplete fields, they need to be promptly informed about these issues and their locations. Upon submission, shifting the user's focus to a list of errors on the form helps them understand the number and location of the errors.

For enhanced error handling, provide a “same page link” that directs the user straight to the error. This direct navigation aids users in correcting errors quickly. If a user's focus remains on the “submit” button after submission, screen reader users may not be aware of errors even if visual error messages are present. Shifting focus to a summarised error list significantly improves usability.

Making Captchas Accessible

Many of us have encountered Captchas, those tests designed to separate humans from bots. As Captchas become more sophisticated, they must also remain accessible. The simplest and most accessible Captcha is a checkbox stating that the user is not a robot.

Visual Captchas, like selecting images with traffic lights, can be problematic for screen reader users who can’t see the images. Many Captchas now offer an audio alternative, where users listen to a short clip and enter the words they hear. This option balances security with accessibility.

Simplifying Date Entry

There are several ways to enter dates on a form, and some are more accessible than others. Using a calendar widget can be confusing if not correctly implemented. For instance, pressing “Enter” on a date field might bring up a table further down the page without the user realising it.

Improve accessibility by alerting users when content changes, such as when a table appears. Additionally, label dates clearly with both the day and month (e.g., “1 January”) to ensure users know the exact date they are selecting. A straightforward alternative is to provide an empty text field with date format instructions, allowing users to enter the date manually, which is often the simplest method for screen reader users.

Illustration of two people interacting with a large calendar and clock, one pointing to June 2nd on the calendar and the other adjusting the hands of the clock, symbolizing scheduling or time management.

Conclusion

Creating accessible forms is essential to ensure all users, including those who rely on screen readers, can navigate and complete forms with ease. Following the steps in this blog, you can design forms that are WCAG compliant and user-friendly for everyone. Remember, accessibility isn’t just about meeting legal requirements—it’s about creating inclusive and enjoyable experiences for all.

Forming Good Habits: Creating Accessible Forms