IntroUse a visible labelThe order of elementsColour contrast of form controlsDesign clear hover and focus statesMake it easily clickable!Custom styled controls can be hardFont sizeAdditional Resources:
Intro
Design a beautiful form and and make it accessible for all users, that』s what we all want. What do you need to take into account? On this page we list some of the most important topics where design, accessibility and good UX meet.
We suggest you first read the document for Accessibility for Content Providers, as a lot of that information is also relevant to designers.
Use a visible label
As highlighted in the documentation for content providers, it is worth emphasizing again here: a visible label is required for an accessible website.
It reminds the user about what to fill out.
If the form is filled with values via autofill, the user can check easily if the information is filled out correctly.
Give the user all the help you can offer to fill out a form.
The order of elements
Visitors, and especially people using a screen reader, read from the top down. So the order of the information must be logical if you read it from the top down.
For example information placed below the submit button could stay unnoticed. Place the label above or next to the form control, not below it. A label below an input field can confuse users about which label belongs to which input field.
Colour contrast of form controls
A form control, like an input field should be recognisable. Don』t make your visitor guess where an input fields is. People are used to conventions, so no need to reinvent the wheel for an important element such as a form field, as to many breaks from generally understood conventions may introduce difficulties for some of your customers.
Give a form control like an input field clear borders, with a colour contrast of 3:1 between the control and the background.
Design clear hover and focus states
Let users clearly see the on hover or on focus states for focusable elements like buttons, input fields and links. Keyboard only users need to know when an element has focus, or else they can be easily lost on a page. Make sure the state change is not just based on a color change, as color blind people may miss that change.
Make it easily clickable!
Very small buttons are harder to target with a mouse or a finger. Make focusable elements like buttons or selects, stand out. Give them room, and make them large enough to be easily clicked.
Custom styled controls can be hard
Consult your developer when you apply complex custom styling to select fields and your options, checkboxes and radio buttons. Some styling is very hard to make accessible, and a compromise may be the best way to go.
Font size
Avoid small font sizes: stick with 16px or larger wherever possible, then everyone can read the text comfortably.
Additional Resources:
Jesse Hausler: 7 Things Every Designer Needs to Know about Accessibility
Tyler Hawkins: Designing accessible forms: the 10 foundational rules
Human Made: Accessible Design: A Process
WebAIM: Creating Accessible Forms – General Form Accessibility