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

Accessibility: Why it Matters to Everyone

Accessibility: Why it Matters to Everyone

Overview of website accessibility and how devs can make their site more accessible.

Kaitlyn Martinez

September 28, 2018
Tweet

Other Decks in Programming

Transcript

  1. It Matters to Everyone
    KAITLYN MARTINEZ
    Accessibility:

    View full-size slide

  2. Why is Accessibility
    Important?

    View full-size slide

  3. You can be
    sued for
    having
    inaccessible
    content

    View full-size slide

  4. Akin to
    accessible
    entrances to
    a business

    View full-size slide

  5. Not just for
    permanent
    disabilities

    View full-size slide

  6. Impacts all
    disciplines:
    development
    content
    design

    View full-size slide

  7. WCAG 2.1
    Web Content Accessibility Guidelines

    View full-size slide

  8. ● Forms with Labels
    ● Alt Tags
    ● Header tag Order
    ● Adjacent images and buttons
    ● Naming regions and landmarks
    ● HTML5
    ● Meaningful content sequence
    ● Use of Color
    ● Keyboard Functionality
    ● Keyboard Traps
    ● Timing
    ● Bypass Blocks
    ● Page Titles
    ● Focus Order
    ● Link Purpose
    ● Page Language
    ● Error Identification
    ● Valid HTML
    Accessibility Levels
    A

    View full-size slide

  9. ● All ‘A’ Requirements
    ● Contrast Minimum
    ● Resizing of text
    ● Images of text
    ● Visible focus
    ● Consistent Navigation
    ● Error Suggestion
    Accessibility Levels
    AA

    View full-size slide

  10. TESTING TOOLS

    View full-size slide

  11. WAVE
    1
    2
    3
    4 Google Chrome Accessibility Audit
    Siteimprove
    Color Contrast Checker

    View full-size slide

  12. Resources
    WCAG 2.1
    https://www.w3.org/WAI/WCAG21/quickref/
    Web Aim Color Contrast Checker
    https://webaim.org/resources/contrastchecker/
    WAVE Extension
    https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US
    Siteimprove Extension
    https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc?hl=en-US
    Google Chrome Accessibility Tools
    https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

    View full-size slide