Web accessibility and forms
Forms are an important part of any web application. They encourage user interaction and are often key features of the site. Here's a brief view on how to make sure your forms are accessible for everyone.
What is web accessibility?
Accessibility issues on the web concern large groups of people with a wide variety of disabilities, ranging from visual or speech through to cognitive or neurological. But web accessibility also benefits people without disabilities. Think of someone with a slow internet connection or a small screen – or someone with temporary injuries, like a broken arm. Accessibility of websites is now a legal requirement in the UK and is covered by the Equality Act 2010. Site owners and service providers are obligated to anticipate the needs of potential disabled customers.
For people using screen readers or keyboards for navigation, the HTML markup essentially is the web experience, which makes semantic markup a key priority. Once you have your elements in order it's important not to compromise the core building blocks of your application for sighted users' experience by using excessive CSS and Javascript. Someone with cognitive disabilities will require clear instructions and user notifications and someone with their dominant hand in a cast will appreciate large click areas.
How to ensure your website forms are accessible:
Form markup
Whenever possible, use the <label> element to associate text with form elements explicitly. Use for attribute to connect label to form element. The for attribute must match exactly the id of the form element. Using the for attribute on the label also increases the click area. This comes as a benefit for all users when for example radio button or checkbox click area includes the label as well as the actual input area.
Remember to use grouping controls <fieldset> and <group> to associate related form controls.
<fieldset>
<label for='name'>Name</label>
<input type='text' name='name' id='name'>
<label for='email'>Email</label>
<input type='email' name='email' id='email'>
</fieldset>It is also possible to have the input inside the label tag if the form control cannot be labeled explicitly, however this is not supported quite as well by assistive technology.
<label>
<span>Subscribe to newsletter</span>
<input type="checkbox" name="subscribe">
</label>ARIA-labels
aria-label is another label attribute. The aria-label is invisible and designed to be read by assistive technology. It can be used when it's not possible to use a visible label.
<input type='text' name='search' aria-label='search'>
<button type='submit'>Search</button>aria-labelledby is similar but it directly refers to the form control's id.
<input type='text' name='search' aria-labelledby='searchButton'>
<button type='submit' id='searchButton'>Search</button>Buttons
Buttons can be either a <button> or an <input> element. Add a type attribute to indicate that this is the submit button of the form.
<button type="submit"> or <input type="submit">
Make sure that the button has a large click area, the colours have enough contrast and that focus and hover states are styled or allowed to rely on browser default styles.
Form styling
Sometimes we want to hide form labels if the purpose is obvious. Sighted visitors will be able to recognise a field by its location or a standard prompt icon on a button. As a developer you might be tempted to go for the obvious display: none; or visibility: hidden;, but using these also hides it from screen readers. A better way to create an uncluttered experience for sighted users is this solution below, which uses the overflow property and keeps all the information available for screen readers.
label {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
}Testing
After you have built your forms it's time to test them before deployment. Most devices come with an inbuilt screenreader. We often use VoiceOver, which comes as standard with Apple devices and is optimised to be used with Safari.
Google Lighthouse audit tool has a section dedicated to accessibility. You get scored on the accessibility of your markup (fe. semantic order) as well as the styles of your elements (fe. sufficient colour contrast).
It's also important to have a user test your forms. A fresh pair of eyes on a new piece of work is a very useful tool to tease out any inconsistencies or overlooked issues.
Conclusion
Keep on top of your form accessibility by keeping your forms as simple as possible in design and structure. Be aware of extra challenges posed by potential complexities of your forms. And - as with your entire site - always remember to test your forms with screen readers and with accessibility concerns in mind.
For more in depth web accessibility knowledge visit:
