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

Leave No One Behind

Leave No One Behind

Building Accessible Web Applications


Stephen Thomas

October 22, 2016

More Decks by Stephen Thomas

Other Decks in Technology


  1. Leave No One Behind Building Accessible Web Applications

  2. Why? • More Users • The Law • It’s the

    Right Thing to Do
  3. Who? • Users with cognitive impairments • Users with hearing

    impairments • Users with visual impairments • Seizures • Color Blindness • Presbyopia • Users with motor impairments
  4. Let’s Look at Some Code

  5. Leave No One Behind • Users with Cognitive Impairments •

    Check Reading Level for Content • Don’t Build Complicated Interfaces
  6. Leave No One Behind • Users with Hearing Impairments •

    Add visual cues to critical audio notifications • Add close caption tracks to <video> elements
  7. Leave No One Behind • Users with Visual Impairments •

    Give Users a way to Disable Animations • Don’t Rely Solely on Color • Watch Contrast Ratio • Responsive Design • Use HTML5 Elements for Page Layout • Correct Use of Buttons and Links
  8. Leave No One Behind • Users with Motor Impairments •

    Support Focus Styling • Manage Focus • Dynamically set TabIndex attributes, or • Capture keydown events
  9. Some Key Resources • Checklist • http://webaim.org/standards/wcag/checklist • Tools •

    http://khan.github.io/tota11y/ • http://howlowck.github.io/Akbar/ • Learn More • https://www.udacity.com/course/web-accessibility--ud891