Zero to Accessible in 30 minutes (or less!)

In 30 minutes or less, you can transform an inaccessible application into an accessible one. Learn about a range of accessibility issues that may exist on your app, and see how to fix them quickly and efficiently. After this talk, you will be prepared to bring your own app from zero to accessible.

Talk given at Pragma Conference 2024

Transcript

1. Zero to Accessible in 30 minutes (or less)
2. can we make our app accessible? (A) No, we have no users who need it. (B) No, we have no budget to buy screen readers. (🙄 they’re free) (C) No, there’ s no time. (D) No, I just hate people who are blind. (C) No, there’ s no time.
3. The plan colors dynamic type focus & labels grouping & custom actions orientation touch target 60 MPH accessible 0 10 20 30 40 50 60
4. 0 colors
5. COLORS 0 - 4.5 : 1 - Accessibility Inspector
6. COLORS
7. COLORS 0
8. COLORS 0 red green refactor audit fails change colors audit passes change screen
9. before after 0
10. before after 0
11. before after 0
12. COLORS - Dark Mode 0
13. before after 0
14. before after 0
15. colors dynamic type 60 MPH accessible 0 10 colors
16. DYNAMIC TYPE - support all system font sizes - don’t truncate - adapt horizontal to vertical 10
17. DYNAMIC TYPE
18. DYNAMIC TYPE 10
19. DYNAMIC TYPE 1. did the font size change? 2. can I read everything? 3. can I do everything? 4. is it pretty? 10
20. DYNAMIC TYPE
24. DYNAMIC TYPE 10
25. HStack VStack 10
26. ✅ word wrap ❌ line limit ❌ height limit
27. 10 20 colors dynamic type focus & labels 60 MPH accessible dynamic type
28. FOCUS - accessibility focus 20
29. FOCUS 1. lands on important 2. skips decorative 3. no traps 20 ✅ ✅
31. LABELS - describes element to user - label everything with focus
32. LABELS
34. good LABELS - short - simple - no element type (“button”) - capitalized - no period at end - no special characters - translated - matches visible text - updated dynamically
35. good 20 LABELS [label] [element]
36. good 20 LABELS Favorite
37. good 20 LABELS Save
38. good 20 LABELS 🤌 Anna Beltrami 🇮🇹
39. good 20 LABELS Anna Beltrami
40. good 20 LABELS LinkedIn button
41. good 20 LABELS LinkedIn page for Oliver Binns
42. good 20 LABELS LinkedIn
43. good 20 LABELS
44. focus & labels 20 30 colors dynamic type focus & labels grouping & custom actions 60 MPH accessible
45. GROUPING - group by meaning - less “swipes” - easier to understand 30
46. GROUPING 30
51. open detail page save “It’ s time to build for watchOS button Double tap to activate. ” X activate
52. CUSTOM ACTIONS - only seen by assistive technology - faster - good for exposing interior actions of group 30
56. open detail page save “It’ s time to build for watchOS button Double tap to activate. Actions available” activate custom action “save” ✅
57. 30 40 colors dynamic type focus & labels grouping & custom actions orientation 60 MPH accessible grouping & custom actions
58. 40 ORIENTATION - portrait & landscape - unless absolutely necessary
59. ORIENTATION 40
61. Orientation 1. can I read everything? 2. can I do everything? 3. is it pretty? 10 40
62. Orientation 1. can I read everything? 2. can I do everything? 3. is it pretty? 40
65. 40 50 colors dynamic type focus & labels grouping & custom actions orientation touch target 60 MPH accessible orientation
66. (includes padding) TOUCH TARGET SIZE 50 44 pt 44 pt
67. TOUCH TARGET SIZE
68. TOUCH TARGET SIZE
70. 50 before after
71. colors dynamic type focus & labels grouping & custom actions orientation touch target 60 MPH accessible 0 10 20 30 40 50 60 ⚖ 😃
72. legal compliance today zero “100%” accessible
73. “We don’t have time for accessibility.” do v RobinKanatzar.com/Pragma