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.

Experiencing digital accessibility (FEL 2018)

206 views

Published on

If empathy is about understanding people, accessibility is about understanding people and the barriers that they face. Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications.

In this talk, Jon Gibbins gives a practical introduction to accessibility for front end designers and developers. He will walk through some typical accessibility barriers and situations where an accessible user experience does not necessarily come from simply adhering to accessibility guidelines. Find out how you can easily experience accessibility for yourself using something you likely have in your pocket – a smartphone. Leave with some tips under your belt and a grasp of some technical fundamentals that are often the missing piece of the puzzle for developers' understanding of accessibility.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Experiencing digital accessibility (FEL 2018)

  1. 1. Front Endgineers London 19 September 2018 Jon Gibbins
  2. 2. Photo credits: LG, Gould, Larson, DiC, Apple
  3. 3. Photo credit: Jon Gibbins with thanks to Drake Music Project
  4. 4. “Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications” – Jon Gibbins, Nov 2007
  5. 5. Most of us have a connection to accessibility
  6. 6. Mobile experiences
  7. 7. Ageing
  8. 8. is about understanding people
  9. 9. is about understanding people and the barriers that they face
  10. 10. is about understanding disabled people and the barriers that they face
  11. 11. …is a human right
  12. 12. …is just good design
  13. 13. 4 main disability types
  14. 14. blind, partially sighted
  15. 15. Deaf, deaf, hard of hearing
  16. 16. limited movement or control
  17. 17. dyslexia, autism…
  18. 18. • Speech output (screen readers) • Braille output • Magnification • Voice input • Switch access
  19. 19. • Captions • Subtitles • Audio description • Sign language interpretation
  20. 20. Text alternatives
  21. 21. • • •
  22. 22.
  23. 23. 45
  24. 24. 46
  25. 25. Writing style • Make your point clear first then explain • One point per paragraph • Use short line lengths wherever possible • Helps people who are deaf, have dyslexia, dementia or other cognitive and learning disabilities
  26. 26. CAPS • Harder to read (dyslexia) • Shouting, caps can cause different reading by screen readers
  27. 27. Emphasis “Skip to content” vs “Skip to main content” “con tent” vs “con tent”
  28. 28. Hyphenation iOS enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian) e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) Android enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound) e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)
  29. 29. Compound words Compound words are commonplace • Homepage • Sitemap • "Signup" announced as "sig–nup" in VoiceOver iOS Spaces and hyphens are your friends.
  30. 30. Read / Reading “Reeding” vs “Redding” <h2>Get reading</h2> = “Get Redding” <a href="#">Read more</a> = “Red more”
  31. 31. Date format ambiguity, clarity (e.g. US versus UK) 01 03 2015 could be “1st of March” …or “3rd of January”
  32. 32. Date format "2013" = “twenty thirteen inches” “Date expected in dd/mm/yyyy format” “millimetres” in some speech engines
  33. 33. Long numbers Phone numbers Company numbers <span> trick <span>0123</span>4567 CSS 3 speak-as: digits Very poor support but should improve
  34. 34. Why mobile accessibility?
  35. 35. Mobile accessibility features
  36. 36. 2 main interaction methods
  37. 37. • • • Interaction methods 1. Explore by touch
  38. 38. • • • Interaction methods 2. Gesture navigation
  39. 39. • • • • •
  40. 40. …you do
  41. 41. • • • • • •
  42. 42. …It really needn’t be
  43. 43. • • • Tips
  44. 44. • • • • Next steps
  45. 45. • • • • Thanks!
  46. 46. 87
  47. 47. • • https://www.w3.org/TR/WCAG21/ • • https://www.w3.org/WAI/WCAG21/Techniques/ • • https://www.w3.org/WAI/WCAG21/Understanding/ • • https://www.w3.org/WAI/WCAG21/Understanding/conf ormance • • https://www.w3.org/WAI/WCAG21/quickref/ References

×