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.

Transcript

1. Accessibility Checklist @priyankanaik625 diesdas.digital
2. diesdas.digital 2 Priyanka Naik Front-End Developer
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
21. KEYBOARD FOCUS SEMANTICS STYLING Code
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