Accessing Accessible Accessibility

Slide 1

Slide 1 text

A C C E S S I N G A C C E S S I B L E A C C E S S I B I L I T Y B Y: J E N N I F E R W O N G

Slide 2

Slide 2 text

J E N N I F E R W O N G S O F T WA R E E N G I N E E R @ M Y B L U E W R I S T B A N D M O C H I M A C H I N E . C O M W H O A M I ?

Slide 3

Slide 3 text

P R I V I L E G E C H E C K • Cisgender • Straight • Middle to upper middle class • No physical, social, or learning disabilities • College educated • Socially acceptable body type

Slide 4

Slide 4 text

A C C E S S I B I L I T Y I N T E R E S T • jQuery SF • Bay Area Accessibility and Inclusive Design

Slide 5

Slide 5 text

W H AT I S W E B A C C E S S I B I L I T Y ? S O O O …

Slide 6

Slide 6 text

– W I K I P E D I A “Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.”

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Turkish Airlines!

Slide 9

Slide 9 text

W H O N E E D S A C C E S S I B I L I T Y ?

Slide 10

Slide 10 text

E V E RY O N E !

Slide 11

Slide 11 text

W H O I S E V E RY O N E ? • Visual: Blindness, low vision, poor eyesight, color blindness • Motor / Mobility: Difficulty or inability to use the hands, tremors, muscle slowness, loss of fine muscle control, Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke • Auditory: Deafness, hearing impairments, hard of hearing • Seizures: Photo epileptic seizures caused by flashing effects. • Cognitive / Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities affecting memory, attention, developmental "maturity," problem- solving and logic skills

Slide 12

Slide 12 text

T H E M Y T H O F T H E M I N O R I T Y U S E R S TAT I S T I C S

Slide 13

Slide 13 text

• 18.7% of the U.S. population have some type of disability and 12.6% have a severe disability. • 3.4% of the Romanian population have some type of disability. • Up to 7.5% of the internet population world wide is estimated to have a disability. T H E U S & W O R L D W I D E S TAT I S T I C S

Slide 14

Slide 14 text

• 28.1% of sessions are people over 45. • The bounce rate for this population is higher for people over 45, which may be due to usability issues. A P R E V I O U S C O M PA N Y S TAT I S T I C S

Slide 15

Slide 15 text

W H Y A C C E S S I B I L I T Y ?

Slide 16

Slide 16 text

– M E “You’re already here. At this talk. So let’s be a11y allies!”

Slide 17

Slide 17 text

• Section 504 (US - 1973) • Section 508 (US - 1973) • Law No. 448 (RO - 2006) • Regarding the Protection and Promotion of the Rights of Disabled Persons I T ’ S T H E L A W W H Y A C C E S S I B I L I T Y ?

Slide 18

Slide 18 text

W E B A C C E S S I B I L I T Y L A W S • Australia • Canada • China • Brazil • Hong Kong • India • Israel • Japan • New Zealand • Norway • Republic of Korea • Switzerland • Taiwan • United States • European Union • Denmark • Finland • France • Germany • Ireland • Italy • Netherlands • Portugal • Spain • Sweden • United Kingdom (?)

Slide 19

Slide 19 text

B R U C E M A G U I R E V S . S Y D N E Y O R G A N I Z I N G C O M M I T T E E F O R T H E O LY M P I C G A M E S ( S O C O G ) • June 1999: Maguire filed a complaint with the Human Rights & Equal Opportunities Commission under the DDA. • Maguire could not access the contents of the Olympic Games website. • Maguire won. • SOCOG did not make the changes, and was fined AU$20,000

Slide 20

Slide 20 text

– B R U C E M A G U I R E “It's an ongoing campaign to raise awareness about web accessibility and to keep asserting the fact that people with a disability have as much right to choice and inclusion as the rest of the community.”

Slide 21

Slide 21 text

• National Federation for the Blind v. Target (2008 - paid US$6M) • National Agency for Payments and Social Inspections issued 167 fines totaling $310,000 (2011 - 2012) • National Council for Combatting Discrimination v. City Halls for public transit access (2014) O T H E R L A W S U I T S W H Y A C C E S S I B I L I T Y ?

Slide 22

Slide 22 text

• Accessibility automatically improves the SEO of websites • Googlebot is the world’s most prolific blind user of the internet W H Y A C C E S S I B I L I T Y ? S E O Affirmative

Slide 23

Slide 23 text

H O W - T O A C C E S S I B I L I T Y ?

Slide 24

Slide 24 text

S TA N D A R D S H O W T O A C C E S S I B I L I T Y

Slide 25

Slide 25 text

