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 Slide

  2. Why is Accessibility
    Important?

    View Slide

  3. You can be
    sued for
    having
    inaccessible
    content

    View Slide

  4. Akin to
    accessible
    entrances to
    a business

    View Slide

  5. Not just for
    permanent
    disabilities

    View Slide

  6. Impacts all
    disciplines:
    development
    content
    design

    View Slide

  7. WCAG 2.1
    Web Content Accessibility Guidelines

    View 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 Slide

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

    View Slide

  10. Demo

    View Slide

  11. TESTING TOOLS

    View Slide

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

    View Slide

  13. View Slide

  14. 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 Slide