Beyond the touch screen for a better accessibility of mobile apps
Fabien Marry
Fabien_UX
Outline Introducing Noeumlllehellip and everybody else
Mobile devices are a godsend for accessibility
Where do we start
Going the extra mile
A message from Professor Hawking
2Fabien_UX
Introducing Noeumlllehellip and everybody else
Meet Noeumllle
4Fabien_UX
Meet Noeumllle who was my grand motherhellip
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 couldnrsquot read most things
Meet Noeumllle
5Fabien_UX
I kept writing to her but I just wrote larger
If you care a tiny bit itrsquos often not that hard to include people with slightly different needs
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Outline Introducing Noeumlllehellip and everybody else
Mobile devices are a godsend for accessibility
Where do we start
Going the extra mile
A message from Professor Hawking
2Fabien_UX
Introducing Noeumlllehellip and everybody else
Meet Noeumllle
4Fabien_UX
Meet Noeumllle who was my grand motherhellip
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 couldnrsquot read most things
Meet Noeumllle
5Fabien_UX
I kept writing to her but I just wrote larger
If you care a tiny bit itrsquos often not that hard to include people with slightly different needs
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Introducing Noeumlllehellip and everybody else
Meet Noeumllle
4Fabien_UX
Meet Noeumllle who was my grand motherhellip
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 couldnrsquot read most things
Meet Noeumllle
5Fabien_UX
I kept writing to her but I just wrote larger
If you care a tiny bit itrsquos often not that hard to include people with slightly different needs
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Meet Noeumllle
4Fabien_UX
Meet Noeumllle who was my grand motherhellip
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 couldnrsquot read most things
Meet Noeumllle
5Fabien_UX
I kept writing to her but I just wrote larger
If you care a tiny bit itrsquos often not that hard to include people with slightly different needs
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Meet Noeumllle
5Fabien_UX
I kept writing to her but I just wrote larger
If you care a tiny bit itrsquos often not that hard to include people with slightly different needs
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Not just Noeumlllehellip
6Fabien_UX
Mean
Upper limit
Lower limit
Age (Years)
Ocu
lar A
ccom
mod
atio
n (D
iopt
res)
0 10 20 30 40 50 60 70 0
2
4
6
8
10
12
14 Higher
Mean
Lower
Age (Years)
Ocu
lar A
ccom
odat
ion
(Dio
ptri
es)
Everybodyrsquos 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
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
7Fabien_UX httpwwwinclusivedesigntoolkitcom
63 M Population
11 M Disabled 85 M
Arthritis
9 M Hearing Impairment
2 M Visual Impairment
1 in 10 Left Handed
8 Men 04 Women
Colour Blind
34 M Asthma
15 M Diabetes
The UK population in numbers
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Expand your addressable market
8Fabien_UX
How many people have less than Full ability
Source 199697 The Disability Follow-up Survey (Grundy et al 1999)
httpwwwinclusivedesigntoolkitcom
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Expand your addressable market
9Fabien_UX
Source The Henley Centre Family Expenditure Survey (1996)
httpwwwinclusivedesigntoolkitcom
Money to spend and time to spend it
The UKrsquos 12 million disabled people have a spending power in excess of pound80 billion
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
An ageing population
10Fabien_UX
Japan
As the population gets older in most developed countries the need will only get greater
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Fantastic PR opportunity for your clients
11Fabien_UX
ldquoYour product can now be accessible to vision impaired people
for the first timerdquo
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
A legal requirement
12Fabien_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 cafeacutes banks cinemas and places of worship
Especially for Government and Enterprise
httpwwwflickrcomphotosbravosixninerdelta7158071205sizescinphotostream
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
People in the UK who have never used the internet
13Fabien_UX
34have a disability
httpsbetaonsgovukbusinessindustryandtradeitandinternetindustrybulletinsinternetusers2015disability
Disability is a huge barrier to Internet access and full involvement in society
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Mobile devices are a godsend for a11y
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
A typical dedicated accessibility device
16Fabien_UX
Only $7595
bull Augmentative and alternative communication
bull Not versatile
bull Poor design leading to stigma
bull Hard to find
bull Expensive
httpsstoreprentromcomproduct_infophpcPath11products_id207
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Accessibility features are now built in mainstream devices
17Fabien_UX
Cheaper
Better design
Better build quality
More features
No stigma
bull Cheaper no stigma well designed
bull Today Irsquom focusing on iOS as it is the most advanced
bull Most of these features are also available on Android
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Accessibility features are now built in mainstream devices
18Fabien_UX
ldquoTheres nothing on the iPhone or iPad that you can
do that I cant dordquoStevie Wonder
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Zoom
19Fabien_UX
bull Simply zooms in
bull Works everywhere but not very practical as requires constant panning
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Dynamic Type
20Fabien_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
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Safari and its reader mode
21Fabien_UX
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Safari and its reader mode
22Fabien_UX
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS High contrast mode
23Fabien_UX
This ldquopsychedelicrdquo mode can help people with some vision impairments
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Assistive Touch
24Fabien_UX
Assistive Touch adds simple buttons to do things requiring precise hand control movements
bull multi finger gestures
bull hardware buttons
bull shake
bull even customs gesture someone else can record for you
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Custom vibrations
25Fabien_UX
iOS goes beyond visual and audio
Haptic can be used to communicate information with different vibration patterns
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Voiceover
26Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Voiceover
27Fabien_UX
Demo How a blind person can use Twitterhttpswwwyoutubecomwatchv=c0nvdiRdehwampt=38s
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
More to iOS than a touch screen
28Fabien_UX httpwwwapplecomukaccessibilityiosbraille-displayhtml
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Meet Andy
29Fabien_UX
Herersquos Andyhellip
A typical 20 something that went on holiday and decided to take a dive in the wrong placehellip
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Meet Andy
30Fabien_UX
and is now paralysed from the neck down
That means he struggled to do anything without someone helping him Just imagine what thatrsquos like
From one day to the next he couldnrsquot make a phone call on his own couldnrsquot send a text on his own needed someone to read to him Suddenly he had no independence and no privacy
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Meet Andy
31Fabien_UX
Luckily technology could help
He now has a solution thatrsquos integrated with his wheelchair
A chin joystick controls the Voiceover cursor on his iPhone
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
How to touch with no arms
32Fabien_UX
httpstoregriffintechnologycommouthstick-stylus
Thatrsquos a lot better than the early alternative which was just a stick to bite on
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Switch control
33Fabien_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
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Switch control
34Fabien_UX
Herersquos Christopher Hills Born with cerebral palsy he has limited control of his limbs
Hersquos using switches installed in his wheelchair head rest to control his devices
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built into iOS Switch control
35Fabien_UX
Christopherrsquos now a certified Apple Final Cut Pro editor
He produces a lot of video for YouTube including some that explain his setup
His Youtube channelhttpswwwyoutubecomusericdhills
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Built invoice commands
36Fabien_UX
Dictation + Digital assistants that understand natural language are next
ldquoRemind me to buy milk when I get of from my busrdquo
ldquoCall my wiferdquo
ldquoSet a timer for 10minrdquo
Not open to third parties for now
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
37Fabien_UX
All these capacities are built in but you need to do your part for it to work
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
So where do we start
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
A great A11y needs all
39Fabien_UX
Sales Scoping
Interaction Design
User Interface
SoftwareDevelopment
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
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Add a11y metadata to you UI
40Fabien_UX
AddAddsaamptle
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)
TraitDefine 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
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Documenting a11y metadata
41Fabien_UX
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
copy 2013 TigerSpike Confidential Last Update 11 02 2013 Page 5
Tigerspike London
Level G 1 amp 3 18 Buckingham Gate London SW1E 6LB United Kingdom l +44 20 7148 6600 l londontigerspikecom l wwwtigerspikecom
iPad 1404 PM
Velum - iPad publication iPad Wireframes amp Functional Overview10 Issue Library LS
LOGO
Issue Info Panel
10 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 slideback 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 amp [IF DLd] opens issue[Transition Slide horizontally] [A11y enabled Label Previous issue Hint Selects the issue ltissue titlegt Trait button image]
4 NEXT ISSUE COVER [Gesture Tap] Slides (animated) issues to next issue [Gesture Double Tap] Slides (animated) issues to next issue amp [IF DLd] opens issue[A11y enabled Label Next issue Hint Selects the issue ltissue titlegt 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 ltissue titlegt 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 ltissue titlegt Trait button image]
6 ISSUE INFO PANELSee 11 Issue Library - Issue Info Panel page
chronologically
1 2
3 4
6
5
This metadata shouldnrsquot be left for the developer to rush in at the last minute
Itrsquos 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
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Add a11y metadata to you UI
42Fabien_UX
httpsspeakerdeckcomspanageios-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
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Helps with automated testing
43Fabien_UXhttpcalabash
A11y metadata is often required to create automated UI tests
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Hook into standard gestures Escape
44Fabien_UX
= upback 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
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Hook into standard gestures Magic tap
45Fabien_UX
A two fingered double tap is the magic tap
2-finger double tap = do the most likely actionplaypause for media startend call take picturehellip also now used to expose further actions
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Hook into standard gestures the code
46Fabien_UX
-accessibilityPerformEscapecalltoyourcodetogetout
-accessibilityPerformMagicTapcalltoyourcodetodotheaction
Easy one line of code
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Legibility make font size adjustable
47Fabien_UX
+A-Ahellipor let Apple do the work and adopt Dynamic type
Simple but great outcome allow user to adapt the font size to their vision
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Avoid using colour only to convey meaning
48Fabien_UX
Normal vision Simulated colour blindness
httpwearecolorblindcomexampleichat
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Avoid gesture only interactions
49Fabien_UXClear
Gesture only interactions are unusable for Voiceover users
Very difficult for sighted users with mobility issues (although Adaptive touch can help)
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
How to check
50Fabien_UX
50 shades of somethingTest your graphics with colour blindness simulators
No peekingTry using your app using Voiceover screen off
Nothing like the real thingInclude users with impairments in usability testing
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Going the extra mile
ldquoGotheextramileitrsquosnevercrowdedrdquo
-unknown
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Cameraface recognition
52Fabien_UX
ldquoOne face Small face Face near right edge Auto-focussedrdquo
httpsvancablog2012blind
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 doesnrsquot mean that shersquos not facing something others would like to look at
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Ariadne GPS GPS
53Fabien_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
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
TapTapSee Eyes for the blind
54Fabien_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 yoursquore opening is milk rather than orange juice when yoursquore making coffee
Also can help recognise medication money clothes
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Instapaper special font for dyslexia
55Fabien_UX
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Everybody Technology - Stephen Hawkings Dream httpswwwyoutubecomwatchv=2Tel9UvJfws
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
On the web
Matt Gemmellrsquos Accessibility for iPhone and iPad appshttpmattgemmellcomaccessibility-for-iphone-and-ipad-apps
Applersquos dev resources on httpsdeveloperapplecomaccessibility
WWDC session on iOS accessibility httpsdeveloperapplecomvideosplaywwdc2015-201
Switch control on iOS httpssupportapplecomen-mzHT201370
Christopher Hillsrsquo youtube channel httpswwwyoutubecomusericdhillsfeed
Summer Panagersquos iOS accessibility inside and outhttpsspeakerdeckcomspanageios-accessibility-inside-and-out
Androidrsquos dev resources on accessibilityhttpsdeveloperandroidcomguidetopicsuiaccessibilityindexhtml
Accessibility features in Android Lollipophttpwwwandroidcentralcomaccessibility-features-android-50-lollipop
Android central on Accessibilityhttpwwwandroidcentralcomaccessibility
On twitter
iAmMaccing MarcoInEnglish mostgood
sommer RNIB andhellip Fabien_UX )
57Fabien_UX
Going further
Recommended
