WCAG for Designers

How WCAG can help designers to create accessible websites.

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

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
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
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
32. 🏻 Avoid 🏻 (May) Do this Use of colors (A)
33. 🏻 Avoid 🏻 Do this Use of colors (A)
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)
46. 👎🏻 Avoid Focus visible (AA) 👍🏻 Do this
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)
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. 👍🏻 👎🏻
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)
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)
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!