Accessibility @ Cascade SF

Slide 1

Slide 1 text

Accessibility @ Cascade SF + RobDodson @rob_dodson

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Perf is crucial for good UX

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives. - World Health Organization source • who.int/topics/disabilities/en/

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Accessibility is good UX

Slide 10

Slide 10 text

Diversity of users Design Focus

Slide 11

Slide 11 text

Understanding the diversity of users

Slide 12

Slide 12 text

About 15% of the world's population lives with some form of disability - World Health Organization source • who.int/disabilities/world_report/2011/report

Slide 13

Slide 13 text

1 Billion People

Slide 14

Slide 14 text

visual auditory cognitive motor

Slide 15

Slide 15 text

Visual A broad range from no vision (total blindness) to limited or low vision

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Motor Users may prefer not to use a mouse, have RSI, or physical paralysis and limited range of motion

Slide 19

Slide 19 text

Motor Users may prefer not to use a mouse, have RSI, or physical paralysis and limited range of motion

Slide 20

Slide 20 text

Auditory May be completely deaf or hard of hearing

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Cognitive A broad range encompassing ADHD, dyslexia, and autism just to name a few

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

visual auditory cognitive motor

Slide 25

Slide 25 text

WCAG 2.0 Web Content Accessibility Guidelines 2.0 provide a system for assessing the accessibility of any app w3.org/TR/WCAG20

Slide 26

Slide 26 text

WebAIM WCAG 2.0 Checklist webaim.org/standards/wcag/checklist

Slide 27

Slide 27 text

Nail the checklist

Slide 28

Slide 28 text

Design

Slide 29

Slide 29 text

Make sure you always include a meta viewport tag

Slide 30

Slide 30 text

anti-pattern Make sure you always include a meta viewport tag

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Touch targets Use a minimum of 48px for your touch target size. And provide 32px of margin around each touch target.

Slide 33

Slide 33 text

48 40 48 24 Touch targets Use a minimum of 48px for your touch target size. And provide 32px of margin around each touch target.

Slide 34

Slide 34 text

Ali Connors Brunch this weekend? I’ll be in your neighborhood doing errands … Summer BBQ Wish I could come, but I’m out of town this … Oui oui Do you have any recommendations? Have … Birthday gift Have any ideas about what to get Heidi for … me, Scott, Jennifer Sandra Adams Trevor Hansen 15 min 2 hr 6 hr 12 hr Inbox 32 Touch targets Use a minimum of 48px for your touch target size. And provide 32px of margin around each touch target.

Slide 35

Slide 35 text

Size things appropriately Be sure to set your meta viewport and provide generous touch targets

Slide 36

Slide 36 text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto inventore magni error, qui, eligendi sint pariatur dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto inventore magni error, qui, eligendi sint pariatur dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto inventore magni error, qui, eligendi sint pariatur dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto inventore magni error, qui, eligendi sint pariatur dolorum. 15.9:1 5.7:1 3.5:1 1.6:1 Ensure users can read your content with proper contrast ratios

Slide 37

Slide 37 text

WCAG - 1.4.3 Contrast • Text and images of text have a contrast ratio of at least 4.5:1. • Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1

Slide 38

Slide 38 text

• Text and images of text have a contrast ratio of at least 4.5:1. • Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1 WCAG - 1.4.3 Contrast

Slide 39

Slide 39 text

• Text and images of text have a contrast ratio of at least 4.5:1. • Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1 WCAG - 1.4.3 Contrast

Slide 40

Slide 40 text

• Text and images of text have a contrast ratio of at least 4.5:1. • Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1 WCAG - 1.4.3 Contrast

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Accessibility Developer Tools

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

bit.ly/a11y-devtools

Slide 45

Slide 45 text

Ensure proper contrast Make sure you meet minimum contrast ratios and audit your site when adding new content

Slide 46

Slide 46 text

Focus

Slide 47

Slide 47 text

Focus determines where keyboard events go in the page.

Slide 48

Slide 48 text

Tab Order The order in which DOM elements receive focus as the user presses the tab key

Slide 49

Slide 49 text

DOM Order Matters Tab order is inferred by the order of the DOM. Changing the visual position of elements can lead to an illogical tab order.

Slide 50

Slide 50 text

