WCAG for Designers - Speaker Deck

Slide 1

Slide 1 text

WCAG for Designers 20 March 2021

Slide 2

Slide 2 text

A bit about me @rifatnajmi

Slide 3

Slide 3 text

Accessibility

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

4,3% of Indonesians live with disabilities. (Australia Indonesia Partnership for Economic Governance - 2010)

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

10% of Indonesians live with disabilities. (ILO/WHO - 2018)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

We all will have disabilities eventually, unless we die ﬁrst. Gregg Vanderheiden

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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 diﬀerences 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

Slide 12

Slide 12 text

Accessibility Governments agree to make it possible for people with disabilities to live independently and participate in their communities. Article 9 of CPRD

Slide 13

Slide 13 text

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 “

Slide 14

Slide 14 text

🏻

Slide 15

Slide 15 text

Accessibility 1. The qualities that make an experience open to all. 2. A professional discipline aimed at achieving No. 1. Microsoft

Slide 16

Slide 16 text

Inclusive design A design methodology that enables and draws on the full range of human diversity. Microsoft

Slide 17

Slide 17 text

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 beneﬁt people, universally. Constraints are a beautiful thing.

Slide 18

Slide 18 text

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 ﬁnd typing more diﬃcult and people who may be susceptible to spelling mistakes. Digital Accessibility at Harvard

Slide 19

Slide 19 text

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

WCAG

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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 diﬀerent groups and diﬀerent situations.

Slide 26

Slide 26 text

WCAG For Designers The explanations on the next pages are summarized from Geri Raid’s checklist. https://rifat.id/wcag4d

Slide 27

Slide 27 text

Don’t rely on colour alone to communicate meaning or to distinguish visual elements. Use of colors (A)

Slide 28

Slide 28 text

Image: Enchroma

Slide 29

Slide 29 text

Image: Enchroma

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

🏻 Avoid 🏻 Do this Use of colors (A)

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

7:1 for text smaller than 24px, or 19px bold. 4.5:1 for text larger than 24px, or 19px bold Contrast enhanced (AAA)

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

👎🏻 Avoid Non-text contrast (AA) 👍🏻 Do this

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and conﬁdently interact with it. Focus visible (AA)

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

👎🏻 Avoid Focus visible (AA) 👍🏻 Do this

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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 magniﬁed. Images of text (AA)

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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 ﬁrst word. Headings and labels (AA)

Slide 51

Slide 51 text

👍🏻 👎🏻

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

headingsMap (Chrome plugin) https://rifat.id/hmap

Slide 58

Slide 58 text

Labels must indicate the purpose of the ﬁeld they relate to. Headings and labels (AA)

Slide 59

Slide 59 text

Avoid (May) Do this Headings and labels (AA)

Slide 60

Slide 60 text

Order content in your designs to ensure reading and navigation order are be logical and intuitive. Meaningful sequence (A)

Slide 61

Slide 61 text

Meaningful sequences (A) Absolutely Avoid This

Slide 62

Slide 62 text

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)

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

If navigation is repeated across multiple pages, all pages must be presented in a consistent manner. Consistent navigation (AA)

Slide 65

Slide 65 text

👎🏻 Avoid 👍🏻 Do this Consistent navigation (AA)

Slide 66

Slide 66 text

Instructions must not rely upon shape, size or visual location. Sensory characteristics (A)

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

🏻 Avoid 🏻 (May) Do this Use of colors (A) and Sensory characteristics (A)

Slide 69

Slide 69 text

If a feature is used in multiple places it must be identiﬁed in a consistent way. Consistent identiﬁcation (AA)

Slide 70

Slide 70 text

🏻 Avoid Consistent identiﬁcation (AA)

Slide 71

Slide 71 text

🏻 Do this Consistent identiﬁcation (AA)

Slide 72

Slide 72 text

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 identiﬁcation (AA)