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.

D8bad04fb9795729dd50a604cae3fc4f?s=128

priyankanaik625

July 02, 2019
Tweet

Transcript

  1. 3.
  2. 4.

    4 What is web accessibility? Making website usable and reachable

    by as many people as possible, Including people with disabilities. Accessibility
  3. 5.

    5 1 billion people in the world suffer from some

    form of disability. — World health Organization
  4. 10.

    10 Project Manager Checklist ☑ Everyone in the team should

    be educated/trained ☑ Identify Critical user journey ☑ Incorporate Checklist ☑ Evaluate Product Project Manager
  5. 11.

    11 ☞ Fundamental Knowledge About A11y ☞ Book separate time

    for A11y ☑Everyone in the team should be Educated Fundamentals of Accessibility
  6. 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
  7. 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
  8. 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
  9. 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
  10. 19.

    19 ☞ Focus State for Select box or Buttons rather

    then just the hover state ☑Multiple ways to interact with UI Focus Styles
  11. 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
  12. 23.

    23 ☞ Buttons with Focus ☞ Make use of Native

    elements like button Input and select ☑Focus is visible and managed Focus Styles
  13. 26.

    26 ☞ Custom Checkbox or Radio Buttons ☑Keyboard Support for

    interactive elements ☞ https:/ /www.w3.org/TR/wai-aria-practices-1.1/ Tools
  14. 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
  15. 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
  16. 29.
  17. 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