Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Accessibility for UX Designers

Well done!

You have completed Accessibility for UX Designers!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Form Accessibility

6:47 with Anwar Montasir

Forms are notoriously difficult to use for even the most capable users. Before we open Figma, let’s examine the components of an accessible form.

[MUSIC] 0:00
Forms are notoriously difficult to use for even the most capable users. 0:05
Online shopping carts, for example, have an abandonment 0:10
rate of almost 70%, according to Baymard Institute. 0:15
While many users are merely browsing and not ready to buy, Baymard found that 0:20
over 40% of abandonments are due to problems with checkout form usability. 0:26
In the final stage of this course, 0:32
we'll be using Figma to build a mock-up of an accessible form. 0:35
We'll cover form design accessibility principles and 0:40
take a look at resources to guide us. 0:44
And by the end of this stage, 0:46
you'll be better prepared to communicate accessibility concerns to 0:48
your development team as you reach the designer-developer handoff. 0:54
Before we open Figma, let's examine the components of an accessible form. 0:59
One critical principle when you're in the planning stage 1:06
is to avoid asking unnecessary questions. 1:10
Many users object to providing a phone number unless it's extremely 1:14
obvious why the form recipient might need it. 1:19
But requiring a phone number can be a particular burden for 1:22
deaf or nonverbal users who, depending on the availability of 1:27
Video Relay Services, might be unable to make or receive calls. 1:32
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. 1:43
But provide an alternative method of contact for 1:46
users who can't answer your call. 1:49
Questions about gender could also frustrate your audience. 1:52
If your website or app has an extremely compelling reason to ask about gender, 1:57
such as trying to gather accurate demographics, 2:02
check out the teacher's notes for tips on designing inclusive form language. 2:06
You'll need to either give the user plenty of response options or 2:11
provide a text input rather than a list of predefined options. 2:16
Assure your users their information will be private, anonymous, and safe. 2:21
But again, if the question isn't absolutely essential, don't ask it. 2:29
Avoiding unnecessary questions will also reduce the number of 2:34
overall form questions. 2:39
Which brings us to the next principle of accessible form design, 2:41
minimizing the number of questions that appear on each screen. 2:46
Limiting the number of tasks presented to the user on 2:51
each screen has multiple benefits. 2:55
In addition to faster loading time, a big plus on mobile, 2:58
it helps screen readers jump straight to the relevant information. 3:02
Correcting errors will also be easier since the number 3:07
of fields facing the user at once will be limited. 3:12
And simplifying the presentation of information can reduce cognitive load: 3:16
in other words, the amount of information the user has to process or 3:22
remember at once. 3:27
This one-task-per-page approach benefits all users, but 3:29
especially those with cognitive disabilities or dementia. 3:33
To further assist such users, make sure your form provides context clues. 3:38
Chunking, a term used to describe breaking a form into steps, 3:45
only works if all the following are perfectly clear: 3:51
the purpose of the form, what step the user is on, 3:56
how many tasks have been completed, and how many steps still remain. 4:01
While users with cognitive and 4:08
memory impairments benefit most from context clues, 4:11
distracted users, who may have received a phone call in the middle of 4:16
attempting to complete a mobile form, will appreciate the reminder as well. 4:20
Grouping related questions visually further reduces cognitive load. 4:29
If some questions deal with personal information, 4:33
some with account information, and some with contact information, 4:37
and if it's necessary to keep each group on the same screen 4:43
rather than splitting the form into smaller steps, 4:47
make an obvious visual distinction between each group. 4:51
Using clear form labels and not just placeholder text 4:55
is another important step in guiding users through your form. 5:01
Placeholder text is sometimes used to clue the user as to what 5:07
content is expected and how it can be formatted. 5:12
But placeholder text disappears once the user begins typing, and 5:16
the user can easily lose track of which field they were filling out. 5:21
Labels should be placed close to the field they belong to. 5:25
And on mobile screens, labels should go above the input, not beside it. 5:30
Speaking of form inputs, one of the guidelines we covered 5:35
under the Operable WCAG principle was making focus indicators obvious. 5:41
Each browser comes with its own default focus indicator style, 5:48
but the cues are pretty subtle. 5:54
Making the focus indicators stand out will be a big help to users 5:57
who can't operate a mouse or touchscreen. 6:01
Finally, you'll hopefully recall a WCAG guideline called Input Assistance. 6:08
Don't forget to make form errors easy to spot and correct and 6:14
your error messaging easy to understand. 6:19
If designing an accessible form seems daunting, it definitely can be, but 6:25
I've included a number of resources in the teachers' notes to guide you. 6:30
And I recommend referring to them whenever you're faced with designing a form. 6:35
In our next video, 6:41
we'll apply these principles to design an accessible form of our own. 6:42