Web Accessibility fundamentals (for developers)

Slide 1

Slide 1 text

Web Accessibility fundamentals (For developers) 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

4 principles

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 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 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 text

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

Slide 24

Slide 24 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 25

Slide 25 text

No content

Slide 26

Slide 26 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 27

Slide 27 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 28

Slide 28 text

Quiz

Slide 29

Slide 29 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 30

Slide 30 text

3 levels of digital accessibility

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 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 33

Slide 33 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 34

Slide 34 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 35

Slide 35 text

Quiz

Slide 36

Slide 36 text

- Live videos has captions - Provide descriptive link text - Provide ability to skip content - Explain any unusal word - No major code error A, AA or AAA? AA A A AAA A

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

What about ARIA?

Slide 39

Slide 39 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 40

Slide 40 text

ARIA does NOT change behavior

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

How browsers communicate with screen readers?

Slide 43

Slide 43 text

How the browser communicate with a screen reader? GUI

Slide 44

Slide 44 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 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Aria lets you step in there

Slide 48

Slide 48 text

bit.ly/aria-guide

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Aria’s rules

Slide 51

Slide 51 text

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

Slide 52

Slide 52 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 53

Slide 53 text

Aria role, state & properties

Slide 54

Slide 54 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 55

Slide 55 text

No content

Slide 56

Slide 56 text

Landmarks banner main contentinfo navigation region form complementary search HTML5 Role

Slide 57

Slide 57 text

Demo landmarks With landmark extension VO + U

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Demo accordion

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Demo checkbox

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Which tools to check A11y issues?

Slide 64

Slide 64 text

https://www.html5accessibility.com/

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

automated tests manual tests

Slide 67

Slide 67 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 68

Slide 68 text

Automated tests

Slide 69

Slide 69 text

Companies dedicated to A11y

Slide 70

Slide 70 text

• Open-source JS library • No network or API key required • Con fi gurable rules & checks • No false positives • Based on standards

Slide 71

Slide 71 text

Free web tools (and extensions) recommended

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 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 75

Slide 75 text

Manual tests

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Screen Readers Commonly Used

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Processes to stay accessible?

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Storybook and Accessibility

Slide 82

Slide 82 text

😱 Live Accessibility v5.1!

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Automated / manual test

Slide 86

Slide 86 text

- Tabbing through - Screenreader testing (personas…)

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Practical Exercice

Slide 90

Slide 90 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 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 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 94

Slide 94 text

http://bit.ly/a11y-good01

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

http://bit.ly/a11y-good02

Slide 98

Slide 98 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 99

Slide 99 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.