Resolving text accessibility dilemmas in UIs

We all know the general rules for better accessibility: using larger text and higher color contrast. But is it always the case? In this talk, I explore cases where following these rules can actually create the opposite effect, making it harder for people to use your app. We examine these cases and work towards finding solutions for each dilemma.

Transcript

1. Resolving text accessibility dilemmas in UIs Roman Shamin Head of design at Evil Martians
2. Rule 1 The larger the text, the better Rule 2 The higher
 contrast,
 the better
3. Dilemma is like a seesaw Max A Min B Min A Max B
4. Does a dilemma imply that you can’t win?
5. When it comes to a11y, we can’t blindly adhere to rules
6. Dilemma #1
7. Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma
8. Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma Rule ? The larger the text, the better
9. Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo #foflayers
10. Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 Hard to read Less scroll Easy to read More scroll
11. Hard to read Less scroll Easy to read More scroll
12. Dilemma #1 Text size VS scroll usage Text size Scroll usage
13. Resolving Text size VS
 scroll usage dilemma 1. Opt for slightly smaller text for professional tools and slightly larger text for consumer apps 2. Test your apps at a minimum of 200% zoom
14. Dilemma #2
15. Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.
16. Rule ? The higher
 contrast,
 the better
17. Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.
18. Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.
19. Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. Importance level: 1 3 4 2
20. Two types of contrast
21. Black text White background Gray text Contrast Every text
 against its
 background
22. Black text White background Gray text Hierarchy Between text blocks
23. Both contrasts
 are important If everything stands out,
 then nothing stands out
24. For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.
25. For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.
26. A darker background (with black text) reduces the available hierarchy range Text Text BG BG
27. Professional apps, as opposed to consumer ones, tend to utilize a wider range of hierarchy
28. Dilemma #2 Contrast VS hierarchy Contrast Hierarchy
29. ng in school, and ults in the contact lenses, make your ring glasses or the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. Resolving
 dilemma #2 Consider using alternatives to color| z font sizey z font styley z different fonty z different design.
30. When it comes to a11y, we can’t blindly adhere to rules
31. Polychrom Harmony OKLCH.com Martian Mono Martian Grotesk Roman Shamin @romanshamin_en