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
Tweet

More Decks by Stephen Thomas

Other Decks in Technology

Transcript

  1. Leave No One Behind
    Building Accessible Web Applications

    View Slide

  2. Why?
    • More Users
    • The Law
    • It’s the Right Thing to Do

    View Slide

  3. Who?
    • Users with cognitive impairments
    • Users with hearing impairments
    • Users with visual impairments
    • Seizures
    • Color Blindness
    • Presbyopia
    • Users with motor impairments

    View Slide

  4. Let’s Look at Some Code

    View Slide

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

    View Slide

  6. Leave No One Behind
    • Users with Hearing Impairments
    • Add visual cues to critical audio notifications
    • Add close caption tracks to elements

    View Slide

  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

    View Slide

  8. Leave No One Behind
    • Users with Motor Impairments
    • Support Focus Styling
    • Manage Focus
    • Dynamically set TabIndex attributes, or
    • Capture keydown events

    View Slide

  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

    View Slide