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.

Michaela Blackham

August 02, 2019

More Decks by Michaela Blackham

Other Decks in How-to & DIY


  1. • 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
  2. • Intro • Who need an accessible site? • Accessibility

    Takes a Full Team • Accessibility Audits Background • Tips and Tricks • Demos and Discussion • bit.ly/2ZrbjEV • Agenda
  3. 53 million adults live with some form of a disability

  4. That’s 1 in every 5 adults in the USA —

  5. 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
  6. • Navigation • Visual content • Orientation & boundaries •

    Contrast & size • Peripheral interaction What should I look for? VISUAL
  7. • 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
  8. • Gesture alternatives & sensitivity touches • Reach/orientation on mobile

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

    tongue sensitivity clickers etc How is this solved? MOTOR OR PHYSICAL
  10. • Someone who is completely non hearing • My grandfather

    who wears a hearing aid What does this mean? AUDITORY
  11. • 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
  12. • Visual density • Memory gestures • Distracting content •

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

    palettes • Controllable interactions • Subtle movements How is this solved? COGNITIVE
  14. • 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
  15. • 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
  16. 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
  17. 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
  18. 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
  19. An accessibility audit is an evaluation of how well your

    product supports the needs of web users with disabilities.
  20. • Boost SEO • Usability • Awareness = Better ROI

    • Be a decent human being Why is an audit important? ACCESSIBILITY AUDIT
  21. • Guidelines • Passing vs a good experience • Testing

    • Desktop vs Mobile What do audits entail? ACCESSIBILITY AUDITS
  22. • Well known • Website (wave.webaim.org) • Browser extension (for

    Chrome & Firefox) • Quirk: color contrast Wave TESTING & TOOLS - AUTOMATED TOOLS
  23. • 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
  24. • Pass/fail • Actionable items • Focus styling • Logical

    order Keyboard Testing TESTING & TOOLS - MANUAL TESTING
  25. • Jaws • NVDA • Voice Over (VO) Screen Readers

  26. • Entire experience • Actionable items • Navigation • Content

    • Follow your goal Screen Reader Testing TESTING & TOOLS - MANUAL TESTING
  27. • Get access to Google Analytics • Include who needs

    to make edits TIPS & TRICKS - PROJECT MANAGERS Project Managers

    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
  29. • Color contrast checker (Chrome) • Is the site responsive?

    • Color contrast errors • Text over images • Zoom zoom zoom Developers TIPS & TRICKS - DEVELOPERS
  30. • 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
  31. • 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
  32. • 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
  33. • What is your score? • What errors did you

    get? • What other things do you need to check? Google Lighthouse AUTOMATED
  34. • Check on phone • Change size of screen •

    Use simulator in inspector Responsive MANUAL
  35. • 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