iOS Conf SG 2017 - One Blind Weekend

This talk is about the time I was temporarily blind for a weekend, and how I had to rely on Siri and VoiceOver on my phone to survive the weekend.

I share here what I experienced while “blind”, and tips on how you can improve your app accessibility for people with visual disabilities.

Transcript

1. ONE BLIND WEEKEND Jinny Wong iOS Conf Singapore 2017
2. Visual Accessibility
3. Mr Yam Tong Woo Founder, Adult Blind Association of Selangor http://myblindsight.blogspot.com
4. UIAccessibility
5. “sign up. button.”
6. button.accessibilityLabel = “Shopping Basket” “shopping basket. button.”
9. ONE BLIND WEEKEND
10. Strabismus
11. normal eyes R L
12. my eyes R L
13. my vision R L
14. my vision no binocular vision inaccurate perception of depth red-green 3D glasses are just… red
15. Corneal Abrasion
16. my vision R L
18. “button.” “browse collection. page one of fourteen. adjustable.” “water. efficient. seven dot o nine.” “fifty four percent.” “see.” “parents, babies & kids.” Air quality app: PSI Utilities bill app: Water: Efficient - 7.09 (dollar icon visually visible) Special Collections in buy/sell app. Scrolling view of images Compose tweet Weather app: 54% humidity (humidity icon visually visible) Buy/sell app: name of a browsing category
19. Context is King
20. menu icon. button. myeeenvee. heading icon wrmd mapper. button. icon notification ro. button. fair. thirty three. 1 degree celcius. fifty one percent see. fifty five. moderate. rain. zero. mm. dengue. wind. nine. km slash h.
21. 1 2 3 “menu. button.” button1.accessibilityLabel = “Menu” 1 button2.accessibilityLabel = “News & Tips” “new and tips. button.” 2 button3.accessibilityLabel = “Weather Alerts” “weather alerts. button.” 3
22. func getLocality(latitude: CLLocationDegrees, longitude: CLLocationDegrees) -> String { let location = CLLocation(latitude: latitude, longitude: longitude) CLGeocoder().reverseGeocodeLocation(location) { (placemarks, error) in ... if let placemark = placemarks.first { return placemark.locality // get your district/area } ... } } let place = getLocality(latitude: latitude, longitude: longitude) button.setAccessibilityLabel = “Current Location. \(place)” button.setAccessibilityHint = “Change your location.”
23. 4 view.isAccessibilityElement = true view.accessibilityLabel = “Air Quality. \(psi) P-S-I. \(quality)” “air quality. 55 PSI. moderate.” 4
24. “daily mix 3. meatloaf. queen bryan adams and more. button.”
25. Prioritising useful content
26. menu. button. voice search. button. query. try work. text field. directions. button.
27. “emergency kittens. constantly trying to impress my cat. 7 hours ago.”
28. Keep it concise
30. Omit describing what an element is 1 ❌ “Compose tweet button” ✅ “Compose tweet” Keep it short and succinct 2 ❌ “Compose a new tweet” ✅ “Compose tweet” Don’t describe what action the user can take 3 ❌ “Tap to compose tweet” ✅ “Compose tweet”
31. Increase legibility
32. Make sure you have good contrasts 1 ❌ “Compose tweet” ✅ “Compose tweet” Legible font sizes and weights 2 ❌ “Compose tweet” ✅ “Compose tweet” Don’t rely solely on colours to convey information 3 ℹ 1 in 12 males are colour blind ℹ Use text or shapes to provide additional context ▲▼
33. Dynamic Type iOS 11: now with custom fonts!
34. Responsive layouts
36. Smart Invert
37. view.accessibilityIgnoresInvertColors = true
38. SiriKit
40. +
41. Accessibility is hard
43. Is this design accessible? How can I make it more accessible? Is there a feature I can build to improve accessibility for our users? legible content proper labels and hints dynamic type responsive autolayout smart invert contextual information prioritise most used functions SiriKit haptic feedback UI sounds
44. Test on yourself!
47. https://www.microsoft.com/en-us/design/inclusive
48. Thank you -
49. RESOURCES ▸ https://blog.momocentral.com/the-day-we-hired-a-blind- coder-9c9d704bb08b ▸ http://www.channelnewsasia.com/news/cnainsider/giang-the-adventurer- grab-s-first-blind-coder-makes-the-world-9312236 ▸ https://developer.apple.com/accessibility/ ▸ https://developer.apple.com/videos/play/wwdc2017/806/ ▸ https://developer.apple.com/videos/play/wwdc2017/110/ ▸ https://www.microsoft.com/en-us/design/inclusive