• Web Content Accessibility Guidelines (WCAG 2.0) • Section 508 (US) S TA N D A R D S W E B S TA N D A R D S

Slide 26

Slide 26 text

• Does not sufficiently put user at heart of the process • Does not specifically address accessibility for those with learning or cognitive disabilities • Does not keep up with current technology (2008) • Guidelines are difficult to navigate S TA N D A R D S C R I T I C I S M S

Slide 27

Slide 27 text

• Seattle Link Light Rail Train • Real world example of accessibility for those with cognitive disabilities • Each station has an image and color S TA N D A R D S C O G N I T I V E D I S A B I L I T I E S

Slide 28

Slide 28 text

• Accessibility Guidelines (AG) • Approved on November 4, 2016 • https://www.w3.org/WAI/GL/wiki/ Process_of_Designing_Silver • You can participate! S TA N D A R D S S I LV E R !

Slide 29

Slide 29 text

T E S T I N G H O W T O A C C E S S I B I L I T Y

Slide 30

Slide 30 text

• Use the Tab key to move through a website • Try using standard keyboard shortcuts T E S T I N G K E Y B O A R D N AV I G AT I O N

Slide 31

Slide 31 text

• JAWS • ZoomText • Window-Eyes • NVDA • VoiceOver • TalkBack T E S T I N G S C R E E N R E A D E R S

Slide 32

Slide 32 text

S C R E E N R E A D E R S T E S T I N G

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

• Braille readers • High contrast keyboards T E S T I N G A S S I S T I V E T E C H N O L O G Y

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

• Mouth stick • Head wand • Chin controller T E S T I N G A S S I S T I V E T E C H N O L O G Y

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

• Eye tracking device • Single switch onscreen keyboard T E S T I N G A S S I S T I V E T E C H N O L O G Y

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

• Wave by WebAim • aXe by Deque University • tota11y by Khan Academy T E S T I N G W E B VA L I D AT O R S

Slide 42

Slide 42 text

• WebAim • Contrast Checker • Accessible Colors T E S T I N G C O L O R C O N T R A S T

Slide 43

Slide 43 text

T E S T I N G N O C O F F E E

Slide 44

Slide 44 text

• Remove CSS • In person user testing • Blindfolds, blacked out glasses, turn off screen brightness • Color blindness or low vision simulator T E S T I N G O T H E R I D E A S

Slide 45

Slide 45 text

C O D I N G H O W T O A C C E S S I B I L I T Y

Slide 46

Slide 46 text

• Don’t use

as • Don’t use as • Don’t use as C O D I N G S E M A N T I C H T M L

Slide 47

Slide 47 text

- P U P P Y C AT “USE THE SWORD AS A SWORD.”

Slide 48

Slide 48 text

• Clear heading structure • Use , , , , , , and when appropriate to indicate layout C O D I N G S E M A N T I C H T M L

Slide 49

Slide 49 text

• alt=“something descriptive and easily understandable” • alt=“” when decorative with no other function • Text description if a complex graphic, e.g. map or chart C O D I N G I M A G E S , M A P S , C H A R T S

Slide 50

Slide 50 text

• Inputs need • Make sure they are associated! • for=“”  name=“” • Consistency (Labels & Buttons across site) C O D I N G F O R M S

Slide 51

Slide 51 text

• Non color indicator • Clear :hover and :focus states C O D I N G L I N K S & B U T T O N S

Slide 52

Slide 52 text

• Don’t use tabindex if you can avoid it. • If you can’t, only use tabindex=0 or tabindex=-1 • 0 indicates that the element should be placed in the default navigation order. • -1 removes the element from the default navigation flow and allows it to receive programmatic focus (from a link or with scripting). C O D I N G TA B O R D E R I N G

Slide 53

Slide 53 text

• Closed captions • No auto play! • A way to pause, start, and stop • Transcript C O D I N G V I D E O S A N D A N I M AT I O N S

Slide 54

Slide 54 text

A R I A H O W T O A C C E S S I B I L I T Y

Slide 55

Slide 55 text

W 3 C WAI ARIA: Web Accessibility Initiative Accessible Rich Internet Applications

Slide 56

Slide 56 text

B E C A R E F U L A R I A V S . A RYA

Slide 57

Slide 57 text

• Roles • States • Properties A R I A S T R U C T U R E

Slide 58

Slide 58 text

• Main indicator of type • Allows tools to present and support interaction with an object consistent with user expectations of other objects of that type, e.g. role=“form” A R I A R O L E S

Slide 59

Slide 59 text

• Abstract • Landmark • Document • Widget A R I A R O L E S

Slide 60

Slide 60 text

