Beyond the touch screen - better accessibility for mobile apps

  • Published on
    13-Apr-2017

  • View
    686

  • Download
    0

Transcript

  • Beyond the touch screen for a better accessibility of mobile apps

    Fabien Marry

    @Fabien_UX

  • Outline Introducing Nolle and everybody else

    Mobile devices are a godsend for accessibility

    Where do we start?

    Going the extra mile

    A message from Professor Hawking

    2@Fabien_UX

  • Introducing Nolle and everybody else

  • Meet Nolle

    4@Fabien_UX

    Meet Nolle, who was my grand mother

    She loved to get postcards when we went on holidays, so I wrote one to her every time I went somewhere.

    But her eyesight had declined to a point where she couldnt read most things...

  • Meet Nolle

    5@Fabien_UX

    I kept writing to her, but I just wrote larger.

    If you care a tiny bit, its often not that hard to include people with slightly different needs.

  • Not just Nolle

    6@Fabien_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)

    Everybodys eyesight gets worse with time, maybe much earlier that you would think...

    This is especially an issue to be aware of when your designers are all under 40!

  • 7@Fabien_UX http://www.inclusivedesigntoolkit.com/

    63 M Population

    11 M Disabled 8.5 M

    Arthritis

    9 M Hearing Impairment

    2 M Visual Impairment

    1 in 10 Left Handed

    8% Men 0.4% Women

    Colour Blind

    3.4 M Asthma

    1.5 M Diabetes

    The UK population in numbers

    http://www.hims-inc.com/products/deaf-blind-communicators/

  • Expand your addressable market

    8@Fabien_UX

    How many people have less than Full ability ?

    Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999)

    http://www.inclusivedesigntoolkit.com/

    http://www.hims-inc.com/products/deaf-blind-communicators/

  • Expand your addressable market

    9@Fabien_UX

    Source: The Henley Centre, Family Expenditure Survey (1996)

    http://www.inclusivedesigntoolkit.com/

    Money to spend and time to spend it

    The UKs 12 million disabled people have a spending power in excess of 80 billion.

    http://www.hims-inc.com/products/deaf-blind-communicators/

  • An ageing population

    10@Fabien_UX

    Japan

    As the population gets older in most developed countries, the need will only get greater.

  • Fantastic PR opportunity for your clients

    11@Fabien_UX

    Your product can now be accessible to vision impaired people

    for the first time

  • A legal requirement!

    12@Fabien_UX

    Another reason: The Disability Discrimination Act 1995 (DDA) gives people with disabilities important rights not to be discriminated against: in accessing everyday goods and services like shops, cafs, banks, cinemas and places of worship.

    Especially for Government and Enterprise.

    http://www.flickr.com/photos/bravosixninerdelta/7158071205/sizes/c/in/photostream/

  • People in the UK who have never used the internet

    13@Fabien_UX

    34%have a disability

    https://beta.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2015#disability

    Disability is a huge barrier to Internet access and full involvement in society.

  • Mobile devices are a godsend for a11y

  • A typical dedicated accessibility device

    16@Fabien_UX

    Only $7,595!

    Augmentative and alternative communication

    Not versatile

    Poor design leading to stigma

    Hard to find

    Expensive!

    https://store.prentrom.com/product_info.php/cPath/11/products_id/207

    https://store.prentrom.com/product_info.php/cPath/11/products_id/207

  • Accessibility features are now built in mainstream devices

    17@Fabien_UX

    Cheaper

    Better design

    Better build quality

    More features

    No stigma

    Cheaper, no stigma, well designed

    Today Im focusing on iOS as it is the most advanced

    Most of these features are also available on Android

  • Accessibility features are now built in mainstream devices

    18@Fabien_UX

    There's nothing on the iPhone or iPad that you can

    do that I can't doStevie Wonder

  • Built into iOS: Zoom

    19@Fabien_UX

    Simply zooms in

    Works everywhere but not very practical as requires constant panning

  • Built into iOS: Dynamic Type

    20@Fabien_UX

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

  • Built into iOS: Safari and its reader mode

    21@Fabien_UX

  • Built into iOS: Safari and its reader mode

    22@Fabien_UX

  • Built into iOS: High contrast mode

    23@Fabien_UX

    This psychedelic mode can help people with some vision impairments.

  • Built into iOS: Assistive Touch

    24@Fabien_UX

    Assistive Touch adds simple buttons to do things requiring precise hand control movements:

    multi finger gestures

    hardware buttons

    shake

    even customs gesture someone else can record for you

  • Built into iOS: Custom vibrations

    25@Fabien_UX

    iOS goes beyond visual and audio.

    Haptic can be used to communicate information with different vibration patterns.

  • Built into iOS: Voiceover

    26@Fabien_UX

    Demo: How a blind person can use Twitterhttps://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

    https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

  • Built into iOS: Voiceover

    27@Fabien_UX

    Demo: How a blind person can use Twitterhttps://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

    https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s

  • More to iOS than a touch screen

    28@Fabien_UX http://www.apple.com/uk/accessibility/ios/braille-display.html

    http://www.apple.com/uk/accessibility/ios/braille-display.html

  • Meet Andy

    29@Fabien_UX

    Heres Andy

    A typical 20 something that went on holiday, and decided to take a dive in the wrong place

  • Meet Andy

    30@Fabien_UX

    ...and is now paralysed from the neck down.

    That means he struggled to do anything without someone helping him. Just imagine what thats like.

    From one day to the next, he couldnt make a phone call on his own, couldnt send a text on his own, needed someone to read to him. Suddenly, he had no independence, and no privacy.

  • Meet Andy

    31@Fabien_UX

    Luckily technology could help.

    He now has a solution thats integrated with his wheelchair.

    A chin joystick controls the Voiceover cursor on his iPhone.

  • How to touch with no arms

    32@Fabien_UX

    http://store.griffintechnology.com/mouthstick-stylus

    Thats a lot better than the early alternative which was just a stick to bite on.

    http://store.griffintechnology.com/mouthstick-stylus

  • Built into iOS: Switch control

    33@Fabien_UX

    Since iOS 7, your device can be controlled by external switches.

    A switch is anything that can close an electric circuit: a big button, something that detect when you close your eyelid, or when you blow into it.

  • Built into iOS: Switch control

    34@Fabien_UX

    Heres Christopher Hills. Born with cerebral palsy, he has limited control of his limbs.

    Hes using switches installed in his wheelchair head rest to control his devices.

  • Built into iOS: Switch control

    35@Fabien_UX

    Christophers now a certified Apple Final Cut Pro editor.

    He produces a lot of video for YouTube, including some that explain his setup.

    His Youtube channel:https://www.youtube.com/user/icdhills

    https://www.youtube.com/watch?v=1AfbGQ2DYjg&t=3m4shttps://www.youtube.com/watch?v=GQKEE9nI1lk&t=1m25shttps://www.youtube.com/user/icdhills

  • Built invoice commands

    36@Fabien_UX

    Dictation + Digital assistants that understand natural language are next.

    Remind me to buy milk when I get of from my bus

    Call my wife

    Set a timer for 10min.

    Not open to third parties... for now.

  • 37@Fabien_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

    39@Fabien_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

    40@Fabien_UX

    AddAddsa&tle

    Accessibility enabled If false, element will be ignored completely by the VO cursor.

    Label Short spoken text after focus.

    Hint Longer spoken message after label and a pause (an explanation not a command).

    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

    41@Fabien_UX

    2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5

    Tigerspike London

    Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com

    iPad 14:04 PM

    Velum - iPad publication iPad Wireframes & Functional Overview1.0 Issue Library LS

    "LOGO "

    Issue Info Panel

    1.0 Issue Library LS

    Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings.

    1. SETTINGS BUTTON[Gesture: Tap] Goes to "Settings".[Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it 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* & [IF DL'd] opens issue[Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue ." Trait: button, image]

    4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue ."; 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: "." 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: "" Trait: button, image].

    6. ISSUE INFO PANELSee "1.1 Issue Library - Issue Info Panel" page.

    *chronologically

    1 2

    3 4

    6

    5

    2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5

    Tigerspike London

    Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com

    iPad 14:04 PM

    Velum - iPad publication iPad Wireframes & Functional Overview1.0 Issue Library LS

    "LOGO "

    Issue Info Panel

    1.0 Issue Library LS

    Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings.

    1. SETTINGS BUTTON[Gesture: Tap] Goes to "Settings".[Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it 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* & [IF DL'd] opens issue[Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue ." Trait: button, image]

    4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue[A11y: enabled; Label: "Next issue"; Hint: "Selects the issue ."; 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: "." 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: "" Trait: button, image].

    6. ISSUE INFO PANELSee "1.1 Issue Library - Issue Info Panel" page.

    *chronologically

    1 2

    3 4

    6

    5

    This metadata shouldnt be left for the developer to rush in at the last minute.

    Its 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

    42@Fabien_UX

    https://speakerdeck.com/spanage/ios-accessibility-inside-and-out

    For best result, you want to think how to group the accessibility metadata.

    The best solution is not always to define every element independently.

  • Helps with automated testing

    43@Fabien_UXhttp://calaba.sh/

    A11y metadata is often required to create automated UI tests.

  • Hook into standard gestures: Escape

    44@Fabien_UX

    = up/back, close, cancel

    A two-fingered Z motion is the standard gesture to escape modal boxes or go up one level in navigations.

    Already done if using standard navigation controllers.

  • Hook into standard gestures: Magic tap

    45@Fabien_UX

    A two fingered double tap is the magic tap.

    2-finger double tap = do the most likely action:play/pause for media, start/end call, take picture also now used to expose further actions.

  • Hook into standard gestures: the code

    46@Fabien_UX

    -accessibilityPerformEscape{//calltoyourcodetogetout}

    -accessibilityPerformMagicTap{//calltoyourcodetodotheaction}

    Easy: one line of code!

  • Legibility: make font size adjustable

    47@Fabien_UX

    +A-Aor 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

    48@Fabien_UX

    Normal vision Simulated colour blindness

    http:///wearecolorblind.com/example/ichat

    http:///wearecolorblind.com/example/ichat

  • Avoid gesture only interactions

    49@Fabien_UXClear

    Gesture only interactions are unusable for Voiceover users.

    Very difficult for sighte...

Recommended

View more >