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

WCAG for Designers

3fbd987f2b4b4a8538038c649409d7be?s=47 Rifat Najmi
March 20, 2021

WCAG for Designers

How WCAG can help designers to create accessible websites.

Presented during a webinar held by Suarise, March 20 2021.

3fbd987f2b4b4a8538038c649409d7be?s=128

Rifat Najmi

March 20, 2021
Tweet

Transcript

  1. WCAG for Designers 20 March 2021

  2. A bit about me @rifatnajmi

  3. Accessibility

  4. 7.126.409 of Indonesians live with disabilities. (Kemnakertrans - 2010)

  5. 4,3% of Indonesians live with disabilities. (Australia Indonesia Partnership for

    Economic Governance - 2010)
  6. Seeing 3.474.035 Physical 3.010.830 Hearing 2.547.626 Mental 1.389.614 Chronic 1.158.012

    Total 11.580.117 (PUSDATIN Kemensos - 2010)
  7. 10% of Indonesians live with disabilities. (ILO/WHO - 2018)

  8. I have no legs, But I still have feelings, I

    cannot see, But I think all the time, Although I’m deaf, I still want to communicate, Why do people see me as useless, thoughtless, talkless, When I am as capable as any, For thoughts about our world Coralie Severs, 14, United Kingdom
  9. We all will have disabilities eventually, unless we die first.

    Gregg Vanderheiden
  10. None
  11. CRPD General Principle • Respect for everyone’s inherent dignity, freedom

    to make their own choices and independence. • Non-discrimination (treating everyone fairly). • Full participation and inclusion in society (being included in your community). • Respect for differences and accepting people with disabilities as part of human diversity. • Equal opportunity. • Accessibility (having access to transportation, places and information, and not being refused access because you have a disability). • Equality between men and women (having the same opportunities whether you are a girl or a boy). • Respect for the evolving capacity of children with disabilities and their right to preserve their identity (being respected for your abilities and proud of who you are). The Convention on the Rights of Persons with Disabilities
  12. Accessibility Governments agree to make it possible for people with

    disabilities to live independently and participate in their communities. Article 9 of CPRD
  13. What is UX? User experience encompasses all aspects of the

    end-user's interaction with the company, its services, and its products. “ -- Norman Nielsen Group “
  14. 🏻

  15. Accessibility 1. The qualities that make an experience open to

    all. 2. A professional discipline aimed at achieving No. 1. Microsoft
  16. Inclusive design A design methodology that enables and draws on

    the full range of human diversity. Microsoft
  17. Microsoft’s Inclusivity Principles Recognise exclusion Learn from human diversity Solve

    for one, extend to many Exclusion happens when we solve problems using our own biases. Seek out exclusions as opportunities to create new ideas and inclusive designs. Human beings are the real experts in adapting to diversity. Inclusive design puts people at the center from the very start of the process, and those fresh, diverse perspectives are the key to true insight. Everyone has abilities, and limits to those abilities. Designing for people with disabilities actually results in designs that benefit people, universally. Constraints are a beautiful thing.
  18. Autocomplete Autocomplete widgets can be helpful for accessibility because they

    can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes. Digital Accessibility at Harvard
  19. Autocomplete Autocomplete widgets can be helpful for accessibility because they

    can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes. Digital Accessibility at Harvard Permanent 26K Temporary 13M Situational 8M
  20. None
  21. None
  22. None
  23. WCAG

  24. WCAG The Web Content Accessibility Guidelines are part of a

    series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet.
  25. A Lowest WCAG Conformance AA Mid range AAA Highest WCAG

    2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations.
  26. WCAG For Designers The explanations on the next pages are

    summarized from Geri Raid’s checklist. https://rifat.id/wcag4d
  27. Don’t rely on colour alone to communicate meaning or to

    distinguish visual elements. Use of colors (A)
  28. Image: Enchroma

  29. Image: Enchroma

  30. None
  31. None
  32. 🏻 Avoid 🏻 (May) Do this Use of colors (A)

  33. 🏻 Avoid 🏻 Do this Use of colors (A)

  34. None
  35. None
  36. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  37. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  38. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  39. 4.5:1 for text smaller than 24px, or 19px bold. 3:1

    for text larger than 24px, or 19px bold Contrast minimum (AA)
  40. 7:1 for text smaller than 24px, or 19px bold. 4.5:1

    for text larger than 24px, or 19px bold Contrast enhanced (AAA)
  41. All components and graphics must have a contrast ratio of

    at least 3:1 against adjacent colours, unless they are purely decorative. Non-text contrast (AA)
  42. 👎🏻 Avoid Non-text contrast (AA) 👍🏻 Do this

  43. Color Contrast Analyser https://rifat.id/cca

  44. It must be easy to tell which element has keyboard

    focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it. Focus visible (AA)
  45. None
  46. 👎🏻 Avoid Focus visible (AA) 👍🏻 Do this

  47. None
  48. Text that is essential to the journey must not be

    presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified. Images of text (AA)
  49. None
  50. Headings must describe the topic or purpose of the content

    in the section below. Headings must be used appropriately and nested correctly, only using a capital letter for the first word. Headings and labels (AA)
  51. 👍🏻 👎🏻

  52. None
  53. None
  54. None
  55. None
  56. None
  57. headingsMap (Chrome plugin) https://rifat.id/hmap

  58. Labels must indicate the purpose of the field they relate

    to. Headings and labels (AA)
  59. Avoid (May) Do this Headings and labels (AA)

  60. Order content in your designs to ensure reading and navigation

    order are be logical and intuitive. Meaningful sequence (A)
  61. Meaningful sequences (A) Absolutely Avoid This

  62. A screen must not be locked to either horizontal or

    vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app. Orientation (AA)
  63. None
  64. If navigation is repeated across multiple pages, all pages must

    be presented in a consistent manner. Consistent navigation (AA)
  65. 👎🏻 Avoid 👍🏻 Do this Consistent navigation (AA)

  66. Instructions must not rely upon shape, size or visual location.

    Sensory characteristics (A)
  67. 👎🏻 Avoid Sensory characteristics (A) 👍🏻 Do this

  68. 🏻 Avoid 🏻 (May) Do this Use of colors (A)

    and Sensory characteristics (A)
  69. If a feature is used in multiple places it must

    be identified in a consistent way. Consistent identification (AA)
  70. 🏻 Avoid Consistent identification (AA)

  71. 🏻 Do this Consistent identification (AA)

  72. WCAG for Designers Color • Use of color (A) •

    Contrast minimum (AA) • Contrast enhanced (AAA) • Non-text contrast (AA) • Focus visible (AA) Copy • Images of text (AA) • Headings and labels (AA) Layout • Meaningful sequence (A) • Orientation (AA) • Consistent navigation (AA) • Sensory characteristics (A) • Consistent identification (AA)
  73. None
  74. None
  75. None
  76. None
  77. None
  78. Great experiences don’t just happen.

  79. They start with you, your team, and the people you

    serve.
  80. Thank you Hope to see you again!