Web Accessibility fundamentals (for qa and product owners)

Slide 1

Slide 1 text

Web Accessibility fundamentals (For QA & Product) October, 22nd 2019 David Dias

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Overview • What is Web Accessibility? • How browsers communicate with screen readers? • What is WCAG? • What about ARIA? • Tools to check a11y issues • Processes to stay a11y?

Slide 4

Slide 4 text

What is Web Accessibility (a11y)?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

« Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. » Web Accessibility

Slide 7

Slide 7 text

Inclusive Design Research Center - OCAD a mismatch between the needs of the individual and the design of the product, system, or service. Disability is

Slide 8

Slide 8 text

Source: Microsoft Inclusive Design

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

https://disabilitycompendium.org/sites/default/ fi les/user-uploads/2016_AnnualReport.pdf (online) (online)

Slide 11

Slide 11 text

https://www.toronto.ca/legdocs/mmis/2016/ah/bgrd/background fi le-94585.pdf Ontario: Approx. 1.85 million people report having a disability, representing 15.5% of the population. 70% of disabilities are ‘invisible’ Toronto: Apply 15.5% to Toronto’s population 2.79 million people = 432,450 people with disabilities

Slide 12

Slide 12 text

AODA complainte timelines

Slide 13

Slide 13 text

What is WCAG?

Slide 14

Slide 14 text

« The WCAG regroups a series of guidelines for improving web accessibility. Produced by the World Wide Web Consortium (W3C), the WCAG are the best means of making your website useful to all of your users » WCAG

Slide 15

Slide 15 text

• Outlines best practices for making web content universally Perceivable, Operable, Understandable, and Robust. • Defines criteria for successful inclusive web design, with ascending levels of compliance (levels A, AA, and AAA). • Is composed and reviewed by a global community of digital experts. • Connects the world through common information technology and user experience standards. Aspects of WCAG (“whuh-cag”)

Slide 16

Slide 16 text

History of WCAG October 1, 1994 World Wide Web Consortium is founded. May 5, 1999 WCAG 1.0 is released. December 11, 2008 WCAG 2.0 is released. October 2012 WCAG 2.0 become ISO standard ISO/IEC 40500. June 5, 2018 WCAG 2.1 is released.

Slide 17

Slide 17 text

WCAG 1.0, 2.0, 2.1? WCAG 1.0 Uses guidelines and each guideline has a checkpoint, which are priority 1, 2, or 3. WCAG 2.0 Uses four design principles and each principle has a guideline. Each guideline has a success criteria level A, AA, or AAA. WCAG 2.1 WCAG 2.1 is backwards compatible with WCAG 2.0. The 2.0 success criteria are the same as in 2.1, but 2.1 has additional success criteria.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

4 principles

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Perceivable This means that users must be able to perceive the information being presented – it cannot be invisible to all of their senses. Ask Yourself: Is There anything on our website that a blind, deaf, low vision or color blind user would not be able to perceive? Can I see it? Hear it? Feel it?

Slide 22

Slide 22 text

Perceivable - Alternative text https://webaim.org/articles/voiceover/images

Slide 23

Slide 23 text

Perceivable - Don’t relay only on colors https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users

Slide 24

Slide 24 text

https://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users

Slide 25

Slide 25 text

Operable Ask Yourself: Can users control interactive elements of the website? Does the website make completing tasks easy? Can I scroll it? Fill it? Move it? Users must be able to operate the interface – the interface cannot require interaction that a user cannot perform.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Understandable Users must be able to understand the information as well as the operation of the user interface – the content or operation cannot be beyond their understanding. Ask Yourself: Is all of the text on our website clearly written? Are all of the interactions easy to understand? Can I read it? Get it? Predict how it will behave?

Slide 28

Slide 28 text

Robust It means that users must be able to access the content as technologies advance – as technologies and user agents evolve, the content should remain accessible. Ask Yourself: Does our website only support the newest browsers or operating systems? Is our website developed with best practices? It is standard enough that it will work with all my tools?

