Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Forms are notoriously difficult to use for even the most capable users. Online shopping carts, for example, have an abandonment rate of almost 70%, according to Baymard Institute. While many users are merely browsing and not ready to buy, Baymard found that over 40% of abandonments are due to problems with checkout form usability.
Principles of an Accessible Form
Avoid unnecessary questions
Minimize questions per screen
Provide context clues
Group related questions
Use clear input labels
Make focus indicators obvious
Help users spot and correct errors
Vocabulary
- Chunking: breaking a form into steps
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Forms are notoriously difficult to use for even the most capable users.
0:04
Online shopping carts, for example,
0:10
have an abandonment rate of almost 70% according to Baymard Institute.
0:13
While many users are mainly browsing, and not ready to buy,
0:19
Baymard found that over 40% of abandonments
0:24
are due to problems with checkout form usability.
0:28
With that in mind,
0:32
let's take a look at a working version of the form we'll be building:
0:33
a food delivery checkout form for
0:38
a restaurant called Tacos by Roscoe.
0:41
Our focus here will be the HTML and CSS that goes into the form,
0:45
rather than covering how I designed it.
0:50
However, it's critical developers learn the principles of an accessible form
0:55
to advocate for accessible solutions when meeting with designers.
1:00
The first rule of creating a usable form is to avoid asking unnecessary questions.
1:06
Many users object to providing a phone number
1:14
unless it's extremely obvious why the form recipient might need it.
1:17
But requiring a phone number can be a particular burden for deaf or
1:22
nonverbal users who, depending on the availability of Video Relay Services,
1:27
might be unable to make or receive calls.
1:33
If you're a food delivery service, and rely on phone calls to clarify orders,
1:37
that's a legitimate reason to be asking, but provide
1:43
an alternative method of contact for users who can't answer your call.
1:46
Avoiding unnecessary questions will also reduce the number of overall
1:52
form questions, which brings us to the next principle of accessible form design:
1:58
minimizing the number of questions that appear on each screen.
2:04
Limiting the number of tasks presented to the user on each screen
2:10
has multiple benefits.
2:14
In addition to faster load times–a big plus on mobile–
2:16
it helps screen-readers jump straight to the relevant information.
2:21
Correcting errors will also be easier,
2:25
since the number of fields facing the user at once will be limited.
2:29
And simplifying the presentation of information can reduce cognitive load.
2:33
In other words, the amount of information the user has to process or
2:39
remember at once.
2:45
This one task per page approach benefits all users, but
2:46
especially those with cognitive disabilities or dementia.
2:52
To further assist such users, make sure your form provides context clues.
2:57
Chunking, a term used to describe breaking a form into steps
3:04
only works if all the following are perfectly clear:
3:09
The purpose of the form.
3:14
What step the user is on.
3:17
How many tasks have been completed?
3:20
And how many steps still remain?
3:24
While users with cognitive and memory impairments
3:27
benefit most from context clues,
3:31
distracted users who may have received a phone call in the middle
3:33
of attempting to complete a mobile form will appreciate the reminder as well.
3:39
Grouping related questions visually further reduces cognitive load.
3:46
If some questions deal with personal information,
3:52
some with account information, and some with contact information,
3:56
and if it's necessary to keep each group on the same screen
4:01
rather than splitting the form into smaller steps,
4:05
make an obvious visual distinction between each group.
4:09
Using clear form labels and not just placeholder text is another
4:15
important step in guiding users through your form.
4:19
Placeholder text is sometimes used to clue the user as to what
4:25
content is expected, and how it can be formatted.
4:29
But placeholder text disappears once the user begins typing, and
4:34
the user can easily lose track of which field they were filling out.
4:39
Labels should be placed close to the field they belong to.
4:43
And on mobile screens, labels should go above the input, not beside it.
4:48
Speaking of form inputs, one of the guidelines we covered
4:55
under the Operable WCAG principle was making focus indicators obvious.
5:00
Each browser comes with its own default focus indicator style,
5:06
but the cues are pretty subtle.
5:11
Making the focus indicators stand out
5:15
will be a big help to users who can't operate a mouse or touchscreen.
5:19
Finally, you'll hopefully recall a WCAG guideline called input assistance.
5:25
Don't forget to make form errors easy to spot and correct, and
5:32
your error messaging easy to understand.
5:36
If form accessibility seems daunting, it definitely can be.
5:41
But I've included a number of resources in the teacher's notes to guide you.
5:46
And I recommend referring to them whenever your digital product needs a form.
5:51
In our next video, we'll start developing our form using HTML and CSS.
5:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up