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.
Nächste SlideShare
What to Upload to SlideShare
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

2

Teilen

Herunterladen, um offline zu lesen

Why Web Accessibility Matters in 2020

Herunterladen, um offline zu lesen

Digital Exeter Keynote 2020

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Why Web Accessibility Matters in 2020

  1. 1. Why Web Accessibility Matters in 2020 Presented by Niki Mosier
  2. 2. Why is web accessibility important? What does an accessible website mean? How can you ensure your website is accessible? @nikers85 #vision2020exeter
  3. 3. POP QUIZ… Why should you make your site accessible? A. Because you should B. It’s the law C. It’s the right thing to do D. For Google E. All of the above @nikers85 #vision2020exeter
  4. 4. ANSWER Why should you make your site accessible? E. All of the above @nikers85 #vision2020exeter
  5. 5. 57 million Americans have a disability… (that’s ~17% of the population) @nikers85 #vision2020exeter
  6. 6. 1 in 4 adults in the US has a disability, including impairments with vision, hearing, mobility, and cognition. @nikers85 #vision2020exeter
  7. 7. Why is web accessibility important? @nikers85 #vision2020exeter
  8. 8. ...the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities @nikers85 #vision2020exeter
  9. 9. Don’t exclude people from using your products or services @nikers85 #vision2020exeter
  10. 10. Accessibility encompasses all disabilities that affect access to the web, including: ● Visual @nikers85 #vision2020exeter
  11. 11. Accessibility encompasses all disabilities that affect access to the web, including: ● Visual ● Auditory @nikers85 #vision2020exeter
  12. 12. Accessibility encompasses all disabilities that affect access to the web, including: ● Visual ● Auditory ● Motor/Mobility @nikers85 #vision2020exeter
  13. 13. Accessibility encompasses all disabilities that affect access to the web, including: ● Visual ● Auditory ● Motor/Mobility ● Cognitive/Learning @nikers85 #vision2020exeter
  14. 14. The negative implications to not having an accessible website Many different groups benefit from digital accessibility @nikers85 #vision2020exeter
  15. 15. The negative implications to not having an accessible website Inability to complete business transactions on website impacts brand reputation Many different groups benefit from digital accessibility @nikers85 #vision2020exeter
  16. 16. The negative implications to not having an accessible website Inability to complete business transactions on website impacts brand reputation Many different groups benefit from digital accessibility Legal Implications @nikers85 #vision2020exeter
  17. 17. @nikers85 #vision2020exeter
  18. 18. What does an accessible website mean? @nikers85 #vision2020exeter
  19. 19. WCAG defines 4 principles: P O U R Perceivable - Information can be presented in different ways @nikers85 #vision2020exeter
  20. 20. WCAG defines 4 principles: P O U R Perceivable - Information can be presented in different ways Operable - Functionality can be used in different modalities @nikers85 #vision2020exeter
  21. 21. WCAG defines 4 principles: P O U R Perceivable - Information can be presented in different ways Operable - Functionality can be used in different modalities Understandable - Information and functionality is understandable @nikers85 #vision2020exeter
  22. 22. WCAG defines 4 principles: P O U R Perceivable - Information can be presented in different ways Operable - Functionality can be used in different modalities Understandable - Information and functionality is understandable Robust - Content can be interpreted reliably @nikers85 #vision2020exeter
  23. 23. Adaptive technology: ● Screen readers @nikers85 #vision2020exeter
  24. 24. Adaptive technology: ● Screen readers ● Voice-to-type @nikers85 #vision2020exeter
  25. 25. Adaptive technology: ● Screen readers ● Voice-to-type ● Alternate Input Devices @nikers85 #vision2020exeter
  26. 26. Common issues people have online ● Text that doesn’t wrap ● Links without anchor text ● Code issues for keyboard-only users ● Font size ● Poor contrast ● Color reliance ● Animations and carousels ● Page time limits @nikers85 #vision2020exeter
  27. 27. @nikers85 #vision2020exeter
  28. 28. @nikers85 #vision2020exeter
  29. 29. @nikers85 #vision2020exeter
  30. 30. A note about… ● Web-authoring tools @nikers85 #vision2020exeter
  31. 31. Stakeholders in web accessibility Product owners @nikers85 #vision2020exeter
  32. 32. Stakeholders in web accessibility Product owners Developers @nikers85 #vision2020exeter
  33. 33. Stakeholders in web accessibility Product owners Developers UX @nikers85 #vision2020exeter
  34. 34. Stakeholders in web accessibility Product owners Developers UX Content editors @nikers85 #vision2020exeter
  35. 35. Stakeholders in web accessibility Product owners Developers UX Content editors QA & testers @nikers85 #vision2020exeter
  36. 36. How can you ensure your website is accessible? @nikers85 #vision2020exeter
  37. 37. 3 sets of accessibility guidelines Web Content Accessibility Guidelines (WCAG) Authoring Tool Accessibility Guidelines (ATAG) User Agent Accessibility Guidelines (UAAG) @nikers85 #vision2020exeter
  38. 38. Creating accessible content Descriptive page title @nikers85 #vision2020exeter
  39. 39. Creating accessible content Descriptive page title Clear, organized headings @nikers85 #vision2020exeter
  40. 40. Creating accessible content Descriptive page title Clear, organized headings Good anchor text @nikers85 #vision2020exeter
  41. 41. Creating accessible content Descriptive page title Clear, organized headings Good anchor text Image alt text @nikers85 #vision2020exeter
  42. 42. Creating accessible content Descriptive page title Clear, organized headings Good anchor text Image alt text Captions @nikers85 #vision2020exeter
  43. 43. Creating accessible content Descriptive page title Clear, organized headings Good anchor text Image alt text Captions Transcripts
  44. 44. Considerations for different types of impairments Visual Impairments ● Low vision ● Blindness ● Color blindness @nikers85 #vision2020exeter@nikers85 #vision2020exeter
  45. 45. Considerations for different types of impairments Visual Impairments ● Low vision ● Blindness ● Color blindness Recommendations ● Color contrast ● Fonts ● Descriptive links ● Graphics ● No mouse-over events ● Don’t use iFrames ● Use friendly tables @nikers85 #vision2020exeter
  46. 46. Considerations for different types of impairments Auditory Impairments ● Spectrum hearing loss ● Tone deafness @nikers85 #vision2020exeter
  47. 47. Considerations for different types of impairments Auditory Impairments ● Spectrum hearing loss ● Tone deafness Recommendations ● Subtitles ● Closed captions ● Transcripts ● Sign language ● Visible and functional controls ● Multiple forms of contact
  48. 48. Considerations for different types of impairments Speech Impairments ● Impediments ● Lisps ● Accents ● Aphasia ● Muteness @nikers85 #vision2020exeter
  49. 49. Considerations for different types of impairments Speech Impairments ● Impediments ● Lisps ● Accents ● Aphasia ● Muteness Recommendations ● Simple requirements ● Alternative input @nikers85 #vision2020exeter
  50. 50. Considerations for different types of impairments Motor Impairments ● Arthritis ● Tremors ● Parkinson’s ● ALS ● MS ● Palsy ● Quadriplegia @nikers85 #vision2020exeter
  51. 51. Considerations for different types of impairments Motor Impairments ● Arthritis ● Tremors ● Parkinson’s ● ALS ● MS ● Palsy ● Quadriplegia Recommendations ● Don’t require a mouse ● Use large link targets ● Use focus state for links ● Skip to content ● Don’t use autoplay ● Don’t use shortcut keys ● Extend session timeouts @nikers85 #vision2020exeter
  52. 52. Web accessibility also benefits people without disabilities ● Small screens & different input modes ● Older people with age-related changes ● Temporary disabilities (broken bones) ● Situational limitations (bright sunlight) ● Slow internet connections or limited/expensive bandwidth @nikers85 #vision2020exeter
  53. 53. Browser Settings (desktop & mobile) Customizing platform Customizing browser settings Font size Zoom in/out Use high contrast mode @nikers85 #vision2020exeter
  54. 54. Accessibility Example @nikers85 #vision2020exeter
  55. 55. Activity: Use the web without a mouse ● Tab key moves to the next link, form element, or button ● Shift+Tab moves to the previous link, form element, or button ● Enter or spacebar activates the current link or button ● Try arrow keys, Escape key, and other keys to see what they do @nikers85 #vision2020exeter
  56. 56. Conformance WCAG 2.0 Success Criteria Meet or satisfy the 'requirements' of the standard 5 Requirements @nikers85 #vision2020exeter
  57. 57. Remember: Web accessibility is an ongoing commitment. @nikers85 #vision2020exeter
  58. 58. https://www.w3.org/WAI/test-evaluate/preliminary/ https://wpaccessibility.io/ https://wave.webaim.org/ https://www.washington.edu/accessibility/checklist/ https://www.a11yproject.com/checklist/ https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html Resources
  59. 59. THANK YOU. @Nikers85 https://www.linkedin.com/in/niki-mosier/ https://twooctobers.com/niki-mosier/
  • AlyonaZhuravleva

    Jul. 3, 2021
  • FrederikKreijmborg

    Sep. 16, 2020

Digital Exeter Keynote 2020

Aufrufe

Aufrufe insgesamt

171

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

5

Befehle

Downloads

2

Geteilt

0

Kommentare

0

Likes

2

×