Slide 29

Slide 29 text

Quiz

Slide 30

Slide 30 text

- Live videos has captions - Provide descriptive link text - Provide ability to skip content - Explain any unusal word - No major code error Perceivable, Operable, Understandable or Robust Perceivable Perceivable Operable Understandable Robust

Slide 31

Slide 31 text

3 levels of digital accessibility

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

ARIA - Level AAA • A: This level improves accessibility for most sites by making it easier for browsing readers to navigate a site and translate its content, but it is still pretty basic. Required

Slide 34

Slide 34 text

ARIA - Level AA Required • AA: This level makes content accessible to people with a wider range of disabilities by providing guidance on elements such as color contrast and error identi fi cation. Regulators prefer this level.

Slide 35

Slide 35 text

ARIA - Level AAA • AAA: The highest level of accessibility compliance, this makes content accessible to the widest range of people, but it can signi fi cantly alter the design of a site. Government legislation doesn’t typically require this because it’s not always possible to conform. Optional

Slide 36

Slide 36 text

What about ARIA?

Slide 37

Slide 37 text

« ARIA (Accessible Rich Internet Applications) is a spec from the W3C and created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. The speci fi cations adds the ability to modify and enhance the semantic meaning of elements in the DOM.» WAI-ARIA

Slide 38

Slide 38 text

ARIA does NOT change behavior

Slide 39

Slide 39 text

ARIA let you fi ll in gaps in the accessibility tree.

Slide 40

Slide 40 text

How browsers communicate with screen readers?

Slide 41

Slide 41 text

How the browser communicate with a screen reader? GUI

Slide 42

Slide 42 text

HTML How old are you? </ title> </ head> <body> <label for="age">Age < / label> <input type="text" name="age" id="age" value="35"> <div> <button>Back < / button> <button>Next < / button> < / div> </ body> </ html> Accessibility Tree id=1 role=WebArea name=“How old are you?” id=2 role=Label name=“Age” id=3 role=TextField labelledByIds=[2] value=“42” id=4 role=Group id=5 role=Button name=“Back id=6 role=Button name=“Next”

Slide 43

Slide 43 text

Programmatic semantics Role: “combobox” Name: “Preferred seat type” State: collapse Value: “Aisle seat”

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Aria lets you step in there

Slide 46

Slide 46 text

bit.ly/aria-guide

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Aria’s rules

Slide 49

Slide 49 text

Where possible, use correct semantic HTML elements. Don’t use ARIA as a quick- fi x.

Slide 50

Slide 50 text

2-5 rules of Aria 2. Do not change native semantics, unless you really have to. 3. All interactive ARIA controls must be usable with the keyboard. 4. Do not use role=“presentation” or aria-hidden=“true” on a visible focusable element. 5. All interactive elements must have an accessible name.

Slide 51

Slide 51 text

Aria role, state & properties

Slide 52

Slide 52 text

Aria roles: what is it? • Landmark: large content areas • Document: structural description for a section • Widget: interactive patterns without semantic equivalents in HTML (menu, slider, progress bar, etc)

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Landmarks banner main contentinfo navigation region form complementary search HTML5 Role

Slide 55

Slide 55 text

Demo landmarks With landmark extension VO + U

Slide 56

Slide 56 text

Aria state: what is the current state of the widget? It is checked, expanded, disabled?

Slide 57

Slide 57 text

Aria properties: what are the properties of the widget? Does it have live regions, does it have relationships with other elements, etc?

Slide 58

Slide 58 text

Demo checkbox

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

The State of A11y (2019)

Slide 61

Slide 61 text

• Nearly 10,000 users worldwide • 477 cities in 61 countries on every continent • 6,000,000 URLs tester • 470,000 unique domaine Source: tenon.io

Slide 62

Slide 62 text

Isues by Affected Population (Auto) 0 4.5 9 13.5 18 Images and Non-text Content Tables CSS Forms Navigation Frames Document Structure Language, typography and content Dynamic Content Multimedia Keyboard Accessibility and Focus Control Custom Controls