• aria-busy • aria-disabled • aria-grabbed • aria-hidden • aria-invalid A R I A S TAT E S

Slide 61

Slide 61 text

• aria-atomic • aria-controls • aria-describedby • aria-dropeffect • aria-flowto • aria-haspopup • aria-label • aria-labelledby • aria-live • aria-owns • aria-relevant A R I A P R O P E R T I E S

Slide 62

Slide 62 text

• Visible Link at top of page • Visible link elsewhere on page • Invisible link • Invisible link, visible with keyboard focus A R I A S K I P L I N K S

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

P R E V E N T I N G R E G R E S S I O N S H O W T O A C C E S S I B I L I T Y

Slide 65

Slide 65 text

• Unit Tests • Automation Tests • Modular, reusable components P R E V E N T I N G R E G R E S S I O N S T E S T S A N D R E U S E

Slide 66

Slide 66 text

N A R R AT O R TA L K B A C K V O I C E O V E R D E M O T I M E !

Slide 67

Slide 67 text

N A R R AT O R • Microsoft! • Start & Stop: Windows logo key + Ctrl + Enter • View All Commands: Caps Lock + F1

Slide 68

Slide 68 text

TA L K B A C K • Android! 4.0+ has more options • How to turn on TalkBack • TalkBalk > Settings > Launch TalkBack tutorial • Touch to explore  Double tap  Two finger scroll

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

V O I C E O V E R • Apple OSX and iOS • Start & Stop (Desktop) • Command + F5 • Open VoiceOver Utility

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

A N A 1 1 Y S T O RY About a place where I worked

Slide 75

Slide 75 text

A L L I L A C K E R S TA R T E R

Slide 76

Slide 76 text

• Benefits • Sales • Legal • Consumer • International A C Q U I R I N G B U Y I N S TA R T E R

Slide 77

Slide 77 text

Accessibility audit on main consumer user flows

Slide 78

Slide 78 text

C R O S S F U N C T I O N A L T E A M • Alby, Maggie, Daniel (Nashville), Lucas (Mendoza), Maxi (Mendoza), Octavio (Mendoza): Engineering • Tricia: Content Strategy • Randy: Account Exec (Schools) • Sun, Tom: Design • Allison: Customer Support (WeRock) • Senna: Quality Assurance (QA) • Julia: Legal

Slide 79

Slide 79 text

• Google Drive (centralized) • Videos • Internal Docs D O C U M E N TAT I O N B E S T P R A C T I C E S E V E N T B R I T E

Slide 80

Slide 80 text

• Color Contrast Analyser • tota11y (on Dev & QA) • eslint-plugin-jsx-a11y • Acceptance Tests W H AT W E U S E D T O O L S

Slide 81

Slide 81 text

C O L O R C O N T R A S T A N A LY S E R ( F O R S K E T C H ) T O O L S

Slide 82

Slide 82 text

T O TA 1 1 Y T O O L S

Slide 83

Slide 83 text

A C C E P TA N C E T E S T S W H AT W E U S E

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

• Benchmarks • Jira Dashboard • Goals • Deadlines • Involve a Program Manager P R O J E C T M A N A G E M E N T A N A 1 1 Y S T O RY

Slide 87

Slide 87 text

• 2 tickets • per team (~3-7 developers) • per sprint (two weeks) • for 10 sprints I N I T I A L E S T I M AT E A N A 1 1 Y S T O RY

Slide 88

Slide 88 text

A C C E S S I B I L I T Y D A S H B O A R D A N A 1 1 Y S T O RY

Slide 89

Slide 89 text

W O R K A L O N E D O N ’ T

Slide 90

Slide 90 text

A C C E S S I B I L I T Y W O R K S H O P V O I C E O V E R

Slide 91

Slide 91 text

- M E A F T E R E V E RY O N E F R E A K E D O U T “We must work as a team.”

Slide 92

Slide 92 text

L U C A S PA D O VA N S P R E A D

Slide 93

Slide 93 text

W H AT H A P P E N E D ? S O O O …

Slide 94

Slide 94 text

- M E “It’s a work in progress. Sorry for any convenience caused.”

Slide 95

Slide 95 text

F U T U R E P L A N S • Complete all of our Jira Tickets • Build out Accessibility Process checklist • For Product, Design, Engineering, QA • Focused effort from Frontend Foundry team

Slide 96

Slide 96 text

R E S O U R C E S YAY !

Slide 97

Slide 97 text

R E S O U R C E S • WebAim • w3 WAI WCAG • Web a11y Slack Channel • Bay Area Accessibility and Inclusive Design • Google Accessibility

Slide 98

Slide 98 text

J E N N A 1 1 Y