Designer Tips: Creating Accessible Forms

Summary: This blog post will help guide designers looking to ensure the accessibility of their forms. We’ll explore three key factors in accessible form design and provide actionable tips to help boost your accessibility game.

Whether you’re trying to book a yoga class or seeking out best practices for your work, most of us immediately turn to the internet to get things done and find the information we need. Along the way, it’s not uncommon for us to encounter a standard form where we’re asked to provide our personal information to access a piece of content or sign up for an event or newsletter.

Forms have become an integral part of the digital experience. A well-designed form can help us access the things we need quickly, while a poorly designed form can lead to frustration and missed engagement opportunities. In fact, more than 67 percent of site visitors will permanently abandon your form if they encounter complications of any kind, and only 20 percent will reach out to your organization to follow up. So, to maximize conversions, it’s not enough to have a compelling call to action and an attractive layout. Your forms need to be intuitive and easy to complete for every user, including people who use assistive technologies to navigate your experience.

Want to save time and ensure accessible design?

Access our designers’ guide

We get it. Designing forms isn’t exactly sexy work. But creating engaging and accessible forms is crucial, and it doesn’t have to be difficult. In this article, we’ll go through three critical tips for designing accessible forms that can help you reduce friction on your website, app, and beyond—delivering an exceptional user experience.

1. Where you place form labels matters

It’s probably no suprise to learn that form labels play an essential role in form accessibility—without them, nobody would know what information to enter! What may be a surprise though is the importance of ensuring your labels for form fields are always visible and correctly positioned.

Generally speaking, form labels should always be placed outside of, and above, any form fields to ensure users have access to them at all times.

Placing form labels to the left of a field can also be an accessible approach, and placement to the right may also work for things like checkboxes and radio buttons.

Let’s explore why label placement is important:

• Form labels above the field remain visible even as the user completes the form so users can compare their answers to form labels at any time during the process of completing the form.
• Labels above form fields work with a wide range of field types, including text boxes and dropdowns, or for group labels in cases like radio buttons and checkboxes, to provide a consistent overall experience.
• Placing labels above form fields allows the flexibility to ensure forms can be completed on smaller screens, using touch interfaces, and when forms have been translated into other languages.

Label placement is a small detail that can have a big impact. Making a habit of placing labels outside form fields, where they remain accessible, helps ensure every form you design is an accessible form.

2. Placeholder text can hurt more than it helps

Placeholder text—or example text—is a bit like having a personal GPS for your form fields. It’s there to guide you without the need for long labels. But here’s the twist: example text implemented in the incorrect way could actually hinder users instead of helping them.

If you’re using example text, it’s essential to add it in a way that supports users as they complete your form. Generally speaking, it’s better to have example text outside of form fields rather than inside them.

Here are just a few of the issues that can arise when using placeholder text instead of field labels:

• Placeholder text that disappears as users move to that field can strain short-term memory.
• When placeholder text disappears, there is no way for users to check their work before submitting the form.
• Research shows that fields with placeholders in them are less likely to draw attention, and users may mistake placeholder text for fields that were auto-completed.
• Placeholder text doesn’t offer any indication of what users should do when error messages occur.

These issues cause difficulties for all users, but there are other issues with placeholder text that can be particularily impactful to users with disabilites.

• The default light gray color of placeholder text has poor contrast against most field backgrounds, making it difficult to perceive for users with low vision.
• Users navigating your site with a keyboard may find that placeholder text disappears when they select a field, which can lead to frustration and a poor overall experience.
• Not all screen-reading tools will read placeholder text aloud, meaning screen reader users won’t know what to enter in your form field (or even that the form exists!).

To address these challenges effectively, it’s best to avoid relying on placeholder text. Instead, use clear, visible labels positioned outside empty fields (for example, above the field, below the form label), and ensure that any hints or instructions remain persistent. If placeholder text is unavoidable, be sure to indicate to developers that the form requires a <label> with the type set as text so the content is read out to screen readers.

Does your style guide streamline accessibility?

Access our training webinar

3. Error messages should appear where users expect them

Getting an error message doesn’t make anyone smile, but it’s even worse if you can’t find the error message in the first place, and you’re left wondering what on earth went wrong.

Generally speaking, error messages could appear on any side of a field (top, bottom, left or right), or even at the top of the form. But to ensure you’re designing accessible forms, it’s best to place all error messages to the right of the field they refer to. Keeping error messages consistently on the right follows the natural reading order in many of the world’s most common languages, creating a predictable reading experience for screen reader users.

Working on mobile is the exception. For mobile experiences, form design best practices dictate that error messages should appear below fields to reduce cognitive load and follow the natural vertical reading order of the page.

Here’s how other message positions can hurt form accessibility:

• Error messages on the left
  • Breaks the natural reading order for many people
  • The leftmost side is typically reserved for the most critical elements, which in this case is the form entry field or form label.
• Error messages above fields
  • Adding an error message next to the form label, any example text, and the field itself can create added complexity in the design, and doesn’t give each element its own space.
  • Placing the error message above the field can create a less logical reading order, whereas putting the error to the right will likely follow a more helpful order of: form label, example text, the user’s entry into the field, and the error describing what is wrong.

Designing accessible forms can be easy

Now that you understand the fundamental principles behind designing accessible forms, you’re well on your way to delivering an exceptional experience for all users. Don’t forget, digital accessibility is a journey, and even a modest improvement in form accessibility is a move in the right direction. Implementing accessible form design best practices can have a significant impact for all users, and creates a better overall user experience.

Additional resources

Don’t miss out on other recent articles we’ve published about accessibility in design:

• Designer Tips: Improving Button Accessibility
• Color Blindness Accessibility: What Designers Need to Know
• Enhancing Accessibility: Link Text Best Practices