This document provides dos and don'ts for building accessible apps. It recommends setting a minimum accessibility standard including color contrast and touch target sizes [DON'T]. It stresses testing with a wide range of users, including those with disabilities [DO], and considering accessibility at the screen level rather than as an afterthought [DO]. Regular training for the team on accessibility is important so skills don't lapse [DON'T]. Resources for continuing education are also provided.
2. 2
Kira EvistonWho are we?
Senior User Experience Consultant
12 years’ in the design industry and
eight of those years as a marketing
professional.
Amir Ansari
Head of User Experience
21 years’ experience in the field of
design, both as a Practitioner and
Manager.
INTRODUCTION
amir_ansari kira_eviston transpire
amir_ansari kira_eviston
A11y Camp 2018
6. 6 amir_ansari kira_eviston transpire
Scope
Least important Most important
Time
Least important Most important
Budget
Least important Most important
Accessibility
Least important Most important
A11y Camp 2018
7. 7 amir_ansari kira_eviston transpire
Scope
Least important Most important
Time
Least important Most important
Budget
Least important Most important
Accessibility
Least important Most important
A11y Camp 2018
8. 8 amir_ansari kira_eviston transpireA11y Camp 2018
Scope
Least important Most important
Time
Least important Most important
Budget
Least important Most important
Accessibility is no longer a line item
11. Baseline accessibility
acceptance criteria
● Colour contrast
○ Small text: at least 4.5:1 against its background
○ Large text (at 14 pt bold/18 pt regular and up):
at least 3:1
○ Icons: at least 4.5:1 contrast
● Screens have been uploaded and checked via Chrome
extension: Funkify
1
0
11
DO: Create your minimum accessible level
11 amir_ansari kira_eviston transpire
● No autoplay /continuous (flashing speed slow)
● Touch target - Android: 48x48 dp iOS: 44x44 pt
○ Sit 8dp away from another touch state
○ Labelled to allow for screen readers and assistive
technology on all read parts of the interface.
● Dynamic fonts / adjusting containers
● Complimentary text and images groupings
● Image alt text
A11y Camp 2018
17. The difference in
finding the right
partner...
1
0
1717 amir_ansari kira_eviston transpireA11y Camp 2018
Total of 5 participants with impairments - 1 per session:
● 2 participants with vision impairments (not short or long
sighted) or totally blind who use their phone’s
accessibility features (such as Talk Back or Voice Over) or
text / screen magnification.
● 2 with physical impairments (limited finger/hand
dexterity or range of motion) such as MS, Parkinson's.
● 1 with cognitive impairment (if possible).
DO: Test with a wide range of user types
18. An aha moment
1
0
1818 amir_ansari kira_eviston transpireA11y Camp 2018
DO: Test with a wide range of user types
20. DON'T: Shy away from challenging brand guidelines
Before
1
0
2020 amir_ansari kira_eviston transpireA11y Camp 2018
After Before After Before After
3.3 : 1 5.4 : 1 1.9 : 1 5.1 : 1 1.9 : 1 3.7 : 1
Airline Bank Not-for-profit
# # # # # #
21. 1
0
2121 amir_ansari kira_eviston transpireA11y Camp 2018
Custom font
Custom font
Why use system fonts:
● Readability
● Optimised for smaller screens
● Trusted and tried rendering weights
● Dynamic text size support
DON'T: Shy away from challenging brand guidelines
26. 261
0
2626 amir_ansari kira_eviston transpireA11y Camp 2018
Training hubs
● Apple WWDC recordings and Tech Talks
https://www.apple.com/au/accessibility/
● Android Guidelines:
https://support.google.com/accessibility/android/
● Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/TR/WCAG21/
● Apps for All
https://www.appsforall.com.au/
DON’T: Let accessibility training slip with your team
27. Gestures are
everything
1
0
2727 amir_ansari kira_eviston transpireA11y Camp 2018
● Without shortcuts, you’re in trouble!
● Phone form factor changes accessibility
gestures (e.g. iPhone’s removal of physical
home button)
● Users use diverse gestures to suit their
needs (e.g. two finger scrub, rotor, curtains)
DON’T: Let accessibility training slip with your team
31. Colour Contrast
Tools for designers
Accessibility scanner
app
Resources
Appsforall.com.au
Tips for all members
of a product team on
what their
responsibility is.
Platform
Guidelines
Google Material
Guidelines
Apple Human
Centred Guidelines
For Android, scans your
app and tells you all the
accessibility issues.
Colour Contrast
Analyzer
Funkify Chrome
extension
1
0
3131 A11y Camp 2018 amir_ansari kira_eviston transpire
Resources
33. Final
takeaways
1
0
3333 amir_ansari kira_eviston transpire
● Start somewhere - building an accessible app
is an evolution.
● It’s OK to get it wrong. Good, better, best.
● Showcase the impact being accessible has.
● Don’t underestimate the benefits of grouping
and going the extra mile.
● Keep up the conversation.
A11y Camp 2018