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

Facts

• 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

Tools

• 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