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

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.

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 up

    Related 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: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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up