Slide 63

Slide 63 text

Isues by Level (Auto) 6% 18% 77% Level A (77%) Level AA (18%) Level AAA (6%)

Slide 64

Slide 64 text

Perceivable Operable Understandable Robust 0 12.5 25 37.5 50 Issues by Principle (auto)

Slide 65

Slide 65 text

But we know automation isn’t enough

Slide 66

Slide 66 text

What can be tested and how? WCAG Level Auto Semi-Auto  (veri fi cation required) Manual Only Level A 25% 29% 46% Level AA 17% 41% 41% Level AAA 28% 24% 53% Average 18% 31% 47%

Slide 67

Slide 67 text

Isues by Affected Population (Manual) 0 4.5 9 13.5 18 Keyboard Accessibility and Focus Control Document Structure Other Text Content and Typography Role, State and Accessibility Properties Color Tables Images and Non-text Content Dynamic Content Forms Frames Navigation Global

Slide 68

Slide 68 text

Isues by Level (Manual) 4% 21% 75% Level A (75%) Level AA (21%) Level AAA (4%)

Slide 69

Slide 69 text

Isues by Severity (Manual) 15% 41% 44% High (44%) Medium (41%) Low (15%)

Slide 70

Slide 70 text

Isues by Affected Population (Manual) 0 15 30 45 60 Blind Low-Vision Cognitively Impaired Motor Impaired Deaf / Hard-of-hearing Speech Impaired

Slide 71

Slide 71 text

Isues by Platform (Manual) 0 15 30 45 60 All/Universal Mac VoiceOver Window High Contrast Windows Screen Reader Android TalkBack Windows Dragon Windows ZoomText iOS - VoiceOver

Slide 72

Slide 72 text

Top 90% of issues by category 1. Images and Non-text Content 2. Navigation 3. Language, typography and content 4. Custom Controls 5. Document Structure Source: tenon.io 1. Keyboard Accessibility and Focus Control 2. Document Structure 3. Color 4. Language, typography and content 5. Role, State and Accessibility Properties 6. Forms 7. Images and Non-text Content 8. Navigation Automated Manuel

Slide 73

Slide 73 text

Top 10 failing (auto) 80/20 • 1.1.1 Non-text Content (Level A) • 2.4.4 Link purpose (In Context)(Level A) • 1.3.1 Info and Relationships (Level A) • 4.1.2 Name, Role, Value (Level A) • 3.3.2 Labels or Instructions (Level A) • 1.4.4 Resize text (Level AA) • 3.2.4 Consistent Identi fi cation (Level AA) • 1.4.5 Images of Text (Level AA) • 2.5.5 Target Size (Level AAA) • 1.4.3 Contrast (Minimum)(Level AA) Source: tenon.io

Slide 74

Slide 74 text

Top 11 failing (manual) 80/20 • 1.3.1 Info and Relationships (Level A) • 4.1.2 Name, Role, Value (Level A) • 2.1.1 Keyboard (Level A) • 1.1.1 Non-text Content (level A) • 1.3.3 Sensory Characteristics (Level A) • 1.4.3 Contrast (Minimum) (Level AA) • 1.4.4 Resize text (Level AA) • 3.3.2 Labels or Instructions (Level A) • 2.4.6 Headings and Labels (Level A) • 2.4.7 Focus Visible (Level AA) • 2.4.4 Link Purpose (In Content)(Level A) Source: tenon.io

Slide 75

Slide 75 text

7 of the TOP 10 failing issues are shared among auto and manual • 1.1.1 Non-text Content (level A) • 1.3.1 Info and Relationships (level A) • 1.4.3 Contrast (Minimum) (level AA) • 1.4.4 Resize text (Level AA) • 2.4.4 Link Purpose (In Content)(Level A) • 3.3.2 Labels or Instructions (Level A) • 4.1.2 Name, Rôle, Value (Level A) Source: tenon.io

