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.

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

12. Speaker. Chema Robles

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

20. Speaker. Chema Robles

21. Some time ago, there by Granada...

22. Speaker. Chema Robles
Óscar

23. Speaker. Chema Robles
1 of 246 MM
REASON
Source: World Health Organization

24. Speaker. Chema Robles

25. Speaker. Chema Robles

26. Speaker. Chema Robles
ACCESSIBILITY FEATURES
Source: American With Disabilities Act

27. Speaker. Chema Robles

28. Speaker. Chema Robles

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

68. Speaker. Chema Robles

69. Speaker. Chema RoblesSpeaker. Chema Robles
EMPATHY

70. Speaker. Chema RoblesSpeaker. Chema Robles
THANKS SO MUCH
@jmrobles / roblesjm