Presentation given by Fabien Marry of cxpartners at the SWMobile Group in Jan 2016.

1. Beyond the touch screen
for a better accessibility of mobile apps
Fabien Marry
@Fabien_UX

2. Outline Introducing Noëlle… and everybody else
Mobile devices are a godsend for
accessibility
Where do we start?
Going the extra mile
A message from Professor Hawking
2@Fabien_UX

3. IntroducingNoëlle…
andeverybodyelse

4. Meet Noëlle
4@Fabien_UX
Meet Noëlle, who was my
grand mother…
She loved to get postcards
when we went on holidays,
so I wrote one to her every
time I went somewhere.
But her eyesight had
declined to a point where
she couldn’t read most
things...

5. Meet Noëlle
5@Fabien_UX
I kept writing to her, but I
just wrote larger.
If you care a tiny bit, it’s
often not that hard to
include people with slightly
different needs.

6. Not just
Noëlle…
6@Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
OcularAccommodation(Dioptres)
0 10 20 30 40 50 60 70
0
2
4
6
8
10
12
14
Higher
Mean
Lower
Age (Years)
OcularAccomodation(Dioptries)
Everybody’s eyesight gets
worse with time, maybe
much earlier that you would
think...
This is especially an issue to
be aware of when your
designers are all under 40!

7. 7@Fabien_UX http://www.inclusivedesigntoolkit.com/
63 M
Population
11 M
Disabled
8.5 M
Arthritis
9 M
Hearing Impairment
2 M
Visual Impairment
1 in 10
Left Handed
8% Men
0.4% Women
Colour Blind
3.4 M
Asthma
1.5 M
Diabetes
The UK
population
in numbers

8. Expand your
addressable
market
8@Fabien_UX
How many people have less than Full ability ?
Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999)
http://www.inclusivedesigntoolkit.com/

9. Expand your
addressable
market
9@Fabien_UX
Source: The Henley Centre, Family Expenditure Survey (1996)
http://www.inclusivedesigntoolkit.com/
Money to spend and time to spend it
The UK’s 12 million disabled
people have a spending
power in excess of £80
billion.

10. An ageing
population
10@Fabien_UX
Japan
As the population gets older
in most developed
countries, the need will only
get greater.

11. Fantastic PR
opportunity
for your clients
11@Fabien_UX
“Your product can now be accessible
to vision impaired people
for the first time”

12. A legal
requirement!
12@Fabien_UX
Another reason: The
Disability Discrimination
Act 1995 (DDA) gives people
with disabilities important
rights not to be
discriminated against: in
accessing everyday goods
and services like shops,
cafés, banks, cinemas and
places of worship.
Especially for Government
and Enterprise.
http://www.flickr.com/photos/bravosixninerdelta/7158071205/sizes/c/in/photostream/

13. People in the
UK who have
never used
the internet
13@Fabien_UX
34%
have a
disability
https://beta.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2015#disability
Disability is a huge barrier
to Internet access and full
involvement in society.

14. Mobiledevicesarea
godsendfora11y

16. A typical
dedicated
accessibility
device
16@Fabien_UX
Only
$7,595!
• Augmentative and
alternative
communication
• Not versatile
• Poor design leading to
stigma
• Hard to find
• Expensive!
https://store.prentrom.com/product_info.php/cPath/11/products_id/207

17. Accessibility
features are
now built in
mainstream
devices
17@Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
• Cheaper, no stigma, well
designed
• Today I’m focusing on iOS
as it is the most advanced
• Most of these features
are also available on
Android

18. Accessibility
features are
now built in
mainstream
devices
18@Fabien_UX
“There's nothing on the
iPhone or iPad that you can
do that I can't do”
Stevie Wonder

19. Built into iOS:
Zoom
19@Fabien_UX
• Simply zooms in
• Works everywhere but
not very practical as
requires constant
panning