Slide 76

Slide 76 text

• 90% of issues come from 20 tests • 80% of issues come from 12 tests Source: tenon.io

Slide 77

Slide 77 text

All of the top 50 test failures fi t into 5 meta issues: • Link quality • Text alternatives • Insu ff i cient contrast • Object labels / label quality • Table / header structure Source: tenon.io

Slide 78

Slide 78 text

Which tools to check A11y issues?

Slide 79

Slide 79 text

https://www.html5accessibility.com/

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

automated tests manual tests

Slide 82

Slide 82 text

What can be tested and how? WCAG Level Auto Semi-Auto  (veri fi cation required) Manual Only Level A 25% 29% 46% Level AA 17% 41% 41% Level AAA 28% 24% 53% Average 18% 31% 47%

Slide 83

Slide 83 text

Automated tests

Slide 84

Slide 84 text

Companies dedicated to A11y

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Free web tools (and extensions) recommended

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

Accessibility Testing APIs react-axe Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. This project does not replace react-a11y, but can and should be used in conjunction with React-axe. axe-webdriverjs An open source library that injects axe-core into Selenium Webdriver instances axe-core

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Manual tests

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Screen Readers Commonly Used

Slide 94

Slide 94 text

MacOSX software for accessibility colors Color Oracle Sim Daltonism Colour Contrast Analyser

Slide 95

Slide 95 text

Processes to stay accessible?

Slide 96

Slide 96 text

- Storybook and Accessibility - Static Checker - Browser tools / extensions

Slide 97

Slide 97 text

Storybook and Accessibility

Slide 98

Slide 98 text

😱 Live Accessibility v5.1!

Slide 99

Slide 99 text

- Storybook and Accessibility - Static Checker - Browser tools / extensions

Slide 100

Slide 100 text

- Storybook and Accessibility - Static Checker - Browser tools / extensions

Slide 101

Slide 101 text

Automated / manual test

Slide 102

Slide 102 text

- Tabbing through - Screenreader testing (personas…)

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

May 18, 2019 October 26, 2019 October 24, 2019

Slide 105

Slide 105 text

Practical Exercice

Slide 106

Slide 106 text

Basic shortcuts for VoiceOver • VoiceOver ON/OFF: Command + F5 (Mac: ⌘ + Fn + F5) • Start reading: VO (⌘ + ⌥) + A • Stop reading: CTRL • Open rotor: VO + U • Next heading: ⌘ + VO + H •Next link: ⌘ + VO + L •Next graphic: ⌘ + VO + G

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Mouse Daniel • 53 years old management accountant • Rheumatoid arthritis • Uses keyboard only, no mouse and just started using voice control

Slide 109

Slide 109 text

http://bit.ly/a11y-bad01 There is a table. Its country column includes an explanation indicated by a question mark. Try to select that question mark to fi nd out what the explanation is. The end date column might be hidden. Try to fi nd out what the end date of the Algeria entry is. Eyes open - Keyboard only - VoiceOver ⌘F5

Slide 110

Slide 110 text

http://bit.ly/a11y-good01

Slide 111

Slide 111 text

Trembling Don • 82 years old, retired • Multiple conditions: arthritis, losing his hearing, cataracts, hip replacements • Doesn’t use any assistive technology

Slide 112

Slide 112 text

Find out how many Cabinet ministers there are http://bit.ly/a11y-bad02

Slide 113

Slide 113 text

http://bit.ly/a11y-good02

Slide 114

Slide 114 text

Pawel Dugros • 24 year old chemistry graduate  • Asperger’s and anxiety  • adjusts things, like colours, to reduce potential stress and distractions (install Midnight Lizard) 

Slide 115

Slide 115 text

http://bit.ly/a11y-bad03 You have 2 minutes to do the following tasks logged in as Pawel - Read the text. Find out where you can get Tami fl u if you are a U.S. Government employee abroad. - There are a couple of buttons below the text. Try to select the correct button before the timer expires.