FlutterConf: Accessibility on Flutter
1 like412 views
Speaker Chema Robles gave a presentation on accessibility in Flutter. He discussed how 1 in 5 families have a member with a disability. He then talked about transitioning an existing app built with Titanium and JavaScript to Flutter to improve accessibility and maintenance. Some challenges he faced included libraries breaking with Android updates and issues with push notification services. However, Flutter provided better support for accessibility out of the box through its documentation. Robles emphasized the importance of accessibility testing tools and developing with empathy for those with disabilities.
FlutterConf: Accessibility on Flutter
- 1. Speaker. Chema Robles SPEAKER CHEMA ROBLES CIO @ Civica Software CTO @ Outbarriers @jmrobles / outbarriers.com Accessibility on Flutter
- 2. Speaker. Chema RoblesSpeaker. Chema Robles About me ● Software Engineer UGR ● Programming since age 9 ● Serial Entrepreneur ● Start-up Mentor ● … and Flutter lover!
- 3. Speaker. Chema RoblesSpeaker. Chema Robles During the preparation of the talk...
- 10. Speaker. Chema Robles 1 in 5 families, has a member with disabilities Source: World Health Organization
- 11. Speaker. Chema Robles Physical Intellectual Sensory Psychic VisceralMultiple
- 13. Speaker. Chema Robles Source: La Ciudad Accesible
- 14. Speaker. Chema Robles Visual Accessibility FOCUS
- 15. Speaker. Chema Robles What has been the biggest technological revolution for blind people? QUICK-QUIZ
- 16. Speaker. Chema Robles What has been the biggest technological revolution for blind people?... Since the stick QUICK-QUIZ
- 17. *The use of a GIF with iPhone is intentional
- 18. Speaker. Chema Robles All the blind people I know have and use iPhone MY FACT
- 19. Speaker. Chema Robles "How does a blind person use a smartphone?" WTF
- 21. Some time ago, there by Granada...
- 23. Speaker. Chema Robles 1 of 246 MM REASON Source: World Health Organization
- 26. Speaker. Chema Robles ACCESSIBILITY FEATURES Source: American With Disabilities Act
- 29. Speaker. Chema Robles ● 1st "version": Q4 2014 ● Developed with Titanium Appcelerator ● JavaScript MVC ● Hard to maintain/add new features ● Need to create own native plugins (Android/iOS) ● Long compilation time ● No autofresh during development "TECHNICAL DEBT"
- 30. Speaker. Chema RoblesSpeaker. Chema Robles Why a new development from scratch with Flutter?
- 31. Speaker. Chema Robles ● Backed by Google ● Stable 1.0.0 release ● Typed language: Dart ● Easy to learn ● Good 3th parties libraries and plugins...and growing ● (Almost) Native = "Video game engine" (GLSurfaceView?) REASONS
- 32. Speaker. Chema Robles ● rxdarts ● beacons ● flutter_blue ● shared_preferences ● flutter_map ● location ● image_picker ● image ● path_provider ● datetime_picker_formfield ● flutter_facebook_login ● google_sign_in ● firebase_analytics ● onesignal ● intro_view_flutters ● audioplayer ● url_launcher pubspec.yaml
- 33. Speaker. Chema Robles ● rxdarts ● beacons ● flutter_blue ● shared_preferences ● flutter_map ● location ● image_picker ● image ● path_provider ● datetime_picker_formfield ● flutter_facebook_login ● google_sign_in ● firebase_analytics ● onesignal ● intro_view_flutters ● audioplayer ● url_launcher pubspec.yaml
- 34. Speaker. Chema RoblesSpeaker. Chema Robles ISSUE 1: Android X "break" beacon lib
- 35. Speaker. Chema RoblesSpeaker. Chema Robles ISSUE 2: OneSignal "CocoaBug" / iOS
- 36. Speaker. Chema RoblesSpeaker. TalkSpeaker. Chema Robles 38.52 hours 80 commits git-time
- 37. Speaker. Chema RoblesSpeaker. TalkSpeaker. Chema Robles 11.660 code lines 4.969 code lines cloc
- 38. Speaker. Chema RoblesSpeaker. TalkSpeaker. Chema Robles 11.660 code lines 4.969 code lines cloc 42,6% of Appcelerator code!
- 39. Speaker. Chema RoblesSpeaker. Chema Robles ACCESSIBILITY DEV TIPS
- 40. Speaker. Chema RoblesSpeaker. Chema Robles Large fonts Source: flutter.dev accessibility documentation
- 41. Speaker. Chema RoblesSpeaker. Chema Robles High contrast Source: Lena, Wikipedia
- 42. Speaker. Chema RoblesSpeaker. Chema Robles High contrast Source: accessible-colors.com
- 43. Speaker. Chema RoblesSpeaker. Chema Robles No text buttons
- 44. Speaker. Chema RoblesSpeaker. Chema Robles Images
- 45. Speaker. Chema RoblesSpeaker. Chema Robles Locale stuff
- 46. Speaker. Chema RoblesSpeaker. Chema Robles Outbarriers: Map Marker
- 47. Speaker. Chema RoblesSpeaker. Chema Robles Outbarriers: Profile picture
- 48. Speaker. Chema RoblesSpeaker. Chema Robles Outbarriers: Sign-up form
- 49. Speaker. Chema RoblesSpeaker. Chema Robles SCREEN READER ON?
- 50. Speaker. Chema RoblesSpeaker. Chema Robles ACCESSIBILITY TOOLS
- 51. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 52. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 53. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 54. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 55. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 56. Speaker. Chema RoblesSpeaker. Chema Robles Accessibility Scanner Great free utility app to audit apps on Android
- 57. Speaker. Chema RoblesSpeaker. Chema Robles
- 58. Speaker. Chema RoblesSpeaker. Chema Robles
- 59. Speaker. Chema RoblesSpeaker. Chema Robles
- 60. Speaker. Chema RoblesSpeaker. Chema Robles Talk Back Screen reader Included in Android Accessibility Suite
- 61. Speaker. Chema RoblesSpeaker. Chema Robles Voice Over Screen reader for iOS
- 62. Speaker. Chema Robles Our secret weapon!
- 63. Speaker. Chema RoblesSpeaker. Chema Robles ACCESSIBILITY RECAP
- 64. Speaker. Chema RoblesSpeaker. Chema Robles ACCESSIBILITY AS VALUE
- 65. Speaker. Chema RoblesSpeaker. Chema Robles UI/UX A11Y
- 66. Speaker. Chema RoblesSpeaker. Chema Robles ACCESSIBILITY = A11Y
- 67. Speaker. Talk RESOURCES: → DroidCon: Is your app accessible for everyone? A primer on accessibility for Android by David Lázaro (@_dlazaro) → "Accessibility on Flutter" @ Medium by Carlos Macías → Accessibility - Flutter Documentation Speaker. Chema Robles
- 69. Speaker. Chema RoblesSpeaker. Chema Robles EMPATHY
- 70. Speaker. Chema RoblesSpeaker. Chema Robles THANKS SO MUCH @jmrobles / roblesjm