You can fill out a form in many ways. People might use your form on their smartphone while standing in a crowded bus, or with a screen reader, or from an old laptop. Let's see how you can ensure your form works on different devices, and in different contexts.
Ensure your form works for keyboard users
A good first test to ensure your form is accessible is to fill out your form using only your keyboard.
Open your form and try to navigate with the tab key.
Is it clear what form field is currently active?
To help users understand which form field is active,
you can use focus indicators.
Try it out.
Use your tab key to navigate to the input.
Do you see the outline when the input is active?
That's the focus indicator.
You can add focus indicators using the
:focus CSS pseudo-class.
input:focus {
outline: 4px solid #222;
}
Learn more about designing accessible focus indicators.
Help users navigate your form
Another good test of usability and accessibility is to ensure that the logical tab order follows the visual tab order. How can you test the tab order? Tab completely through your form. Do you notice any illogical navigation jumps? Make sure the DOM order matches the visual order.
Learn more about how to ensure visual order on the page follows DOM order.
Help users complete your form on touch devices
Great! You made sure your form works with the keyboard. Now, let's see how you can ensure it also works on touch devices such as mobile phones.
Open your form on your touch device,
fill in all fields and submit the form.
Did you have to tap multiple times to select a form control?
The issue may be that the tap areas are too small.
Make sure the
tap target size of a button is at least 48px,
and that each <input> and <select> is large enough to tap into.
You can also help users navigate your form on touch devices by adding enough spacing between form controls.
Ensure users get an optimized keyboard
In previous modules, you learned how to activate a different on-screen keyboard
using the type or inputmode attributes.
Open
the demo
on your phone and tap in the telephone number field.
Notice that numbers are shown by default on the on-screen keyboard,
along with other characters you may need for a telephone number.
Use type="tel" to get an on-screen keyboard optimized for entering telephone numbers.