This is how to create an accessible web form
Every week for the next while, we will "strip down" a part of a website and put it under the microscope to show how to make it more accessible. Last week, we covered accessible PDFs. Now we will cover another important part: accessible forms on a website. To ensure that everyone, including people with disabilities, can understand and navigate these forms, it is essential to make them digitally accessible. Sacha gives five practical tips to get you started on creating accessible web forms.
Introduction
"Hi, I'm Sacha! I have been working at Cardan since April 2022. A large part of my time is spent on examining digital accessibility. This includes testing web forms. I also work as a consultant and conduct interviews with several clients to go over reports and answer questions."
Tip 1: preferably use standard HTML elements
Accessible web forms ensure that all users, including those with disabilities, have a good experience. Here, it is easiest if you use standard HTML elements, such as:
input fields <input>
text areas <textarea>
buttons <button>
buttons <button>
These elements are already basically interactive and work well with the keyboard and auxiliary software, for example. For more information on this success criterion, see 4.1.2 name, role, value (but it may also be relevant for other criteria).
Tip 2: make sure elements have enough contrast
It is important that everyone can clearly see the elements in a form. Therefore, make sure elements in the form are clearly visible! You can do this by ensuring that the edges of input fields, radio buttons and checkboxes have enough contrast with the background. For more information on this success criterion, check out success criterion 1.4.11 contrast of non-textual content.
Tip 3: visual focus indicator
It is important to visually indicate which field is currently active so that users know where they are in the form. This can be achieved by adding a clear visual indication, such as an outline, to the element that has the focus. This allows users to immediately see which field they are filling in.
For more information on this success criterion, see success criterion 2.4.7 focus visible.
Tip 4: use 'autocomplete'
Using the autocomplete attribute makes forms that request information about the user easier to fill in. By applying this attribute with the right value, you make it easier for software to auto-complete fields. For more information on this success criterion, see success criterion 1.3.5 identify the purpose of the input.
Tip 5: Web form accessibility testing
These are a few things you can take a look at yourself beforehand when it comes to the accessibility of your forms:
Use keyboard: test your form by using only the keyboard to ensure that all fields are accessible even without a mouse. Check that the tab order is logical and that users can easily navigate through the form.
Screenreaders: use screen readers such as NVDA, JAWS, or VoiceOver to check that all elements are read out correctly. This is essential for users who cannot see the form.
Visual feedback: check that there is visual feedback for focus and errors. Users should be able to see which field is active and where any errors are.
Validation and error messages: check that error messages really indicate where the error is, and that they are not just instructions.
By following these tips, you will ensure that your web forms are accessible to all users, regardless of their disability.
Want to know how your form scores on accessibility?
My colleagues and I are ready to examine your digital product based on WCAG 2.2 guidelines. We would be happy to help you on your way to a fully accessible form.