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 iOS Dev UK 2024
Example app is the iOS Dev UK conference application

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 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 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
23. DYNAMIC TYPE 10
24. HStack VStack 10
25. ✅ word wrap ❌ line limit ❌ height limit
26. 20 colors dynamic type focus & labels 60 MPH accessible dynamic type
27. FOCUS - accessibility focus 20
28. FOCUS 1. lands on important 2. skips decorative 3. no traps 20 ✅ ✅
30. LABELS - describes element to user - label everything with focus
31. LABELS
33. good LABELS - short - simple - no element type (“button”) - capitalized - no period at end - no special characters - translated - matches visible text - updated dynamically
34. good 20 LABELS [label] [element]
35. good 20 LABELS Favorite ❌
36. good 20 LABELS Save ✅
37. good 20 LABELS 🤌 Anna Beltrami 🇮🇹 ❌
38. good 20 LABELS Anna Beltrami ✅
39. good 20 LABELS LinkedIn button ❌
40. good 20 LABELS LinkedIn page for Oliver Binns ❌
41. good 20 LABELS LinkedIn ✅
42. good 20 LABELS
43. focus & labels 30 colors dynamic type focus & labels grouping & custom actions 60 MPH accessible
44. GROUPING - group by meaning - less “swipes” - easier to understand 30
45. GROUPING 30
50. open detail page save “It’ s time to build for watchOS button Double tap to activate. ” X activate
51. CUSTOM ACTIONS - only seen by assistive technology - faster - good for exposing interior actions of group 30
54. open detail page save “It’ s time to build for watchOS button Double tap to activate. Actions available” activate custom action “save” ✅
55. 40 colors dynamic type focus & labels grouping & custom actions orientation 60 MPH accessible grouping & custom actions
56. 40 ORIENTATION - portrait & landscape - unless absolutely necessary
57. ORIENTATION 40
59. Orientation 1. can I read everything? 2. can I do everything? 3. is it pretty? 10 40
60. Orientation 1. can I read everything? 2. can I do everything? 3. is it pretty? 40
64. 50 colors dynamic type focus & labels grouping & custom actions orientation touch target 60 MPH accessible orientation
65. (includes padding) TOUCH TARGET SIZE 50 44 pt 44 pt
66. TOUCH TARGET SIZE
67. TOUCH TARGET SIZE
70. 50 before after
71. colors dynamic type focus & labels grouping & custom actions orientation touch target 60 MPH accessible 60 ⚖ 😃
72. What’s Next? ✅ ⚖ 😃 😃
73. “We don’t have time for accessibility.” do v