Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Where UX fails Accessibility : Alastair Campbell

1.467 visualizaciones

Publicado el

Video: https://youtu.be/NrD5MlYcAZ8
UX and accessibility go hand in hand, without a good UX process creating a usable product, no amount of work on accessibility will make it good for people with disabilities.

You can think of UX as optimising for the majority, and accessibility and scaling out an interface for minorities, but where do those aims conflict? There are interfaces being created for “great UX” that are fundamentally inaccessible. Do they need to be?

At each stage of design there are four questions I ask to ensure an interface is accessible. If you can build those into your process, you won’t get blindsided after launch.

Publicado en: Diseño
  • Sé el primero en comentar

Where UX fails Accessibility : Alastair Campbell

  1. 1. Where UX fails accessibility Alastair Campbell
  2. 2. ” Digital Accessibility Web Standards UX Access technologies
  3. 3. Usable, but inaccessible?
  4. 4. When to consider accessibility?
  5. 5. When to define? Requirements gathering & Planning Sketching / Wireframes / Prototype Visual design Implementation /coding Adding content QA / testing
  6. 6. Define accessibility early 0 7.5 15 22.5 0 7.5 15 22.5 30 37.5 Planning Sketching Visual design Coding Content QA / testing Checks Project Activity
  7. 7. The real failure Not thinking of accessibility during the design process
  8. 8. Using guidelines?
  9. 9. Using Personas?
  10. 10. Expert user (with a disability)
  11. 11. FOCUS GROUP OF EXPERTS Expert users?
  12. 12. Stick it on the backlog?
  13. 13. Design for each Disability? Vision Hearing Motor Cognitive
  14. 14. By Disability? Keyboard / switch Mouse / eye tracking Speech recognition Magnification Colour/contrast adjustments Audio output Screen reader Vision Hearing Motor Cognitive
  15. 15. By Disability? Vision Hearing Motor Cognitive Keyboard / switch Mouse / eye tracking Speech recognition Magnification Colour/contrast adjustments Audio output Screen reader
  16. 16. By interaction method • Keyboard only • Screen magnification • Screen reader • Cognitive & Deafness
  17. 17. Keyboard only
  18. 18. iPod iPad iPhone
  19. 19. Interaction effects • Linear interaction, link by link • Lots of key-presses • Visuals important
  20. 20. Default Zoomed Magnified Screen magnification
  21. 21. Interaction effects • In a non-responsive design, you get horizontal scrolling. • Mainly about layout issues/bugs • Good contrast on text helps • Very ‘mouse’ driven • Field of attention small
  22. 22. Screen readers
  23. 23. Hidden structure To convey your structure, you need to understand when to use: • Headings (levels 1-6), Lists, Tables • Landmarks (“ARIA roles”) • Some HTML5, e.g. <section> • ARIA roles, states & properties for JS widgets ARIA = Accessible Rich Internet Applications from the W3C
  24. 24. Interaction effects • Linear interaction, line at a time in source order • Headings, landmarks, and find-text to skim read • Can use hidden support text • Depends on learned keyboard commands
  25. 25. Cognitive & Deafness
  26. 26. Interaction effects • Choosing links that might be right, not knowing • Getting stuck on literal interpretations • Looking for help and alternative options
  27. 27. The four questions • Can you use it with a keyboard? • Can you see it when zoomed? • Does it provide appropriate information to screen readers? • Is it easy to understand?
  28. 28. Sketches / Wireframes
  29. 29. Visual design
  30. 30. Implementation • Test as you build, it is everyone’s responsibility • Go through the 4 interaction styles for each component / build stage • Automated testing can be useful for catching some issues Implementation
  31. 31. Automated testing alt = “Dog”
  32. 32. Prevention beats cure
  33. 33. Elegant Accessibility
  34. 34. Skip links
  35. 35. Skip links
  36. 36. • Can you use it with a keyboard? • Can you see it when zoomed? • Does it provide appropriate information to screen readers? • Is it easy to understand?
  37. 37. Questions?

×