WordCamp 2019 - Accessibility Made Easy pt1

from St. Pete

  • we've attended the National For Blind the last few years and we were very moved at how difficult it is for low-vision people to use software
  • section 508

facts about 508 WCAG
11 easy steps
free developer tools
how to do basic site audit


  • 1 billion people worldwide have some disability
  • 253 million people have vision impairment
  • 19 million children are visually impaired
  • you will be disabled at some point in your life
  • 814 s508 lawsuits in 2017
  • 2258 s508 lawsuits in 2018
    • 4000 at state level in CA
  • less than 50 plaintiffs
    • majority filed under Title III of ADA

WCAG is the worldwide guidelines
s508 is the US law, and nonprofits are accountable to it

WCAG's Main Ideas

  • Perceivable
    • text alternative, media, adaptable, distinguishable
  • Operable
    • time limits, seizures, navigable without mouse
  • Understandable
    • readable, predictable
  • Robust
    • wide compatibility

(blank screen - this is why)

11 Steps to Accessibility

  1. Provide alt-text -- you can even set as decorative
  2. Label your form elements -- can use aria-label
  3. Add closed caption for video, audio description for animations -- training materials need the close captioning https://vimeo.zendesk.com/hc/en-us/articles/224968828-Captions-and-subtitles -- Amazoon has tools
  4. Be sure your contrast ratio meets minimum thresholds -- 4.5:1 for text, 3:1 for others
  5. Make all link text descriptive and underline them -- "click here" or "read more" VS 'folow this link to "Wikipedia"'
  6. The color of any given content cannot be the only indication of meaning -- "required fields are in red" VS required are in red and marked with * --
  7. Make sure your font size is at least 16px and is still properly spaced when enlarged to 200% -- plugin to see https://www.stpetedesign.com/ada-section-508-compliant/
  8. Error handling - 'Errors' vs 'Title is Required' and 'Last Name Required'
  9. Tab navigation - entire site should be keyboard navigable -- take your mouse and put it in the drawer majority of suits brought because couldn't interact with site functions -- make sure focus state CSS is clear
  10. You must offer flexible time limits (if any) associated with the website or software -- think about the time it takes for a screen reader to finish page
  11. provide skip navigation links so that users can skip repetitive content such as nav menus, widgets etc -- Mega Menus work terrible for screen readers -- primary content link only shows when tabbed into -- Add Skiplinks with wp-accessibility, skiplinks don't have to always be visible


  • Axe Chrome - less false positives
  • Wave.webaim.org - don't think it can do logged in views
  • Google Lighthouse - performance and accessibility
  • Contrast Ratio Checker - https://contrast-ratio.com
  • WP Accessibility Tools & Alt Text Finder - This plugin has a missing Alt text finder, the tota11y testing software from Khan University, a contrast checker and a WCAG 2.1 checklist
    • WP Media library won't update alt-text after file has been embedded in page
  • Userway.org - adds a widget on the frontend of your WP site that allows users to set Accessibility settings like contrast text size etc !!! get this #todo
  • Accessibility Statement Generator - from W3C, asks you questions to create your statement so that people having a problem know who to contact -- also good for legal coverage
  • NVDA - nvaccess.org, Windows only, made by blind people
  • ChromeVox - Classic Chrome extension
  • WP Guidelines - https://make.wordpress.org/accessibility
  • Actual Law - https://goo.gl/QWMzuo

No grace period for violations
Brick and mortar in CA - instant $4k fine even before lawsuit, now instant $4k for website too, then the lawsuit

More fromĀ Summerlin