20. Built into iOS:
Dynamic Type
20@Fabien_UX
iOS 7 introduced a feature
that allows user to simply
increase the font size of key
content of text, assuming
the developer used the
Dynamic Type framework to
allow it.

21. Built into iOS:
Safari and its
reader mode
21@Fabien_UX

22. Built into iOS:
Safari and its
reader mode
22@Fabien_UX

23. Built into iOS:
High contrast
mode
23@Fabien_UX
This “psychedelic” mode can
help people with some
vision impairments.

24. Built into iOS:
Assistive
Touch
24@Fabien_UX
Assistive Touch adds simple
buttons to do things
requiring precise hand
control movements:
• multi finger gestures
• hardware buttons
• shake
• even customs gesture
someone else can record
for you

25. Built into iOS:
Custom
vibrations
25@Fabien_UX
iOS goes beyond visual and
audio.
Haptic can be used to
communicate information
with different vibration
patterns.

26. Built into iOS:
Voiceover
26@Fabien_UX
Demo: How a blind person can use Twitter
https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

27. Built into iOS:
Voiceover
27@Fabien_UX
Demo: How a blind person can use Twitter
https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

28. More to iOS
than a touch
screen
28@Fabien_UX http://www.apple.com/uk/accessibility/ios/braille-display.html

29. Meet Andy
29@Fabien_UX
Here’s Andy…
A typical 20 something that
went on holiday, and
decided to take a dive in the
wrong place…

30. Meet Andy
30@Fabien_UX
...and is now paralysed from
the neck down.
That means he struggled to
do anything without
someone helping him. Just
imagine what that’s like.
From one day to the next,
he couldn’t make a phone
call on his own, couldn’t
send a text on his own,
needed someone to read to
him. Suddenly, he had no
independence, and no
privacy.

31. Meet Andy
31@Fabien_UX
Luckily technology could
help.
He now has a solution that’s
integrated with his
wheelchair.
A chin joystick controls the
Voiceover cursor on his
iPhone.

32. How to touch
with no arms
32@Fabien_UX
http://store.griffintechnology.com/mouthstick-stylus
That’s a lot better than the
early alternative which was
just a stick to bite on.

33. Built into iOS:
Switch
control
33@Fabien_UX
Since iOS 7, your device can
be controlled by external
switches.
A switch is anything that
can close an electric circuit:
a big button, something
that detect when you close
your eyelid, or when you
blow into it.

34. Built into iOS:
Switch
control
34@Fabien_UX
Here’s Christopher Hills.
Born with cerebral palsy, he
has limited control of his
limbs.
He’s using switches
installed in his wheelchair
head rest to control his
devices.

35. Built into iOS:
Switch
control
35@Fabien_UX
Christopher’s now a certified
Apple Final Cut Pro editor.
He produces a lot of video for
YouTube, including some that
explain his setup.
His Youtube channel:
https://www.youtube.com/
user/icdhills

36. Built in
voice
commands
36@Fabien_UX
Dictation + Digital
assistants that understand
natural language are next.
“Remind me to buy milk
when I get of from my bus”
“Call my wife”
“Set a timer for 10min”.
Not open to third parties...
for now.

37. 37@Fabien_UX
All these capacities are built
in, but you need to do your
part for it to work.

38. Sowheredowestart?

39. A great A11y
needs all
39@Fabien_UX
Sales Scoping
Interaction
Design
User
Interface
Software
Development
Quality
Assurance
Client
Usability
testing
Delivering good
accessibility is a team effort.
Sales need communicate its
value for our clients.
Scoping needs to factor it in
to estimation.
We need to design
interactions that can also
work without graphics.
And interfaces that consider
readability, colour contrast,
colour blindness.

