How to go beyond the touch screenfor a better accessibility of mobile andtablet native applicationsFabien Marry@AlphabUX
OverviewIntroduction: Noëlle... andeverybody elseMobile devices are a godsend fora11yWhere do we start?A personal message ...
Introduction
IntroductionMeet Noëlle
IntroductionMeet Noëlle
IntroductionBeing inclusive is easy, you just have to careSlightly different needs+ just a tiny bit of effort=> inclusion
IntroductionNot just Noëlle...HigherLower
IntroductionThe U.K. population in numberswith disabilitieshttp://www.inclusivedesigntoolkit.com/
IntroductionPeople in the UK who have never used theinternethave a disability
IntroductionExpand addressable marketSource: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999)http://www.inclus...
IntroductionExpand addressable marketSource: The Henley Centre, Family Expenditure Survey (1996)http://www.inclusivedesign...
IntroductionAn ageing populationJapan
IntroductionFantastic PR opportunity for your clients“Your product now accessible tovision impaired peoplefor the first ti...
IntroductionLegal requirement
Mobile devices are a godsendfor a11y
Mobile devices are a godsend for a11yTypical dedicated accessibility deviceOnly$7,595!
Mobile devices are a godsend for a11yAccessibility features are now built-in mainstreamdevices• Cheaper• Better design• Be...
Mobile devices are a godsend for a11yAccessibility features are now built-in mainstreamdevices“Theres nothing on theiPhone...
Mobile devices are a godsend for a11yBuilt in into iOS: Zoom
Mobile devices are a godsend for a11yBuilt in into iOS: High contrast mode
Mobile devices are a godsend for a11yBuilt into iOS: Assistive Touch
Mobile devices are a godsend for a11yBuilt in into iOS: custom vibration patterns
Mobile devices are a godsend for a11yBuilt in into iOS: Large Text mode
Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
Mobile devices are a godsend for a11yBuilt in into iOS: VoiceoverDemo: How a blind person can use email
Mobile devices are a godsend for a11yMeet Andy
Mobile devices are a godsend for a11yMeet Andy
Mobile devices are a godsend for a11yMeet Andy
Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://www.gatech.edu/newsroom/release.html?nid=110351
Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://www.hims-inc.com/products/deaf-blind-communicat...
Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://store.griffintechnology.com/mouthstick-stylus
Mobile devices are a godsend for a11yMore to iOS than a touch screen
Mobile devices are a godsend for a11yChanging lives... but only if you make your appaccessible!
So where do westart?Sales ScopingUXUIDevelopmentQA
So where do we start?If you can only do one thing: add a11y metadata to youUI• Accessibility enabled: if false, element wi...
So where do we start?A11y metadata is needed for automated testing
So where do we start?A11y metadata is needed for automated testingFeature: Rating a standScenario: Find and rate a stand f...
So where do we start?Documenting a11y metadata
So where do we start?Hook into standard gestures: Escape
So where do we start?= up/back, close, cancel“Escape”Hook into standard gestures: Escape
So where do we start?Hook into standard gestures: Magic Tap
So where do we start?= do the most likely action:play/pause for media,start/end call, take picture...2-finger double tap“M...
So where do we start?- accessibilityPerformEscape {// call to your code to get out}Hook into standard gestures: code- acce...
So where do we start?Legibility: make font size adjustable+A-A
So where do we start?Same UI on iPad mini, but... 20% smaller andless sharp
So where do we start?Avoid using colour only to convey meaningNormal vision Simulated colourblindnesshttp://http://weareco...
So where do we start?Avoid using colour only to convey meaningNormal vision Simulated colourblindnesshttp://http://weareco...
So where do we start?Avoid gesture only interactionsClear
So where do we start?How to check?• 50 shades of something: Test your graphics withcolourblindness simulators• No peeking:...
Going the extramile“Go the extramile... it’snever crowded.”- unknown
Going the extra mileCamera: face recognition“One face. Small face. Face near right edge. Auto-focussed”. http://svan.ca/bl...
Going the extra mileAriadne GPS: GPSUses GPS to help Blind persons explore
Going the extra mileTapTapSee: Image recognitionYou take a picture, it tells you what it sees.
Going the extra mileInstapaper: special font to help people withdyslexia.
Video:Everybody Technology -Stephen Hawkings Dream onyoutube
Thanks!Follow me on twitter@AlphabUX!
Upcoming SlideShare
Loading in …5
×

How to move beyond the touch screen for a better accessibility of mobile and tablet native applications

1,642 views

Published on

Slides from the presentation I gave at the User Experience Professional Association UK (UXPA-UK) for their Global Accessibility Awareness day.

A video of the presentation is available on youtube: http://www.youtube.com/watch?v=icbc6ANF3uA#t=2m40s


More info at http://uxpa-uk.org/events/may-event-global-accessibility-awareness-day-gaad/.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,642
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Meet Noelle, my grand mother. She ’ s 95, and in incredibly in good shape... She loves to get postcards when we go on holidays, so I written one to her every time I went somewhere. But her eyesight has decreased to a point where she couldn ’ t read most things...
  • I keep writing to her, but I just write larger
  • Everybody ’ s eyesight gets worse with time, maybe much earlier that you would think... This is especially an issue to be aware of when your designers are all under 40!
  • Sources http://www.inclusivedesigntoolkit.com / 11 million children - http://www.11million.org.uk / 10 million disabled (DRC) 9 million hearing RNID 2 million vision RNIB 8 Million arthritis, 3.4M Asthma, 1.5M Diabetes http://64.233.183.104/search?q=cache:ZebNZaBsEqUJ:www.dh.gov.uk/prod_consum_dh/groups/dh_digitalassets/%40dh/%40en/documents/digitalasset/dh_4018578.pdf+arthritis+number+uk+dh&hl=en&ct=clnk&cd=1&gl=uk 14 Million Grandparents http://www.grandparents-association.org.uk /
  • Reason to care 1: Disability is a huge barrier to Internet access and full society involvement
  • Reason to care 2
  • the UK ’ s 12 million disabled people have a spending power in excess of £80 billion
  • As the population gets older in most developed countries, the needs will only get greater.
  • Reason to care 3
  • Reason 4: The Disability Discrimination Act 1995 (DDA) gives people with disabilities important rights not to be discriminated against: in accessing everyday goods and services like shops, cafés, banks, cinemas and places of worship Especially for Government and Enterprise http://www.flickr.com/photos/bravosixninerdelta/7158071205/sizes/c/in/photostream/
  • 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
  • Cheaper, no stigma, well designedFocus on iOS as most advanced, some of these also on android
  • Having a11y features built-in strongly contribute to bridging that digital access divide.
  • Simply zooms in, works everywhere but not very practical as require panning constantly
  • Can help people with poor vision
  • Provide software 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.
  • Not just visual and audio: Haptic can also be used to communicate information with different vibration patterns.
  • Only for a few first party apps.
  • Safari doesn ’ t follow the “ large text ” setting, nor does it provide an immediate “ larger font ” button.
  • Can usually pinch and zoom (sometime responsive get in the way on mobile)
  • And this mode has a font size button.
  • Voice over is the gateway to all kind of accessibility support.
  • Meet Andy. Your average twenty something bloke. He went on holiday, and while diving in a pool... he hit a rock. He hurt himself really bad.
  • ...and is now paralysed from the neck down. That means he pretty much couldn ’ t do anything without someone doing it for him. *slow* Just try to imagine what it can be like From one day to the next, he couldn ’ t make a phone call on his own couldn ’ t send a text on his own needed someone to read him Suddenly, he had no independence, and no privacy.
  • Luckily technology is here. He now use iPortal, a solution integrated with his wheelchair, that use a chin joystick to control the voice over cursor on his iPhone.
  • The voice over system allow all kind of inputs... also Interactive headrests.
  • Smartphones have many more input devices than just a touch screen: Braille keyboard: enter and read text
  • Mouth stick stylus, simple and low cost, can already help a lot.
  • Digital assistant understanding natural language are the next step, “ remind me to buy milk when I get of from my bus ” . Not open to third parties... for now.
  • All these capacities are built in, but you need to do your part for it to work.
  • In a business, selling products with good accessibility is a team effort: sales need to mention it as this is value added for our clients Scoping need to factor it in our estimates UX needs to completely design an app that doesn ’t rely on graphics UI needs to think about readability, colour contrast, colour blindness
  • Most of these already done if you are using standard ui elements! Buttons NEED an a11y label if they don ’ t have a visible text label. https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Making_Application_Accessible/Making_Application_Accessible.html#//apple_ref/doc/uid/TP40008785-CH102-SW5 This is not part of the GUI, but it is the key foundation for UI for voiceover. More than that 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.
  • Our developers tell us that they do automated testing with Cucumber... in my head it looks like this Although the reality is much boring... http://www.geekologie.com/2012/11/it-nears-robot-wielding-knife-cuts-a-cuc.php
  • Cucumber is a scripting language, controlling your apps, paired with a system called “ Calabash ” that report if the task worked or not. They need the a11y metadata to work! Kill two birds with one stone.
  • This metadata shouldn ’ t be let for the developer to rush in at the last minute. It ’ s part of your application just like any text displayed, and should be given the same consideration regarding brand and tone of voice. Should be done at the UX stage, and part of the documentation.
  • 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
  • Real easy: one line of code!
  • Simple but great outcome: allow user to adapt the font size to their vision.
  • Not everybody can do the gestures, and if there is no element present on screen, it can ’ t be seen or activated via Voiceover and external inputs. This is unusable for Voiceover user, and very difficult for sighted user with mobility issues (although Adaptive touch can help).
  • Go the extra mile: use the hardware and software capacities (here face detection) to think outside of the box, and allow even blind users to take and hare pictures.
  • GPS + Voiceover = a great apps help blind people explore cities and landscape, can set key location, alert before when approaching the right bus stop
  • Camera + image recognition + crowd sourced analysis = Great when you want to make sure that the bottle you ’ re opening is milk rather than orange juice to pour in you coffee. Also potential to help recognise drugs, money, clothes...
  • How to move beyond the touch screen for a better accessibility of mobile and tablet native applications

    1. 1. How to go beyond the touch screenfor a better accessibility of mobile andtablet native applicationsFabien Marry@AlphabUX
    2. 2. OverviewIntroduction: Noëlle... andeverybody elseMobile devices are a godsend fora11yWhere do we start?A personal message from Prof.HawkingGoing the extra mile
    3. 3. Introduction
    4. 4. IntroductionMeet Noëlle
    5. 5. IntroductionMeet Noëlle
    6. 6. IntroductionBeing inclusive is easy, you just have to careSlightly different needs+ just a tiny bit of effort=> inclusion
    7. 7. IntroductionNot just Noëlle...HigherLower
    8. 8. IntroductionThe U.K. population in numberswith disabilitieshttp://www.inclusivedesigntoolkit.com/
    9. 9. IntroductionPeople in the UK who have never used theinternethave a disability
    10. 10. IntroductionExpand addressable marketSource: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999)http://www.inclusivedesigntoolkit.com/
    11. 11. IntroductionExpand addressable marketSource: The Henley Centre, Family Expenditure Survey (1996)http://www.inclusivedesigntoolkit.com/
    12. 12. IntroductionAn ageing populationJapan
    13. 13. IntroductionFantastic PR opportunity for your clients“Your product now accessible tovision impaired peoplefor the first time”
    14. 14. IntroductionLegal requirement
    15. 15. Mobile devices are a godsendfor a11y
    16. 16. Mobile devices are a godsend for a11yTypical dedicated accessibility deviceOnly$7,595!
    17. 17. Mobile devices are a godsend for a11yAccessibility features are now built-in mainstreamdevices• Cheaper• Better design• Better build quality• More features• No stigma
    18. 18. Mobile devices are a godsend for a11yAccessibility features are now built-in mainstreamdevices“Theres nothing on theiPhone or iPad that youcan do that I cant do”Stevie Wonder
    19. 19. Mobile devices are a godsend for a11yBuilt in into iOS: Zoom
    20. 20. Mobile devices are a godsend for a11yBuilt in into iOS: High contrast mode
    21. 21. Mobile devices are a godsend for a11yBuilt into iOS: Assistive Touch
    22. 22. Mobile devices are a godsend for a11yBuilt in into iOS: custom vibration patterns
    23. 23. Mobile devices are a godsend for a11yBuilt in into iOS: Large Text mode
    24. 24. Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
    25. 25. Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
    26. 26. Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
    27. 27. Mobile devices are a godsend for a11yBuilt in into iOS: Safari and its Reader
    28. 28. Mobile devices are a godsend for a11yBuilt in into iOS: VoiceoverDemo: How a blind person can use email
    29. 29. Mobile devices are a godsend for a11yMeet Andy
    30. 30. Mobile devices are a godsend for a11yMeet Andy
    31. 31. Mobile devices are a godsend for a11yMeet Andy
    32. 32. Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://www.gatech.edu/newsroom/release.html?nid=110351
    33. 33. Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://www.hims-inc.com/products/deaf-blind-communicators/
    34. 34. Mobile devices are a godsend for a11yMore to iOS than a touch screenhttp://store.griffintechnology.com/mouthstick-stylus
    35. 35. Mobile devices are a godsend for a11yMore to iOS than a touch screen
    36. 36. Mobile devices are a godsend for a11yChanging lives... but only if you make your appaccessible!
    37. 37. So where do westart?Sales ScopingUXUIDevelopmentQA
    38. 38. So where do we start?If you can only do one thing: add a11y metadata to youUI• Accessibility enabled: if false, element willbe ignored completely by the VO cursor.• Label: Short spoken text after focus.• Hint: Longer spoken message after labeland a pause (an explanation not acommand).• Trait: Define the type of interaction.AddAdds a title
    39. 39. So where do we start?A11y metadata is needed for automated testing
    40. 40. So where do we start?A11y metadata is needed for automated testingFeature: Rating a standScenario: Find and rate a stand from the listGiven I am on the foodstand list ThenI should see a "rating" button And I should notsee "Dixie Burger" When I touch the "rating" buttonThen I should see "Dixie Burger" WhenI touch "star5" And I touch "rate" Then"Dixie Burger & Gumbo Soup" should be rated 5starshttp://calaba.sh/
    41. 41. So where do we start?Documenting a11y metadata
    42. 42. So where do we start?Hook into standard gestures: Escape
    43. 43. So where do we start?= up/back, close, cancel“Escape”Hook into standard gestures: Escape
    44. 44. So where do we start?Hook into standard gestures: Magic Tap
    45. 45. So where do we start?= do the most likely action:play/pause for media,start/end call, take picture...2-finger double tap“Magic tap”Hook into standard gestures: Magic Tap
    46. 46. So where do we start?- accessibilityPerformEscape {// call to your code to get out}Hook into standard gestures: code- accessibilityPerformMagicTap{// call to your code to do theaction}
    47. 47. So where do we start?Legibility: make font size adjustable+A-A
    48. 48. So where do we start?Same UI on iPad mini, but... 20% smaller andless sharp
    49. 49. So where do we start?Avoid using colour only to convey meaningNormal vision Simulated colourblindnesshttp://http://wearecolorblind.com/example/ichat/
    50. 50. So where do we start?Avoid using colour only to convey meaningNormal vision Simulated colourblindnesshttp://http://wearecolorblind.com/example/ichat/
    51. 51. So where do we start?Avoid gesture only interactionsClear
    52. 52. So where do we start?How to check?• 50 shades of something: Test your graphics withcolourblindness simulators• No peeking: Conduct QA using voice over, screen off.• Nothing like the real thing: Include users with impairmentsin usability testing.
    53. 53. Going the extramile“Go the extramile... it’snever crowded.”- unknown
    54. 54. Going the extra mileCamera: face recognition“One face. Small face. Face near right edge. Auto-focussed”. http://svan.ca/blog/2012/blind/
    55. 55. Going the extra mileAriadne GPS: GPSUses GPS to help Blind persons explore
    56. 56. Going the extra mileTapTapSee: Image recognitionYou take a picture, it tells you what it sees.
    57. 57. Going the extra mileInstapaper: special font to help people withdyslexia.
    58. 58. Video:Everybody Technology -Stephen Hawkings Dream onyoutube
    59. 59. Thanks!Follow me on twitter@AlphabUX!

    ×