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

accessibility checklist for everyone

accessibility checklist for everyone

I believe A11y is a team effort and everyone has a role to play in the project. So, I have a checklist for specific roles like for project manager, UI/UX designer, and developer. The Idea is to present the checklist with the Right tools which can help them a test. Hence talk will be helpful for everyone, one who has zero knowledge can learn checklist and tools laters he/she will be able to make an accessible website.

priyankanaik625

July 02, 2019
Tweet

Other Decks in Programming

Transcript

  1. Accessibility Checklist
    @priyankanaik625
    diesdas.digital

    View full-size slide

  2. diesdas.digital
    2
    Priyanka Naik
    Front-End Developer

    View full-size slide

  3. 4
    What is web accessibility?
    Making website usable and reachable
    by as many people as possible,
    Including people with disabilities.
    Accessibility

    View full-size slide

  4. 5
    1 billion people in the world suffer
    from some form of disability.
    — World health Organization

    View full-size slide

  5. 6
    Accessibility is for everyone
    Types of Disabilities

    View full-size slide

  6. 7
    WCAG 2.1
    (web content accessibility guidelines)
    ☞ Perceivable
    ☞ Operable
    ☞ Understandable
    ☞ Robust

    View full-size slide

  7. 8
    Accessibility is a
    team effort.
    Every person has
    a role to play!
    Team Diesdas

    View full-size slide

  8. Checklists
    Project Manager
    Project Manager
    Design
    Designer
    Code
    Developer

    View full-size slide

  9. 10
    Project Manager Checklist
    ☑ Everyone in the team should be educated/trained
    ☑ Identify Critical user journey
    ☑ Incorporate Checklist
    ☑ Evaluate Product
    Project Manager

    View full-size slide

  10. 11
    ☞ Fundamental Knowledge About A11y
    ☞ Book separate time for A11y
    ☑Everyone in the team should
    be Educated
    Fundamentals of Accessibility

    View full-size slide

  11. 12
    ☞ Primary User Journey
    ☞ Secondary User Journey
    ☑Identify Critical User journey Register or Login to use the system
    User can change the Profile picture

    View full-size slide

  12. 13
    ☞ WCAG 2.0 Checklist
    ☞ Voxmedia Checklist
    ☑Incorporate a Checklist
    WCAG 2.0 Checklist

    View full-size slide

  13. 14
    ☑Evaluate Product with user
    studies
    Evaluate the product

    View full-size slide

  14. 15
    Designer(UI/UX) Checklist
    ☑ Good Color Contrast
    ☑ Tab order is Identified
    ☑ Accessible labels
    ☑ Multiple ways to interact with UI
    ☑ Don’t indicate important information with color alone
    Design

    View full-size slide

  15. 16
    ☞ Min 4.5:1 for the text < 14pt/18px
    ☞ Min 3:1 for the text > 14pt/18px
    ☑Good Color Contrast
    ☞ https:/
    /contrast-ratio.com
    ☞ https:/
    /material.io/tools/color
    Tools

    View full-size slide

  16. 17
    Logical Tab Order
    ☞ Should fallow the visual layout from top to
    bottom.
    ☞ should traverse from most important to
    least important item.
    ☑Tab order is identified
    ☞ Chrome Lens — Chrome extension
    Tools

    View full-size slide

  17. 18
    ☑Accessible labels
    Accessable Labels

    View full-size slide

  18. 19
    ☞ Focus State for Select box or Buttons rather
    then just the hover state
    ☑Multiple ways to interact
    with UI
    Focus Styles

    View full-size slide

  19. 20
    ☞ Ex: Error messages
    ☑Don’t indicate important
    information with color alone
    Focus Styles
    Error Messages

    View full-size slide

  20. KEYBOARD FOCUS
    SEMANTICS
    STYLING
    Code

    View full-size slide

  21. 22
    Developer Checklist (KEYBOARD FOCUS)
    ☑ Focus is visible and managed
    ☑ Logical Tab order
    ☑ Keyboard Support for interactive elements
    ☑ Way to skip the top level navigation and access main content
    Code

    View full-size slide

  22. 23
    ☞ Buttons with Focus
    ☞ Make use of Native elements like button
    Input and select
    ☑Focus is visible and managed
    Focus Styles

    View full-size slide

  23. 24
    style=“float: right;”
    ☑ Logical Tab Order

    View full-size slide

  24. 25
    Chrome Lens to track Tab Order

    View full-size slide

  25. 26
    ☞ Custom Checkbox or Radio Buttons
    ☑Keyboard Support for interactive elements
    ☞ https:/
    /www.w3.org/TR/wai-aria-practices-1.1/
    Tools

    View full-size slide

  26. 27
    ☞ tabindex=“0” to add custom elements to
    natural tab order.
    ☞ tabindex=“-1” to remove from the tab
    order.
    ☞ focus() to programmatically focus an
    element.
    ☑Skip top level navigation and
    access main content
    ☞ Chrome Lens — Chrome extension
    Tools
    Accessing Tabs via the Tab Key

    View full-size slide

  27. 28
    Developer Checklist (SEMANTICS)
    ☑ HTML should have a Lang attribute
    ☑ HTML Native elements and landmarks
    ☑ Alt text for the images (Exclude Decorative images)
    ☑ Logical code structure
    ☑ Descriptive Links
    ☑ Appropriate Labels for the controls
    ☑ ARIA roles and attributes applied as needed
    Code

    View full-size slide

  28. 29
    Developer Checklist (STYLING)
    ☑ Better Focus style
    ☑ Styling with Aria
    ☑ Better color contrast
    Code

    View full-size slide

  29. 30
    Testing Tools
    ☞ Wave Chrome Extension
    ☞ Google Chrome A11y audit
    Wave Testing Tool

    View full-size slide

  30. 31
    References
    ☞ https:/
    /www.w3.org/TR/WCAG20/
    ☞ http:/
    /accessibility.voxmedia.com/
    ☞ https:/
    /eu.udacity.com/course/web-accessibility--ud891
    Developers
    ☞ https:/
    /material.io/design/usability/accessibility.html#understanding-
    accessibility
    Designers

    View full-size slide

  31. Let’s make the web
    accessible!
    @priyankanaik625
    diesdas.digital

    View full-size slide

  32. diesdas.digital
    33

    View full-size slide