40. Add a11y
metadata to
you UI
40@Fabien_UX
Add
Adds a &tle
Accessibility enabled
If false, element will be ignored
completely by the VO cursor.
Label
Short spoken text after focus.
Hint
Longer spoken message after
label and a pause (an
explanation not a command).
Trait
Define the type of interaction.
This is not part of the GUI,
but it is the key foundation
for UI for voiceover. Can be
added in Xcode Ui like here,
or straight in code.
It is is also used by braille
accessory users.
And it would not be a
stretch to think a future
version of the OS could use
the labels as voice
commands.

41. Documenting
a11y metadata
41@Fabien_UX
© 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5
Tigerspike London
Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com
iPad 14:04 PM
Velum - iPad publication iPad Wireframes & Functional Overview
1.0 Issue Library LS
⚙ "LOGO⚙ "
Issue Info Panel
1.0 Issue Library LS
Allows users to quickly choose which Issues to read.
Provides access to stored Favorite Articles and App
Settings.
1. SETTINGS BUTTON
[Gesture: Tap] Goes to "Settings".
[Transition: Slide] When Settings is opened it slides up from bottom of
screen above the Issue Library layer, upon closing it slide
back down revealing the Archive below.
[A11y: enabled; Label: "Settings"]
2. FAVOURITES BUTTON
[Gesture: Tap] Goes to "Favourites".
[Transition: Slide] When Favourite is tapped, it (animated) slides up from
bottom of screen above the Issue Library layer, upon closing it slide back
down revealing the archive.
[A11y: enabled; Label: "Favourites", Hint: "Access your favourites
articles";]
3. PREVIOUS ISSUE COVER
[Gesture: Tap] Slides (animated) issues to previous issue*
[Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF
DL'd] opens issue
[Transition: Slide horizontally]
[A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue
title>." Trait: button, image]
4. NEXT ISSUE COVER
[Gesture: Tap] Slides (animated) issues to next issue*
[Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd]
opens issue
[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue
title>."; Trait: button, image].
5. SELECTED ISSUE COVER
[Gesture: Swipe Right] Slides (animated) issues to previous issue*
[Gesture: Swipe Left] Slides (animated) issues to next issue*
If the issue has not yet downloaded:
[Gesture: Tap] Starts downloading the issue.
[A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait:
Selected, button, image].
If the issue has already been downloaded:
[Gesture: Tap] Open the issue.
[Transition: Expand] The cover expands to fill screen
[Transition: Fade] Front cover fades to pre-roll advert
[Transition: Fade] Pre-roll advert fades to Issue Contents Page
[A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait:
button, image].
6. ISSUE INFO PANEL
See "1.1 Issue Library - Issue Info Panel" page.
*chronologically
1 2
3 4
6
5
2. FAVOURITES BUTTON
[Gesture: Tap] Goes to "Favourites".
[Transition: Slide] When Favourite is tapped, it (animated) slides up from
bottom of screen above the Issue Library layer, upon closing it slide back
down revealing the archive.
[A11y: enabled; Label: "Favourites", Hint: "Access your favourites
articles";]
3. PREVIOUS ISSUE COVER
[Gesture: Tap] Slides (animated) issues to previous issue*
[Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF
DL'd] opens issue
[Transition: Slide horizontally]
[A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue
title>." Trait: button, image]
4. NEXT ISSUE COVER
[Gesture: Tap] Slides (animated) issues to next issue*
[Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd]
opens issue
[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue
title>."; Trait: button, image].
5. SELECTED ISSUE COVER
This metadata shouldn’t be
left for the developer to
rush in at the last minute.
It’s part of your application
just like any text displayed,
and should be given the
same consideration
regarding brand and tone of
voice.
Clear instructions need to
be provided for developers.

42. Add a11y
metadata to
you UI
42@Fabien_UX
https://speakerdeck.com/spanage/ios-accessibility-inside-and-out
For best result, you want to
think how to group the
accessibility metadata.
The best solution is not
always to define every
element independently.

43. Helps with
automated
testing
43@Fabien_UX
http://calaba.sh/
A11y metadata is often
required to create
automated UI tests.

44. Hook into
standard
gestures:
Escape
44@Fabien_UX
= up/back, close, cancel
A two-fingered Z motion is
the standard gesture to
escape modal boxes or go
up one level in navigations.
Already done if using
standard navigation
controllers.

45. Hook into
standard
gestures:
Magic tap
45@Fabien_UX
A two fingered double tap is
the magic tap.
2-finger double tap = do the most likely action:
play/pause for media, start/end call, take picture…
also now used to expose further actions.

46. Hook into
standard
gestures:
the code
46@Fabien_UX
- accessibilityPerformEscape {
// call to your code to get out
}
- accessibilityPerformMagicTap {
// call to your code to do the
action
}
Easy: one line of code!

47. Legibility:
make font size
adjustable
47@Fabien_UX
+A-A
…or let Apple do the work and adopt Dynamic type!
Simple but great outcome:
allow user to adapt the font
size to their vision.

48. Avoid using
colour only to
convey
meaning
48@Fabien_UX
Normal vision Simulated colour blindness
http:///wearecolorblind.com/example/ichat

49. Avoid gesture
only
interactions
49@Fabien_UX
Clear
Gesture only interactions
are unusable for Voiceover
users.
Very difficult for sighted
users with mobility issues
(although Adaptive touch
can help).

50. How to check?
50@Fabien_UX
50 shades of something
Test your graphics with colour blindness simulators
No peeking
Try using your app using Voiceover, screen off.
Nothing like the real thing
Include users with impairments in usability testing.

51. Goingtheextramile
“Go the extra mile...
it’s never crowded.”
- unknown

52. Camera:
face
recognition
52@Fabien_UX
“One face. Small face. Face near right edge. Auto-
focussed”.
http://svan.ca/blog/2012/blind/
Use the hardware and
software capacities (here
face detection) to think
outside of the box, and
allow even blind users to
take and share pictures.
Just because a person is
blind doesn’t mean that
she’s not facing something
others would like to look at.

53. Ariadne GPS:
GPS
53@Fabien_UX
Uses GPS to help blind people explore
GPS + Voiceover = great
opportunities to make apps
that help blind people
explore cities and
landscape.
For example, you can set
key locations and alert
when approaching the right
bus stop.

54. TapTapSee:
Eyes for the
blind!
54@Fabien_UX
You take a picture, it tells you what it sees.
Camera + image recognition
+ crowd sourced analysis =
Great when you want to
make sure that the bottle
you’re opening is milk
rather than orange juice
when you’re making coffee.
Also can help recognise
medication, money,
clothes...

55. Instapaper
special font
for dyslexia
55@Fabien_UX

56. Everybody Technology - Stephen Hawking's Dream
https://www.youtube.com/watch?v=2Tel9UvJfws

57. On the web
Matt Gemmell’s Accessibility for iPhone and iPad apps
http://mattgemmell.com/accessibility-for-iphone-and-
ipad-apps/
Apple’s dev resources on
https://developer.apple.com/accessibility/
WWDC session on iOS accessibility
https://developer.apple.com/videos/play/wwdc2015-201/
Switch control on iOS:
https://support.apple.com/en-mz/HT201370
Christopher Hills’ youtube channel
https://www.youtube.com/user/icdhills/feed
Summer Panage’s iOS accessibility inside and out
https://speakerdeck.com/spanage/ios-accessibility-
inside-and-out
Android’s dev resources on accessibility
https://developer.android.com/guide/topics/ui/
accessibility/index.html
Accessibility features in Android Lollipop:
http://www.androidcentral.com/accessibility-features-
android-50-lollipop
Android central on Accessibility
http://www.androidcentral.com/accessibility
On twitter
@iAmMaccing, @MarcoInEnglish, @mostgood
@sommer, @RNIB, and… @Fabien_UX ;)
57@Fabien_UX
Going further