Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Can everyone use your app?


Published on

How developers easily can test if their web or mobile apps are accessible for users with disabilities.

Slides from our presentation on Mobile Era 2016.

Published in: Mobile
  • Be the first to comment

Can everyone use your app?

  1. 1. Sofia Hussain @uxsophia Tom Widerøe @twidero Can everyone use your app?
  2. 2. Abdellaif Baka from Algeria won the 1500 meters for partially sighted in The Paralymics in Rio 2016. The top 4 runners in the final ran faster than the gold medal winner in The Olympics the same year. public/styles/story_large/public/thumbnails/ image/2016/09/13/09/abdellatif-baka.jpg
  3. 3. Why? How? Getting everyone on board 1 2 3 Accessibility
  4. 4. 1 Why should we care about accessiblity?
  5. 5. 17% of the population between 16 and 66 years are registered with temporary or permanent disabilities
  6. 6. Disabilities • Visual Blindness, low vision, color blindness • Hearing Deafness and hard-of-hearing • Motor Inability to use a mouse, slow response time, limited fine motor control • Cognitive Learning disabilities, distractibility, inability to remember or focus on large amounts of information
  7. 7. You are not disabled by the disabilities you have
  8. 8. Universal design ”The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” The centre for Universal Design, North Carolina University
  9. 9. Inclusive mobile society Mobile society
  10. 10. Annoying for some, impossible for others The signs on both sides of the road say «Please use sidewalk on the other side». How could a person in wheelchair pass this street in heavy traffic?
  11. 11. We can also make such blunders if we do not think about all our users.
  12. 12. How can blind people use smartphones? With assistive technologies, smartphones make life even easier for people with disabilities than for the rest of us Photo: VCG -
  13. 13. How can blind people take a selfie?
  14. 14. Physical abilities Photo: Images/Elephant-Balancing.jpg
  15. 15. It is hard to use sliders when you are sitting on a shaking bus
  16. 16. How we made it more accessible
  17. 17. 2 How can we design and develop for accessibility?
  18. 18. The Web Content Accessibility Guidelines (WCAG) It’s great that standards are in place, but it’s not easy to apply the standard in the creative phases of a design process
  19. 19. Death by standards Photo:
  20. 20. The straw test
  21. 21. Zoom
  22. 22. Zoom
  23. 23. Assistive technologies
  24. 24. Explore the accessibility settings on your phone
  25. 25. Filter for the color blind
  26. 26. Inverted colors, for people who are sensitive to bright light
  27. 27. Screen readers
  28. 28. VoiceOver seems to read content fra a different layer. BBC news logo is missing alternative text. <h> tag is not used on the headings, which makes it impossible to jump between headings.
  29. 29. This is how it should work
  30. 30. User tests • Different from regular user testing – Always allow users to test their own equipment – Fewer tasks – More guidance • Requires profound knowledge about assistive technologies
  31. 31. User tests Heading Content before heading Blind user can not find the close window button because it is placed before the heading in markup
  32. 32. User tests “One more field”. WTF? No shortcut to the missing field Blind user is unable to navigate to missing field because clickable text does not work with VoiceOver. It is hard to find the other missing fields when you can not see the fields that are missing.
  33. 33. How to avoid blunders
  34. 34. <button> – done <div class=button> – Make it look like a button – Make it work as a button – Show the right mouse pointer – Insert into tabindex – Make screen reader tell it is a button – +++ • Trust the browser Make it simple. Use standard elements.
  35. 35. Zoom • Do not lock the page size Do not take away the possibility to zoom a web page
  36. 36. 3 Getting everyone on board
  37. 37. The challenge is not to do things right, but to make your colleagues do it
  38. 38. Accessibility group in FINN Do not try to change the culture alone. In a group it is easier to get things done.
  39. 39. Workshops
  40. 40. Design guide
  41. 41. Give some friendly reminders of the importance og accessibility
  42. 42. Let them feel what it is like
  43. 43. Summary • Why? – So that products can be used by people with all ranges of sight, hearing, movement and cognitive abilities • How? – Use the straw test to see only small parts of a page – Do not only rely on one kind of input – Test with screen readers – Use standard components – Include people with disabilities in user tests • Getting everyone on board – Form a group, you can not take this fight alone – Keep reminding your colleagues – Run workshops to teach how to test for accessibility – Make accessibility a part of the style guide
  44. 44. Unknown possibilities The technology is there! Why can't we all use it?
  45. 45. We’re hiring iOS developers!
  46. 46. Thank you @UXSophia Sofia Hussain @twidero Tom Widerøe