Accessibility on Flutter
Apps for Everyone
Lara Martín
@Lariki
Flutter/Dart GDE - Android
Miguel Beltran
@MiBLT
Freelance Consultant
Updated:
August 2020
Slide 2
Slide 2 text
What’s accessibility?
Design of products to be used by
people with disabilities.
Universal design
Products that can be used by the
widest majority of people.
https://unsplash.com/@yomex4life
Slide 3
Slide 3 text
TECH
ASSISTIVE ADAPTIVE
Two ways of helping
Blue2 by Ablenet
Slide 4
Slide 4 text
https://github.com/janoodleFTW/timy-messenger
Slide 5
Slide 5 text
Types of disability
(some of them)
Motor Disability Vision
Neurodiversity
Slide 6
Slide 6 text
Accessibility
Scanner
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
iOS Simulator:
Fewer accessibility options!
Simulator Real device
Slide 9
Slide 9 text
Motor Disability Vision
Neurodiversity
Slide 10
Slide 10 text
Motor disability
Challenges
• Require large click areas
• Require special hardware
• Require voice activated software
https://webaim.org/articles/motor/motordisabilities
Slide 11
Slide 11 text
Motor disability
Challenges
• Require large click areas
• Require special hardware
• Require voice activated software
How to help
• Games: Difficulty settings, turns
• Keyboard navigation
• Voice navigation
• Adaptive UI components
• Autocompletion
https://webaim.org/articles/motor/motordisabilities
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Keyboard Navigation
- We try to open the user
profile and navigate
through the app but it
doesn’t work well
- “Selected” color hard to
see most of the time
Switch Access
1. Open user profile
2. Navigate back to chat
window
3. Start creating a
message
Slide 16
Slide 16 text
Found Issues
Small touch targets
Switch navigation worked well on start,
but keyboard navigation was bad.
Slide 17
Slide 17 text
Motor Disability Vision
Neurodiversity
Slide 18
Slide 18 text
Vision
4 levels of visual function
• Blindness
• Severe visual impairment
• Moderate visual impairment
• Mild vision
https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
Slide 19
Slide 19 text
Vision
4 levels of visual function
• Blindness
• Severe visual impairment
• Moderate visual impairment
• Mild vision
How to help
• Large font sizes
• Screen readers
• High contrast content
https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
Slide 20
Slide 20 text
Font Scaling
• Make text larger
• Supported by the Text widget
• But not with RichText
Slide 21
Slide 21 text
Default Largest
Font Scaling (Android)
Slide 22
Slide 22 text
Font Scaling (iOS)
Slide 23
Slide 23 text
Display Size (Android)
• Make items larger
• Not text, but UI components
Slide 24
Slide 24 text
Display Size (Android)
Default Largest
Slide 25
Slide 25 text
Bold Text (iOS)
Slide 26
Slide 26 text
Magnify
• Both on Android and iOS
• Tab X times to zoom
• Drag with X fingers
Slide 27
Slide 27 text
iOS: Unsupported Options?
• Button Shapes (underline)
• On/Off Labels
• Reduce Transparency
• Increase Contrast
These show no difference.
Slide 28
Slide 28 text
Colorblindness
Challenges
• Not being able to see or differentiate
certain colours
• Affects 8% of male population, 0.5%
women
Slide 29
Slide 29 text
Colorblindness
Challenges
• Not being able to see or differentiate
certain colours
• Affects 8% of male population, 0.5%
women
How to help
• Use color AND icons to convey
messages
• Options to change color
Slide 30
Slide 30 text
Simulate Color Space (Android)
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Android: TalkBack
- Tap on screen reads
Scaffold title.
- Menu buttons are
unlabelled
- Attach button is
unlabelled
- Tap on message item
reads the time +
message but not the
username
- “Dogs are the best”
- “Unlabelled button”
- “16:18 - Good morning
everyone! smiley face”
Slide 34
Slide 34 text
Android: TalkBack +
Gestures
- Swipe to navigate to next
item.
- TalkBar reads the item.
- “Dogs are the best”
- “Unlabelled button”
- “16:18 - Good morning
everyone! smiley face”
Slide 35
Slide 35 text
iOS: VoiceOver + Gestures
- Swipe to navigate to next item.
- VoiceOver reads the item.
- Different reads than Android
- “Dogs are the best”
- “Image - Puzzles”
- “Image - Possibly Menu”
- “16:18 - Good morning
everyone! smiley face”
Slide 36
Slide 36 text
Found Issues
TalkBack: Missing labels
TalkBack: Missing text descriptions like author of a message
Low text contrast
Display size not supported
Unsupported iOS features
Neurodiversity
Challenges
• Focusing problems
• Learning difficulties
• Autism
• Dyslexia
• ADHD
How to help
• Minimal design
• Voice narration and subtitles
• Spell checking
• Remember settings and passwords
• Guide the user (without overwhelm)
Slide 40
Slide 40 text
Helping neurodiverse users:
• Autocorrection is enabled
• Capitalization by sentences not!
We can help users write better by enabling
Text Capitalization by sentences.
Slide 41
Slide 41 text
Helping neurodiverse users:
• Offer text narration
• Users can read and listen at the same
time
• Helps distracted minds
We can help users with learning difficulties.
Slide 42
Slide 42 text
Found Issues
Sentence Capitalization
Slide 43
Slide 43 text
Let’s Fix It
Slide 44
Slide 44 text
TODO LIST
Fix touch targets for names and user avatars
Fix sentence capitalisation
Fix low text contrast
Check dynamic font scaling with textScaleFactor
Fix missing semantic labels on buttons
Fix missing semantic text descriptions like author of a message
Slide 45
Slide 45 text
Touch Targets
Slide 46
Slide 46 text
Touch Target User Name
InkWell(
//...
child: Text(author.name)
)
InkWell is constrained to the child region.
Not satisfying the “Minimum Interactive Dimension”
Slide 47
Slide 47 text
kMinInteractiveDimension
“The minimum dimension of any interactive region according to
Material guidelines.”
48.0 Android
44.0 iOS (kMinInteractiveDimensionCupertino)
https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html
TextField(
textCapitalization:
TextCapitalization.sentences,
)
Fix text capitalisation:
• Disabled by default (none)
• Quick win!
• Think of the use case.
Slide 52
Slide 52 text
TextField(
enableSuggestions: true,
autocorrect: true,
)
More improvements for Neurodiverse users:
• Autocorrection
• Enable Suggestions
Both are enabled by default.
MediaQuery HighContrast
“Whether the user requested a high
contrast between foreground and
background content on iOS, via Settings ->
Accessibility -> Increase Contrast.”
MediaQuery.of(context).highContrast
RichText and textScaleFactor
RichText allows you to have text spans to
do things like (highlight URLs).
Does not support text scaling by default!
RichText(
textScaleFactor: MediaQuery.of(context).textScaleFactor,
text: …
)
Slide 60
Slide 60 text
Semantic Labels
Slide 61
Slide 61 text
Missing Labels
We need to add descriptions to Widgets!
Semantics Widget
• Explains what a piece of UI means.
• It is enabled?
• It is a button?
• It is read only?
Slide 62
Slide 62 text
SemanticsDebugger
• Draws each Semantics region
• Displays the TalkBack text
• Will help us fix the app!
Add to the top of your Widget tree
SemanticsDebugger(
child: …Scaffold or similar…
)
Slide 63
Slide 63 text
Fixing the Menu Button
• Wrap with a Semantic Widget
• Add a label “Menu”
• Set Button to True
Semantics(
label: “Menu",
button: true,
child: MenuWidget(…)
)
Slide 64
Slide 64 text
Fixing the Send Button
• Add “enabled” status to Semantics
Semantics(
label: “Send",
button: true,
enabled: _enabled,
child: SendWidget(…)
)
Disabled
Enabled
• TalkBack says “Send button disabled”
Slide 65
Slide 65 text
Scaffold Semantics
• Tap on the center reads AppBar title
“Dogs are the best”
• Wrap Scaffold with Semantics
Semantics(
label: "Chat Screen",
child: Scaffold( … )
)
• Now reads “Chat Screen - Dogs are
the best”
Fixing Messages
ExcludeSemantics(
child: RichText( … )
)
ExcludeSemantics to remove Text Widgets from Semantics tree
Slide 68
Slide 68 text
testWidgets(… {
await tester.pumpWidget(CirclesApp());
expect(find.bySemanticsLabel("Menu"), findsOneWidget);
});
Testing Semantics
• Use bySemanticsLabel to find Widgets when testing
• Easier to use than other Matchers!
• And you help others!
Slide 69
Slide 69 text
We are done!
Slide 70
Slide 70 text
TODO DONE LIST
Fix touch targets for names and user avatars
Fix sentence capitalisation
Fix low text contrast (iOS)
Check dynamic font scaling with textScaleFactor
Fix missing semantic labels on buttons
Fix missing semantic text descriptions like author of a message
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Summary
Perform analysis with Accessibility Scanner on Android
Test large scale fonts on iOS (larger setting)
Use Semantics as alternative for Widget Tests for a win-win
Embrace TextField features like capitalization
Slide 73
Slide 73 text
Thank You!
L a r a M a r t í n
F l u t t e r G D E
A n d r o i d D e v e l o p e r
@ L a r i k i
M i g u e l B e l t r a n
F r e e l a n c e
C o n s u l t a n t
@ M i B LT