Be Focused I Should Last! I Should  Be Focused  Last! HTML Output

Slide 51

Slide 51 text

Be Focused I Should Last! I Should  Be Focused  Last! HTML Output tab

Slide 52

Slide 52 text

Be Focused I Should Last! I Should  Be Focused  Last! HTML Output tab

Slide 53

Slide 53 text

Be Focused I Should Last! I Should  Be Focused  Last! HTML Output tab

Slide 54

Slide 54 text

I Should   Be Focused  Last! HTML Output I Should Be Focused Last!

Slide 55

Slide 55 text

I Should Be Focused Last! I Should   Be Focused  Last! HTML Output tab

Slide 56

Slide 56 text

I Should Be Focused Last! I Should   Be Focused  Last! HTML Output tab

Slide 57

Slide 57 text

I Should Be Focused Last! I Should   Be Focused  Last! HTML Output tab

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Don’t fight the platform Leverage the natural DOM order to create a good keyboard experience

Slide 60

Slide 60 text

What can be focused?

Slide 61

Slide 61 text

What can be focused? should

Slide 62

Slide 62 text

Implicitly Focusable Native elements like input, button, and select get focusability for free! Click Me! Password Aisle Seat

Slide 63

Slide 63 text

Not all elements are focusable

Slide 64

Slide 64 text

Bop Beep Boop Beep  Bop  Boop HTML Output

Slide 65

Slide 65 text

Beep Boop Beep 

Bop

  Boop HTML Output BOP

Slide 66

Slide 66 text

Beep Boop Beep 

Bop

  Boop HTML Output BOP tab

Slide 67

Slide 67 text

Beep Boop Beep 

Bop

  Boop HTML Output BOP tab

Slide 68

Slide 68 text

Beep Boop Beep  Bop   Boop HTML Output BOP

Slide 69

Slide 69 text

Beep Boop Beep  Bop   Boop HTML Output BOP tab

Slide 70

Slide 70 text

Beep Boop Beep  Bop   Boop HTML Output BOP tab

Slide 71

Slide 71 text

Don’t fight the platform Use native elements whenever possible

Slide 72

Slide 72 text

tabindex Configure the focus behavior of an element

Slide 73

Slide 73 text

tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings

Settings

Slide 74

Slide 74 text

tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings

Settings

Slide 75

Slide 75 text

tabindex=“0” In the natural tab order and can be programmatically focused by calling focus()

Settings

Slide 76

Slide 76 text

tabindex=“-1” Not in the natural tab order but can be programmatically focused by calling focus(). Useful for “roving tabindex”

Item 1

Item 2

Item 3

Item 1 Item 2 Item 3

Slide 77

Slide 77 text

tabindex=“-1”

Item 1

Item 2

Item 3

Item 1 Item 2 Item 3 focus(); Not in the natural tab order but can be programmatically focused by calling focus(). Useful for “roving tabindex”

Slide 78

Slide 78 text

tabindex=“5” In the natural tab order and jumps ahead of everything else. Generally an anti-pattern.

Slide 79

Slide 79 text

ARIA Design Patterns w3.org/TR/wai-aria-practices-1.1

Slide 80

Slide 80 text

Use the keyboard patterns from the ARIA Authoring guide to ensure an accessible experience

Slide 81

Slide 81 text

Review!

Slide 82

Slide 82 text

Nail the checklist Consider the broad range of users. Work with WCAG 2.0 and the Web AIM checklist to ensure your application is accessible.

Slide 83

Slide 83 text

Design for inclusivity Use a meta viewport tag and ensure proper touch target sizes. Make sure all text meets minimum contrast ratios.

Slide 84

Slide 84 text

Ensure focus Leverage native elements like button for easy focus wins. Use tabindex to add keyboard support to custom elements.

Slide 85

Slide 85 text

Good accessibility is good UX

Slide 86

Slide 86 text

bit.ly/web-a11y

Slide 87

Slide 87 text

Thank You! + RobDodson @rob_dodson Images created by Julien Deveaux, Co-Effect Creative, Michael Wohlwend, Maico Amorim, Yu Luck, Andrey Vasiliev, Till Teenck, Gregor Črešnar, Wes Breazell, Amandine Vandesteene from the Noun project Credits