How to move beyond the touch screen for a better accessibility of mobile and tablet native applications
•
3 gefällt mir•2,075 views
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/.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie How to move beyond the touch screen for a better accessibility of mobile and tablet native applications
Ähnlich wie How to move beyond the touch screen for a better accessibility of mobile and tablet native applications (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
How to move beyond the touch screen for a better accessibility of mobile and tablet native applications
- 1. How to go beyond the touch screen for a better accessibility of mobile and tablet native applications Fabien Marry @AlphabUX
- 2. Overview Introduction: Noëlle... and everybody else Mobile devices are a godsend for a11y Where do we start? A personal message from Prof. Hawking Going the extra mile
- 3. Introduction
- 6. Introduction Being inclusive is easy, you just have to care Slightly different needs + just a tiny bit of effort => inclusion
- 8. Introduction The U.K. population in numbers with disabilities http://www.inclusivedesigntoolkit.com/
- 9. Introduction People in the UK who have never used the internet have a disability
- 10. Introduction Expand addressable market Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999) http://www.inclusivedesigntoolkit.com/
- 11. Introduction Expand addressable market Source: The Henley Centre, Family Expenditure Survey (1996) http://www.inclusivedesigntoolkit.com/
- 13. Introduction Fantastic PR opportunity for your clients “Your product now accessible to vision impaired people for the first time”
- 15. Mobile devices are a godsend for a11y
- 16. Mobile devices are a godsend for a11y Typical dedicated accessibility device Only $7,595!
- 17. Mobile devices are a godsend for a11y Accessibility features are now built-in mainstream devices • Cheaper • Better design • Better build quality • More features • No stigma
- 18. Mobile devices are a godsend for a11y Accessibility features are now built-in mainstream devices “There's nothing on the iPhone or iPad that you can do that I can't do” Stevie Wonder
- 19. Mobile devices are a godsend for a11y Built in into iOS: Zoom
- 20. Mobile devices are a godsend for a11y Built in into iOS: High contrast mode
- 21. Mobile devices are a godsend for a11y Built into iOS: Assistive Touch
- 22. Mobile devices are a godsend for a11y Built in into iOS: custom vibration patterns
- 23. Mobile devices are a godsend for a11y Built in into iOS: Large Text mode
- 24. Mobile devices are a godsend for a11y Built in into iOS: Safari and its Reader
- 25. Mobile devices are a godsend for a11y Built in into iOS: Safari and its Reader
- 26. Mobile devices are a godsend for a11y Built in into iOS: Safari and its Reader
- 27. Mobile devices are a godsend for a11y Built in into iOS: Safari and its Reader
- 28. Mobile devices are a godsend for a11y Built in into iOS: Voiceover Demo: How a blind person can use email
- 29. Mobile devices are a godsend for a11y Meet Andy
- 30. Mobile devices are a godsend for a11y Meet Andy
- 31. Mobile devices are a godsend for a11y Meet Andy
- 32. Mobile devices are a godsend for a11y More to iOS than a touch screen http://www.gatech.edu/newsroom/release.html?nid=110351
- 33. Mobile devices are a godsend for a11y More to iOS than a touch screen http://www.hims-inc.com/products/deaf-blind-communicators/
- 34. Mobile devices are a godsend for a11y More to iOS than a touch screen http://store.griffintechnology.com/mouthstick-stylus
- 35. Mobile devices are a godsend for a11y More to iOS than a touch screen
- 36. Mobile devices are a godsend for a11y Changing lives... but only if you make your app accessible!
- 37. So where do we start? Sales Scoping UX UI Developme nt QA
- 38. So where do we start? If you can only do one thing: add a11y metadata to you UI • Accessibility enabled: if false, element will be ignored completely by the VO cursor. • Label: Short spoken text after focus. • Hint: Longer spoken message after label and a pause (an explanation not a command). • Trait: Define the type of interaction. Add Adds a title
- 39. So where do we start? A11y metadata is needed for automated testing
- 40. So where do we start? A11y metadata is needed for automated testing Feature: Rating a stand Scenario: Find and rate a stand from the list Given I am on the foodstand list Then I should see a "rating" button And I should not see "Dixie Burger" When I touch the "rating" button Then I should see "Dixie Burger" When I touch "star5" And I touch "rate" Then "Dixie Burger & Gumbo Soup" should be rated 5 stars http://calaba.sh/
- 41. So where do we start? Documenting a11y metadata
- 42. So where do we start? Hook into standard gestures: Escape
- 43. So where do we start? = up/back, close, cancel “Escape” Hook into standard gestures: Escape
- 44. So where do we start? Hook into standard gestures: Magic Tap
- 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. 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 the action }
- 47. So where do we start? Legibility: make font size adjustable +A-A
- 48. So where do we start? Same UI on iPad mini, but... 20% smaller and less sharp
- 49. So where do we start? Avoid using colour only to convey meaning Normal vision Simulated colourblindness http://http://wearecolorblind.com/example/ichat/
- 50. So where do we start? Avoid using colour only to convey meaning Normal vision Simulated colourblindness http://http://wearecolorblind.com/example/ichat/
- 51. So where do we start? Avoid gesture only interactions Clear
- 52. So where do we start? How to check? • 50 shades of something: Test your graphics with colourblindness simulators • No peeking: Conduct QA using voice over, screen off. • Nothing like the real thing: Include users with impairments in usability testing.
- 53. Going the extra mile “Go the extra mile... it’s never crowded.”- unknown
- 54. Going the extra mile Camera: face recognition “One face. Small face. Face near right edge. Auto- focussed”. http://svan.ca/blog/2012/blind/
- 55. Going the extra mile Ariadne GPS: GPS Uses GPS to help Blind persons explore
- 56. Going the extra mile TapTapSee: Image recognition You take a picture, it tells you what it sees.
- 57. Going the extra mile Instapaper: special font to help people with dyslexia.
- 58. Video: Everybody Technology - Stephen Hawking's Dream on youtube
- 59. Thanks! Follow me on twitter @AlphabUX!
Hinweis der Redaktion
- 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...