Simulic
English

Usability and accessibility testing – simulated users and WCAG

Computer ScienceDigital ApplicationsAges 17–18

Loading…

Use with my class ✨ Customize with AI Report a problem

Simulated users with different needs (a typical user, an older user with low vision, a user with a hand tremor, a blind screen-reader user, a keyboard-only user, a deaf user and a color-blind user) do the same task on two interface designs, A and B. The sim reports time, errors, actions and completion rate and plots every tap on the buttons. Change button size, spacing, font size, colors, labels, menu depth, alt text, heading order, reading order and captions and test again; the accessibility checker computes contrast ratios and checks WCAG 2.2 success criteria.

Lesson: User-centered interface design: usability testing, accessibility and the WCAG success criteria

What it shows

Usability is how quickly and reliably people can complete tasks with an interface; accessibility means that disabled people can use it too. Designers test with users who have different needs and measure time, errors and success. Tapping time follows Fitts's law: small, distant targets take longer and are missed more often. The Web Content Accessibility Guidelines (WCAG 2.2) set testable criteria: text contrast of at least 4.5:1, text alternatives for images and icon buttons, headings in order, a logical reading order, captions for video, targets of at least 24 px and no information conveyed by color alone.

How to use

Choose a Task and a User group, then choose which design to edit with A or B. Change Button size, Spacing, Font size, Menu depth, the colors, Button labels, Headings and Reading order, and tick Alt text, Video captions or Status shown by color only. The results table and chart update at once; press Run test to animate a new sample of users. Compare both designs in the Accessibility checker and read the screen-reader order list.

Parameters you can change

  • Task Renew an overdue book, Find today's opening hours, Watch the help video
  • Simulated users All groups, Typical user, Older user with low vision, User with a hand tremor, Blind user (screen reader), Keyboard-only user, Deaf user, Red–green color-blind user
  • Users per group 5–40 users
  • Starting designs A poor, B improved, A and B the same (improve B yourself)
  • Design being edited Design A, Design B
  • Show the accessibility checker

Questions to explore

  1. Why does making the buttons bigger help the user with a hand tremor more than the typical user?
  2. Does grey text #9e9e9e on white pass WCAG level AA, and how could you fix it?
  3. Why do icon-only buttons without alt text make screen-reader users give up?

Related simulations