Why ensuring HTML form accessibility should be the norm in web design. Your forms should help everyone
There’s a vital section of web users that designers often overlook: those with disabilities. HTML forms are a huge part of what makes the Web the most critical tool available to the disabled community – they can be (and frequently are) the only way that people can do things like book tickets, check bank balances or pay bills. And yet, even by the standards of accessible design, HTML form accessibility is neglected and rarely considered an integral part of good user experience design.
11 Tips to build accessible web forms
Have you ever thought about building accessible forms for your website? Have you wondered how? The following tips will help you build more user friendly forms and understand what people with a visual impairment may face when filling them out.
1. Add descriptive labels to all fields
Adding labels to your form makes it easier for your user to understand and fill out. This will also increase form completion rate.Labels are essential for users with cognitive impairments or who have trouble remembering what information they need to enter into a field.
Labels are especially important for people with motor disabilities who rely on speech recognition software or other assistive technology to seamlessly navigate the web. These users need the ability to quickly and accurately identify the purpose of each field before they can confidently fill out a form.
2. Use placeholder text that describes the field
Placeholder text is the text that sits in form fields when they’re blank. It’s also referred to as ghost text or hint text, and it vanishes as soon as a user clicks on the field, or starts typing.
Placeholder text is a core component of a form’s design. It provides basic guidance to users who might not understand what information should go in a given field, and it can even be used for branding purposes.
3. Use helper text to give additional details, error messages, etc.
Helper text is used to clarify the meaning of a form field and provide guidance, recommendations, and examples on how to complete it. It should be clear and concise, using simple language and sentence structure. Helper text can also reinforce brand voice and tone.
When you have a complicated or lengthy form, helper text is necessary to give users hints about what they need to enter into each field. For example, if your form requires a phone number in a specific format, the helper text would give an example or explain the format so that users know how to enter the information correctly.
4. Make buttons clearly identifiable and differentiated from other elements on the page.
Buttons need to be clearly identifiable and differentiated from other elements on the page. This is particularly important in web forms.
By default, when you create a button element in HTML, browsers will style it the same as a hyperlink. The problem with this is that hyperlinks have been styled as underlined text for decades, so users have become conditioned to recognize them as navigational controls. When you use an underlined button to submit a form or perform an action, it’s easy for users to overlook it because they’re looking for a link or something that sticks out more from the rest of the content on the page.
To avoid this problem, all buttons in web forms should be styled differently from other elements on the page, such as links and headings, so that they stand out and users can identify them easily without having to read the surrounding text or look around for it.
5. Ensure buttons accurately describe the action they will complete
It’s a common mistake for designers to design buttons that don’t accurately describe the action they will perform. There is no substitute for testing your form in browsers and on devices to ensure that all the buttons accurately describe what they are supposed to do.
You should also ensure your form includes a large, legible button next to each field. This ensures that people can quickly get an idea of the action they need to take once they reach the result page.
6. Allow keyboard users to complete actions using the Enter key
For sighted users, the Enter key on a keyboard has many functions. For example, it can be used to submit a form, open a folder or file, open a drop-down menu on a website, or play the selected media in an application.
The Enter key is even more important for keyboard users who are unable to use or have limited use of a computer mouse. When using only the keyboard, it is not always possible to click on items with the mouse. Without being able to complete an action using the Enter key, someone would have to navigate through every element on the page using only the tab key until they find what they are looking for. Some forms have hundreds of fields and this process could take quite some time.
7. Ensure logical navigation order for screen reader users
There are many reasons why you should ensure logical navigation order in web forms for screen reader users, but the biggest is to make sure that the user is able to fill out the form in a logical and sequential order.
The main reason behind this is that read order is determined by the position of an element on the page rather than being assigned a tab index value. This means that elements that are positioned lower on the page are accessed last.
If a screen reader user experiences a form with illogical ordering, they will encounter multiple instances where they will need to go back over areas of content that they have already passed through. This can be extremely frustrating for users and will deter them from completing their intended task.
8. Only include form fields that are mandatory when they actually need to be completed
When you have a web form on your site, you might have mandatory fields. These are the fields that a user must fill out before they can submit the form.
The problem is that many web forms have mandatory fields that don’t need to be completed. You see this in contact forms all the time, where there’s a field for address and telephone number, but those fields don’t actually need to be filled out.
It’s important to include only form fields that are mandatory when they actually need to be completed. Otherwise you’re going to end up with more incomplete submissions and fewer leads.
9. Be consistent with the layout of your form
You know how it feels when you’re on a business website and then the form is totally different? It can be a jolt, especially if you were in the middle of filling out a form. It’s annoying because it makes you wonder what other surprises might lie ahead.
The layout of forms is especially important because when users are filling out information, they don’t want to have to stop and figure out where everything goes. Consistent layout makes things clearer for the user, which helps reduce friction and lead to higher conversion rates.
10. Avoid using Captcha
Captcha isn’t something that works for all users, even those who don’t have disabilities. While it may work for the majority of your audience, it won’t necessarily work for everyone. For example, if a user is visually impaired, they’ll typically use a screen reader to access your website. The screen reader announces the contents of web pages to the user, just as it would announce any other element you’d find on a website.
When users encounter a Captcha in this way, they’ll be told there is an image and asked to type what they see in a text box. This can be quite difficult as screen reader users are still only able to explore websites visually through their eyes and ears. They can’t see what the image looks like or discern any patterns or shapes in them. As such, they often require assistance from another human being — someone who can look at the image and tell them what letters are present so they can type them into the form correctly.
We wrote an entire article about Captcha alternatives and how to implement them. Read it here: https://formx.stream/blog/captcha-alternatives/
11. Make sure there’s a contrast between texts and background colors
Color contrast is important because it increases the readability of the text. If a background color is too close to the font color, then it’s harder for the user to read what’s on the page.
When you’re designing a form, you should definitely pay attention to color contrast. Text fields are often used to gather information from users, and if they can’t read what you’re asking them for, that’s a usability problem.
An easy way to check your color contrast ratios is with a tool like this one from WebAim. It will even tell you if your contrast ratio meets accessibility standards.
Leave a Reply