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.


July 02, 2019

Other Decks in Programming


  1. Accessibility Checklist @priyankanaik625 diesdas.digital

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

  3. None
  4. 4 What is web accessibility? Making website usable and reachable

    by as many people as possible, Including people with disabilities. Accessibility
  5. 5 1 billion people in the world suffer from some

    form of disability. — World health Organization
  6. 6 Accessibility is for everyone Types of Disabilities

  7. 7 WCAG 2.1 (web content accessibility guidelines) ☞ Perceivable ☞

    Operable ☞ Understandable ☞ Robust
  8. 8 Accessibility is a team effort. Every person has a

    role to play! Team Diesdas
  9. Checklists Project Manager Project Manager Design Designer Code Developer

  10. 10 Project Manager Checklist ☑ Everyone in the team should

    be educated/trained ☑ Identify Critical user journey ☑ Incorporate Checklist ☑ Evaluate Product Project Manager
  11. 11 ☞ Fundamental Knowledge About A11y ☞ Book separate time

    for A11y ☑Everyone in the team should be Educated Fundamentals of Accessibility
  12. 12 ☞ Primary User Journey ☞ Secondary User Journey ☑Identify

    Critical User journey Register or Login to use the system User can change the Profile picture
  13. 13 ☞ WCAG 2.0 Checklist ☞ Voxmedia Checklist ☑Incorporate a

    Checklist WCAG 2.0 Checklist
  14. 14 ☑Evaluate Product with user studies Evaluate the product

  15. 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
  16. 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
  17. 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
  18. 18 ☑Accessible labels Accessable Labels

  19. 19 ☞ Focus State for Select box or Buttons rather

    then just the hover state ☑Multiple ways to interact with UI Focus Styles
  20. 20 ☞ Ex: Error messages ☑Don’t indicate important information with

    color alone Focus Styles Error Messages

  22. 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
  23. 23 ☞ Buttons with Focus ☞ Make use of Native

    elements like button Input and select ☑Focus is visible and managed Focus Styles
  24. 24 style=“float: right;” ☑ Logical Tab Order

  25. 25 Chrome Lens to track Tab Order

  26. 26 ☞ Custom Checkbox or Radio Buttons ☑Keyboard Support for

    interactive elements ☞ https:/ /www.w3.org/TR/wai-aria-practices-1.1/ Tools
  27. 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
  28. 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
  29. 29 Developer Checklist (STYLING) ☑ Better Focus style ☑ Styling

    with Aria ☑ Better color contrast Code
  30. 30 Testing Tools ☞ Wave Chrome Extension ☞ Google Chrome

    A11y audit Wave Testing Tool
  31. 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
  32. Let’s make the web accessible! @priyankanaik625 diesdas.digital

  33. diesdas.digital 33