O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introduction to Web Accessibility

260 visualizações

Publicada em

What is web accessibility?
This presentation defines what is accessibility, and who are the people who might have problems using a website.
We explain how they browse the web and what are their common problems.
Then we explain how to make websites more accessible by following the WCAG guidelines.
Finally, we present a few examples of accessibility issues, and show how correcting them is also useful to other users.

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Introduction to Web Accessibility

  1. 1. Web accessibility For who? How? Why? 21.05.2019 • Hamburg
  2. 2. Make the web available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability. “ W3C Mission
  3. 3. Accessibility is about... Environment Disabilities
  4. 4. We do things for people
  5. 5. Sensory Physical Cognitive Typology of impairments
  6. 6. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Cognitive Typology of impairments
  7. 7. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Reduced dexterity Amputee Paralyzed Cognitive Typology of impairments
  8. 8. Sensory Blindness and low vision Colorblindness Hearing loss and deafness Physical Reduced dexterity Amputee Paralyzed Cognitive Learning disabilities Distractibility Mental health Typology of impairments
  9. 9. The accessible web: tools and strategies
  10. 10. Assistive Technologies Adaptive Strategies
  11. 11. screen reader screen magnifier Assistive technologies voice interface
  12. 12. Dyslexic, Web extension by Jari Eskelinen Adaptive strategies
  13. 13. Helping people with sensory disabilities ● Provide captions or transcript ● Provide text alternatives to images and icons ● Support keyboard ● Use correct landmark ● Make sure there is enough contrast ● Text content is understandable without presentation
  14. 14. Helping people with physical disabilities ● Provide text alternatives to images and icons ● Support keyboard ● Use sufficient time limits ● Use correct landmark
  15. 15. Helping people with cognitive disabilities ● Avoid complex navigation and page layouts ● Avoid complex sentences and unusual words ● Use illustrations or icons to enforce meaning ● Make sure users can suppress animations and audio ● Make sure content is understandable without presentation
  16. 16. Improve and evaluate
  17. 17. Norms and specifications WAI-ARIA 2014 Accessible Rich Internet Applications WCAG 1.0 1999 Web Content Accessibility Guidelines WCAG 2.0 2008 W3C 1994
  18. 18. Reminder: HTML is awesome
  19. 19. Quickref preview “Image is too big to be displayed”
  20. 20. Must do Should do May do WCAG Levels A AA AAA
  21. 21. Perceptible Operable Understandable WCAG overview
  22. 22. Perceptible ● Text alternatives for non-text content ● Content can be presented in different ways ● Content is easy to see and hear ● Content is distinguishable
  23. 23. Operable ● Keyboard accessible ● User is given enough time ● Easy to navigate, find content, determine where you are ● Easy input modalities
  24. 24. Understandable ● Text is readable and understandable ● Content appears and operates in predictable ways ● Input assistance
  25. 25. Let’s see examples
  26. 26. 1.4.1 Use of color
  27. 27. image: https://www.uxbooth.com/articles/accessibility-visual-design/
  28. 28. 1.4.1 Use of color image: https://www.uxbooth.com/articles/accessibility-visual-design/
  29. 29. image: https://www.uxbooth.com/articles/accessibility-visual-design/
  30. 30. Trello “Color Blind Friendly” mode
  31. 31. 2.2 Enough time image: https://medium.com/@sheribyrnehaber/designing-toast-messages-for-accessibility-fb610ac364be
  32. 32. 1.1 Text alternatives
  33. 33. 1.1 Text alternatives
  34. 34. 1.3.2 Meaningful Sequence image: https://material.io/design/usability/ accessibility.html#hierarchy
  35. 35. <nav> <section> <h1> <h2>... Semantic HTML
  36. 36. ~15% of people have a disability
  37. 37. Good accessibility will also...
  38. 38. Boost SEO
  39. 39. Benefit other users
  40. 40. Resources & References
  41. 41. Tools for everybody! Developers ● WCAG Quick Ref • https://www.w3.org/WAI/WCAG21/quickref/ ● WAI-ARIA • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ● Web developer addon • https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Designers ● Material design Accessibility guidelines • https://material.io/design/usability/accessibility.html ● WCAG contrast checker • https://contrastchecker.com/ ● Browser extensions to test colors Content creators ● SEO writing tips (tools such as Yoast SEO) ● Text complexity checkers
  42. 42. Sources General infos and techniques How people use the web • https://www.w3.org/WAI/people-use-web/ Assistive technologies & Adaptive strategies • https://www.w3.org/WAI/people-use-web/tools-techniques/ Accessibility for Visual Design, Nick Babich • https://www.uxbooth.com/articles/accessibility-visual-design Accessibility and SEO overlap • https://moz.com/blog/accessibility-seo-1 • https://webaim.org/blog/web-accessibility-and-seo/ Facts & numbers WCAG Mission • https://www.w3.org/Consortium/mission.html 15% of people have a disability • https://www.worldbank.org/en/topic/disability Other Dyslexic, Web extension by Jari Eskelinen • https://addons.mozilla.org/fr/firefox/addon/mobile-dyslexic Motherfucking website • https://motherfuckingwebsite.com/
  43. 43. Credits Icons & Emojis Twitter emojis • https://twitter.github.io Mozilla emojis • https://emojipedia.org/mozilla Flaticon • https://www.flaticon.com
  44. 44. Thanks!

×