accessibility for everyone
play

Accessibility for Everyone Beth Tucker Long Beth Tucker Long PHP - PowerPoint PPT Presentation

Accessibility for Everyone Beth Tucker Long Beth Tucker Long PHP Developer Stay-at-home Mom @e3betht User Group Leader OSMI volunteer @e3betht WHAT'S ACCESSIBILITY? What's Accessibility? The measure of a web page's


  1. Accessibility for Everyone Beth Tucker Long

  2. Beth Tucker Long • PHP Developer • Stay-at-home Mom @e3betht • User Group Leader • OSMI volunteer

  3. @e3betht WHAT'S ACCESSIBILITY?

  4. What's Accessibility? The measure of a web page's usability by persons with @e3betht one or more disabilities. --Usability.gov https://www.usability.gov/what-and-why/glossary/accessibility.html

  5. What's Accessibility? • Improving your usability • Following government mandates • Improve customer satisfaction @e3betht • Increase customer diversity • Be fair • Widening your audience

  6. How much bigger? The United Nations estimates: • 10% of the world's population @e3betht has a disability http://www.un.org/en/sections/issues-depth/persons-disabilities/ index.html

  7. All Age Issue @e3betht http://www.pewresearch.org/fact-tank/2017/04/07/disabled-americans-are- less-likely-to-use-technology/

  8. Main Areas of Difficulty • Vision • Mobility @e3betht • Hearing

  9. Vision • Colorblindness http://www.colourblindawareness.org/colour-blindness/ @e3betht

  10. Vision • Vision Impairment http://www.who.int/news-room/fact-sheets/detail/ blindness-and-visual-impairment @e3betht

  11. Mobility • Movement https://ftp.cdc.gov/pub/Health_Statistics/NCHS/NHIS/ SHS/2016_SHS_Table_A-10.pdf @e3betht

  12. Hearing • Hearing Trouble https://www.cdc.gov/nchs/fastats/disability.htm @e3betht

  13. Need More to Sell This? • It's not just for people with @e3betht disabilities. • http://www.pewresearch.org/fact-tank/2017/12/12/nearly-half-of-americans- use-digital-voice-assistants-mostly-on-their-smartphones/

  14. @e3betht WHAT CAN WE DO?

  15. Vision - Color @e3betht

  16. Vision • Here is some text that does not have high enough contrast. @e3betht

  17. Vision • Here is some text that does not have high enough contrast. • High contrast is important. @e3betht

  18. Vision • Here is some text that does not have high enough contrast. • High contrast is important. @e3betht • High contrast makes a difference.

  19. Vision This is really important text on my site. You need to be able to read all of it, so make sure you can. This is really important text on my site. You need to be able @e3betht to read all of it, so make sure you can. This is really important text on my site. You need to be able to read all of it, so make sure you can.

  20. Vision This is really important text on my site. You need to be able to read all of it, so @e3betht make sure you can. This is really important text on my site. You need to be able to read all of it, so make sure you can. This is really important text on my site. You need to be able to read all of it

  21. Vision @e3betht

  22. Vision This is the great description of my website. You can click here to get to some great content or you could click here to get to @e3betht our newsletter or you could click here to send us an email.

  23. Vision 1. Enter your name. 2. Enter your email. 3. Click Continue. 4. Choose an item. @e3betht 5. Click Continue. 6. Choose the color. 7. Click Continue. 8. Enter payment info.

  24. Mobility @e3betht

  25. Hearing @e3betht As a programmer, Tori spends a lot of time typing.

  26. TESTING @e3betht

  27. Vision • Enlarge your fonts • Turn down your screen brightness • Adjust the color saturation on your screen @e3betht • Disable your stylesheets

  28. Vision • Turn your monitor around and use VoiceOver https://help.apple.com/voiceover/info/guide/ @e3betht Narrator https://support.microsoft.com/en-us/help/17173/ windows-10-hear-text-read-aloud

  29. Simulate Colorblindness @e3betht Colour Blind https://github.com/Altreus/colourblind

  30. Simulate Colorblindness @e3betht Color Oracle http://colororacle.org/

  31. Generate a Color Palette @e3betht http://colorsafe.co/

  32. Color Palette Accessibility Evaluator @e3betht https://accessibility.oit.ncsu.edu/tools/color-contrast/

  33. Snook.ca Color Contrast Check @e3betht https://snook.ca/technical/colour_contrast/colour.html

  34. WebAIM- Color Contrast Checker @e3betht https://webaim.org/resources/contrastchecker/

  35. Vision - Colour Contrast Analyser @e3betht https://developer.paciellogroup.com/resources/contrastanalyser/

  36. Vision Colour Contrast Analyser from The Paciello Group @e3betht https://developer.paciellogroup.com/resources/contrastanalyser/

  37. Mobility • Disable your mouse/trackpad • Interact with a touch screen using a stylus you hold with tweezers, chopsticks, or in your mouth @e3betht • Use your website one-handed • Install eye tracking navigation software

  38. Hearing • Turn off the sound @e3betht

  39. Whole Analysis • AChecker @e3betht https://achecker.ca/checker/index.php

  40. Whole Analysis • Web Accessibility Toolbar The Paciello Group @e3betht https://developer.paciellogroup.com/resources/wat/

  41. Whole Analysis • WAVE API http://wave.webaim.org/api/ Dinolytics front-end for WAVE @e3betht https://dinolytics.com/ WAVE Runner http://wave.webaim.org/waverunner

  42. Whole Analysis WAVE Browser Extension - http://wave.webaim.org/extension/ @e3betht

  43. Whole Analysis aXe Browser Extension - https://www.deque.com/axe/ @e3betht

  44. Whole Analysis SiteImprove- https://siteimprove.com/ @e3betht

  45. Automate Tests • Unit Tests • Integration Tests @e3betht Writing Automated Tests for Accessibility https://www.deque.com/blog/writing-automated-tests- accessibility/

  46. Diverse Testers Standard Usability Tests https://www.usability.gov/how-to-and-tools/methods/usability- evaluation/index.html @e3betht

  47. Live Accessibility Testing • Accessible360 https://accessible360.com/ • Perkins Access https://www.perkins.org/access @e3betht • AccessWorks https://access-works.com/

  48. Lots More Tools Web Accessibility Evaluation Tools List https://www.w3.org/WAI/ER/tools/ 18F Accessibility Guide – Resources @e3betht https://accessibility.18f.gov/ 18F Accessibility Guide – Tools https://accessibility.18f.gov/tools/

  49. GAAD The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities. @e3betht http://www.globalaccessibilityawarenessday.org/

  50. @e3betht

  51. @e3betht

  52. @e3betht

  53. @e3betht

  54. @e3betht

  55. @e3betht Protanopia

  56. @e3betht Deutanopia

  57. @e3betht Tritanopia

  58. @e3betht Achromatopsia

  59. @e3betht

  60. @e3betht

  61. @e3betht

  62. @e3betht

  63. Learn More - Design • Inclusive Design Principles https://inclusivedesignprinciples.org/ • Inclusive Design 24 @e3betht https://inclusivedesign24.org/ • The Paciello Group: cupper https://github.com/ThePacielloGroup/cupper • Nutrition Cards for Accessible Components https://davatron5000.github.io/a11y-nutrition-cards/

  64. Learn More - Tools • An Introduction to Screen Readers (Webinar) https://accessibility.deque.com/live-webinar- introduction-to-screen-readers @e3betht • Facebook's Alt Tag AI https://newsroom.fb.com/news/2016/04/using- artificial-intelligence-to-help-blind-people-see-facebook/

  65. Status of Platforms • HTML5 Accessibility https://www.html5accessibility.com/ • HTML5 Implementation Status http://stevefaulkner.github.io/html-mapping-tests/ @e3betht • Android and iOS Mobile Testing Guide https://developer.paciellogroup.com/downloads/ TPG_Mobile_Testing_Guide.pdf • Windows Accessibility Options https://www.microsoft.com/en-us/accessibility/windows Apple Accessibility Options https://www.apple.com/accessibility/

  66. Standards • Section 508 Guidelines and Resources https://www.section508.gov/ • United States Laws relating to 508 Standards https://www.w3.org/WAI/policies/united-states/ @e3betht • VFO Standards https://github.com/FreedomScientific/VFO-standards-support • Web Content Accessibility Guidelines https://www.w3.org/WAI/standards-guidelines/wcag/ • ADA Standards for Accessible Design https://www.ada.gov/2010ADAstandards_index.htm

  67. Standards Help • Use Assistive Technology to Comply with Section 508 https://www.youtube.com/watch?v=4XJcswWmmAw • HTML 508 Checklist @e3betht https://www.hhs.gov/web/section-508/making-files- accessible/checklist/html/index.html

  68. Resources • Stories of Web Users https://www.w3.org/WAI/people-use-web/user-stories/ https://www.w3.org/WAI/people-use-web/tools- @e3betht techniques/ • Mythbuster’s Guide to Accessibility https://medium.com/the-u-s-digital-service/ mythbusters-guide-to-accessibility-92ccd88655c6 • Usability.gov's Accessibility Page https://www.usability.gov/accessibility

Recommend


More recommend