Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessible Websites Made Easy - How To Assess Issues and Create Better Experiences -- Full Day Workshop

Accessible Websites Made Easy - How To Assess Issues and Create Better Experiences -- Full Day Workshop

You need to make your website ADA compliant, whether it is WCAG or 508, but what does that actually mean? We'll go over the basics of accessibility and how it relates to you, your users, and your website. We'll dive into best practices for testing, recommended automated tools to use and demo a site with a screen reader to better understand your user experience. Attendees will audit their site for accessibility guidelines and then, together, we will cover the standards for fixing and avoiding common issues. Attendees should bring a laptop. Some extensions may be recommended to download.

NOTE: The screen reader portion of this demo will be using Mac's proprietary screen reader "Voiceover (VO)" which will vary slightly from other assistive technologies like NVDA and Jaws.

966298ba70519e928011b104295be616?s=128

Michaela Blackham

August 02, 2019
Tweet

Transcript

  1. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues

    and Create Better Experiences
  2. Michaela
 Blackham FRONT-END DEVELOPER

  3. @atendesign aten.io

  4. Work That
 Matters

  5. Work That
 Matters

  6. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues

    and Create Better Experiences
  7. • Name • Role/Title • Organization • What is your

    biggest struggle your organization’s site has with accessibility? • What are you hoping to get out of today? Introductions
  8. • Intro • Who need an accessible site? • Accessibility

    Takes a Full Team • Accessibility Audits Background • Tips and Tricks • Demos and Discussion • bit.ly/2ZrbjEV • Agenda
  9. MICHAELA BLACKHAM Accessible Websites Made Easy How to Assess Issues

    and Create Better Experiences
  10. None
  11. What is the problem?

  12. 53 million adults live with some form of a disability

    in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
  13. That’s 1 in every 5 adults in the USA —

    CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
  14. What is Accessibility? Easy to obtain, use and understand.

  15. P O U R

  16. P: Perceivable O U R

  17. P: Perceivable O: Operable U R

  18. P: Perceivable O: Operable U: Understandable R

  19. P: Perceivable O: Operable U: Understandable R: Robust

  20. P: Perceivable O: Operable U: Understandable R: Robust

  21. P: Perceivable O: Operable U: Understandable R: Robust

  22. P: Perceivable O: Operable U: Understandable R: Robust

  23. P: Perceivable O: Operable U: Understandable R: Robust

  24. needs an accessible website? Who

  25. Everyone

  26. Everyone benefits from an accessible website.

  27. There are 4 main categories

  28. Visual Motor or Physical Auditory Cognitive

  29. Visual Motor or Physical Auditory Cognitive

  30. What does this mean? • Someone completely non sighted •

    Someone with low, obstructed, or constricted vision • My color blind father • Each of our aging grandparents VISUAL
  31. None
  32. None
  33. None
  34. • Navigation • Visual content • Orientation & boundaries •

    Contrast & size • Peripheral interaction What should I look for? VISUAL
  35. • Design • Keyboard navigation • Screen readers How is

    this solved? VISUAL
  36. Visual Motor or Physical Auditory Cognitive

  37. • Someone like my cousin Emily, with a disability from

    birth • The wounded vet that uses prosthetics • Or even my niece with her broken arm What does this mean? MOTOR OR PHYSICAL
  38. • Gesture alternatives & sensitivity touches • Reach/orientation on mobile

    • Non physical navigation What should I look for? MOTOR OR PHYSICAL
  39. • Keyboard or touch navigation • Speech • Eye trackers,

    tongue sensitivity clickers etc How is this solved? MOTOR OR PHYSICAL
  40. Visual Motor or Physical Auditory Cognitive

  41. • Someone who is completely non hearing • My grandfather

    who wears a hearing aid What does this mean? AUDITORY
  42. • Embedded videos • Alternative contact information What should I

    look for? AUDITORY
  43. • Closed captioning & transcripts • Alternative communication How is

    this solved? AUDITORY
  44. Visual Motor or Physical Auditory Cognitive

  45. • My cousin Matthew who has down syndrome • The

    little boy I babysit with autism • Your friend who may have dyslexia • Me with extreme motion sickness What does this mean? COGNITIVE
  46. • Visual density • Memory gestures • Distracting content •

    Fonts • Excessive movements What should I look for? COGNITIVE
  47. • K.I.S.S. • Clear & consistent layouts • Smart color

    palettes • Controllable interactions • Subtle movements How is this solved? COGNITIVE
  48. Visual Motor or Physical Auditory Cognitive

  49. Where are we today?

  50. Not awful, but not great.

  51. There are so many devices

  52. Break

  53. Where can I start?

  54. Accessibility takes a full team

  55. Project managers

  56. Make accessibility a priority from the beginning PROJECT MANAGERS

  57. Education PROJECT MANAGERS

  58. Content creators

  59. Include meaningful alternative (alt) text for 
 all visuals CONTENT

    CREATORS
  60. • Context is everything • Is this presenting important content?

    • Does this image have a function? • Be succinct • Do not be redundant • Do not include phrases such as “image of”, “graphic of”, or “logo for” Writing good alt text CONTENT EDITORS
  61. • Every image should have an alt attribute • Alternative

    text for images that include text, or icons, should just be the text from the image or what the icon conveys • Complex images (charts, graphs, maps) should describe the outcome of the data within a caption or within the text of the page • Decorative Images should include an empty alt attribute (alt=“”) Writing good alt text CONTENT EDITORS
  62. None
  63. None
  64. None
  65. Headings to organize structure and content CONTENT CREATORS • Styling

    should come after the content outline has been created • Thorough yet concise headings • Paragraphs should NEVER be used as headings
  66. None
  67. None
  68. Descriptive link text CONTENT CREATORS • Avoid vague links like

    “click here” or “learn more” • The purpose of each link can be determined by link text alone
  69. None
  70. None
  71. Provide captions, transcripts and descriptions for media CONTENT CREATORS

  72. Designers

  73. Content first DESIGNERS

  74. Be mindful of typography DESIGNERS

  75. Provide good contrast for colorblindness and low vision DESIGNERS

  76. None
  77. None
  78. None
  79. None
  80. Don’t rely on color only, to show distinctions DESIGNERS

  81. None
  82. None
  83. None
  84. None
  85. Create clear and intuitive layouts DESIGNERS

  86. None
  87. Critique Critique Critique DESIGNERS

  88. Developers

  89. Use semantic markup for hierarchy & structure DEVELOPERS

  90. None
  91. Pay special attention to markup on forms DEVELOPERS

  92. None
  93. Capture content creators needs DEVELOPERS • Alt Text should be

    available for all images • Images should default to alt=“” if nothing is included CMS • Captions should be available for all images (for complex images) • Include all heading styles in WYSIWYG • Include styles like all uppercase in WYSIWYG
  94. Enable keyboard navigation DEVELOPERS

  95. Include ARIA attributes (Accessible Rich Internet Applications) DEVELOPERS

  96. Quality assurance testers

  97. Computers aren’t humans QUALITY ASSURANCE TESTERS

  98. Accessibility Audits

  99. is an accessibility audit? What

  100. An accessibility audit is an evaluation of how well your

    product supports the needs of web users with disabilities.
  101. is an audit important? Why

  102. People are afraid of getting sued

  103. • Boost SEO • Usability • Awareness = Better ROI

    • Be a decent human being Why is an audit important? ACCESSIBILITY AUDIT
  104. do I know what to follow? How

  105. WCAG 2.1 508C

  106. WCAG 2.1 508C

  107. WCAG 2.1 508C

  108. Creating an accessible site is more than just following a

    checklist.
  109. is an audit necessary? When

  110. Client Facing Internal Personal

  111. Client Facing Internal Personal

  112. Client Facing Internal Personal

  113. Client Facing Internal Personal

  114. does an audit entail? What

  115. • Guidelines • Passing vs a good experience • Testing

    • Desktop vs Mobile What do audits entail? ACCESSIBILITY AUDITS
  116. Testing & Tools

  117. Automated Manual

  118. Automated Manual

  119. • Wave • Lighthouse • PA11Y • Axe Automated Tools

    TESTING & TOOLS
  120. • Well known • Website (wave.webaim.org) • Browser extension (for

    Chrome & Firefox) • Quirk: color contrast Wave TESTING & TOOLS - AUTOMATED TOOLS
  121. None
  122. None
  123. None
  124. • Integrated within Chrome • Does SEO, performance, accessibility, and

    best practices • Creates a “report” you can send to whoever needs to review the site • Gives your site a score Lighthouse TESTING & TOOLS - AUTOMATED TOOLS
  125. None
  126. None
  127. Automated Manual

  128. • Keyboard • Screen Reader Manual Testing TESTING & TOOLS

  129. • Pass/fail • Actionable items • Focus styling • Logical

    order Keyboard Testing TESTING & TOOLS - MANUAL TESTING
  130. None
  131. None
  132. • Jaws • NVDA • Voice Over (VO) Screen Readers

    TESTING & TOOLS - MANUAL TESTING
  133. • Entire experience • Actionable items • Navigation • Content

    • Follow your goal Screen Reader Testing TESTING & TOOLS - MANUAL TESTING
  134. Break

  135. Tips & Tricks

  136. Project Managers

  137. • Get access to Google Analytics • Include who needs

    to make edits TIPS & TRICKS - PROJECT MANAGERS Project Managers
  138. Content Editors

  139. • DO NOT WRITE WORDS IN ALL CAPS • Check

    hierarchy with the “no styles” option in Wave • Outline extension (Chrome) • Use a screen reader • Read site to someone over the phone Content Editors TIPS & TRICKS - CONTENT EDITORS
  140. Developers

  141. • Color contrast checker (Chrome) • Is the site responsive?

    • Color contrast errors • Text over images • Zoom zoom zoom Developers TIPS & TRICKS - DEVELOPERS
  142. None
  143. • Test the “skip to main content” link • Default

    focus styling • Interact with actionable items • Test with ChromeLens extension to see logical order • Test forward and Backward Keyboard TIPS & TRICKS
  144. None
  145. None
  146. • Set screen reader preferences • V.O. tutorials • Turn

    your screen off • Turn your mouse over • Test a site you are not familiar with • “Play all” Screen reader TIPS & TRICKS
  147. • Dates • 1-3 letter words are sometimes read letter

    by letter • Vague Link text • Get Comfortable • Sometimes its the screen reader’s fault Screen reader TIPS & TRICKS
  148. Demo

  149. Let’s Practice!

  150. Automated

  151. • What is your score? • What errors did you

    get? • What other things do you need to check? Google Lighthouse AUTOMATED
  152. • wave.webaim.org • Styles tab • No Styles (check hierarchy)

    • Contrast Web AIM - Wave AUTOMATED
  153. Manual

  154. • Check on phone • Change size of screen •

    Use simulator in inspector Responsive MANUAL
  155. • Double check any color contrast issues from automated tests

    Color Contrast MANUAL
  156. Hierarchy MANUAL

  157. • Focus styling for all interactive elements • Logical order

    of interactive elements • Skip to main content (if applicable) • Navigate site using nav and drop downs • Usability for carousels & slideshows (if applicable) • Fill out a form (if applicable) • Chromelense Keyboard MANUAL NAVIGATION HELP • Tab (forward) • Shift + Tab (Backward) • Enter/space (select link/button) • Arrow (select options, carousels) • Escape
  158. Findings

  159. your heart into it! P.O.U.R

  160. Thanks! michaela@aten.io Michaela Blackham /