Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

How to improve your website’s accessibility without going crazy

3.101 Aufrufe

Veröffentlicht am

Slides from my talk at UX Day Graz

Veröffentlicht in: Bildung

How to improve your website’s accessibility without going crazy

  1. 1. Howto Improve Your Website’s Accessibility Without Going Crazy Eric Eggert ee@w3.org • yatil W3C/Web Accessibility Initiative
  2. 2. – w3.org/accessibility The Web is fundamentally designed to work for all  people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
  3. 3. Accessibility: Make sure that People with disabilities can effectively interact with the Web
  4. 4. – Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”) “On the web, every decision I make can have a profound effect on hundreds of thousands (if not millions) of people’s lives. I can make checking into a flight a breeze, or I can make it a living hell. That’s a lot of power. And to quote Stan Lee: ‘With great power comes great responsibility.’”
  5. 5. >1 billion Persons with some form of disability — WHO Report 2011
  6. 6. 15% Persons with some form of disability — WHO Report 2011
  7. 7. @dstorey
  8. 8. People Accessibility Usability People
  9. 9. users is People
  10. 10. Q: How do People With Disabilities Use the web?
  11. 11. Browser Web Content
  12. 12. Browser Web Content Assistive tech
  13. 13. Zoom
  14. 14. Pinch Out by Julie Muckensturm from the Noun Project
  15. 15. Single Switch
  16. 16. Braille
  17. 17. customizations
  18. 18. Captions
  19. 19. Resource: How People with Disabilities Use the Web w3.org/WAI/intro/people-use-web/
  20. 20. Q: Accessibility sounds complicated.
  21. 21. Q: How do I start with Accessibility?
  22. 22. Designers Content creators Developers
  23. 23. Resource: Tips for getting started with web accessibility w3.org/WAI/gettingstarted/tips/
  24. 24. Q: How do I make sure my website is accessible?
  25. 25. Resource: Web Content Accessibility Guidelines (WCAG) 2.0 w3.org/TR/WCAG/
  26. 26. Principles: Perceivable Operable Understandable Robust
  27. 27. Perceivable: Meaningful Sequence
  28. 28. Perceivable: TextAlternatives
  29. 29. <button> <span class="icon icon-pencil"> </span> </button>
  30. 30. <button title="Edit"> <span class="icon icon-pencil"> </span> </button>
  31. 31. <button title="Edit"> <span class="icon icon-pencil-kaput“> </span> </button>
  32. 32. ImageS
  33. 33. <button> <img src="pencil.png" alt="Edit"> </button>
  34. 34. <button> <img src="pencil.svg" alt="Edit"> </button>
  35. 35. Resource: Image Tutorial w3.org/WAI/tutorials/images/
  36. 36. Resource: Web Accessibility Tutorials w3.org/WAI/tutorials/ <aside>
  37. 37. Page structure (Draft) Menus (Draft) images Tables forms carousels (Draft) </aside>
  38. 38. Visible text labels
  39. 39. <button> <span class="icon icon-pencil"> </span> Edit </button>
  40. 40. Perceivable: Color Contrast
  41. 41. Operable: usable with a Keyboard
  42. 42. Operable: Ability to bypass blocks
  43. 43. Operable: Proper headings F labels
  44. 44. Understandable: Page language
  45. 45. Understandable: Consistent Navigation
  46. 46. Understandable: Indicate errors
  47. 47. Robust: Compatibility
  48. 48. Q: How do I make sure that the user experience is accessible?
  49. 49. You achiEve the best results when…
  50. 50. Accessibility is not an afterthought
  51. 51. Smooth use of your product
  52. 52. Everything feels coherent
  53. 53. No compromises
  54. 54. No need to rebuild
  55. 55. Accessibility is an opportunity
  56. 56. Reach more people
  57. 57. makes your web project easy to understand
  58. 58. consistent layout H Navigation
  59. 59. Accessibility is A creative outlet
  60. 60. Produce the best video player UI
  61. 61. Consider the order of the content
  62. 62. Take the available data and do something no one expects
  63. 63. thankyou. Eric Eggert W3C/Web accessibility initiative ee@w3.org & @yatil

×