Testing Web Accessibility

Slide 1

Slide 1 text

Testing Web Accessibility @bolonio Adrián Bolonio How to find accessibility vulnerabilities in your website

Slide 2

Slide 2 text

Madrid (Spain) Adrián Bolonio Accessibility Software Engineer at GitHub @bolonio #a11y Advocate

Slide 3

Slide 3 text

Accessibility (a11y)

Slide 4

Slide 4 text

Accessibility (a11y) 11 a y

Slide 5

Slide 5 text

Accessibility (a11y) ccessibilit 11 10 9 8 7 6 5 4 3 2 1 a y

Slide 6

Slide 6 text

Accessibility (a11y)

Slide 7

Slide 7 text

Web Accessibility (a11y)

Slide 8

Slide 8 text

Web Accessibility (a11y) The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Source: W3C (https://www.w3.org/WAI/fundamentals/accessibility-intro/es#what)

Slide 9

Slide 9 text

Web Accessibility (a11y) You need to click on the button in the top right corner. You need to click on the button with the engine icon.

Slide 10

Slide 10 text

Types of impairments Web Accessibility != visually impaired people

Slide 11

Slide 11 text

Permanent Temporary Situational Permanent Temporary Situational Types of impairment Source: https://www.microsoft.com/design#toolkit

Slide 12

Slide 12 text

Globally more than have a near or distance vision impairment 2021 7.9 billion 2,2 million people Source: https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment Web Accessibility (a11y)

Slide 13

Slide 13 text

Testing Web Accessibility How to find accessibility vulnerabilities in your website

Slide 14

Slide 14 text

Testing Web Accessibility Source: https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/ Automated a11y tests can free up your QA team from manual testing every part of your application, but they can’t automatically make your site accessible. Use automated a11y tests as one step of a larger testing process. Don’t forget that only 20% to 50% of all accessibility issues can automatically be detected

Slide 15

Slide 15 text

Test your code while you develop

Slide 16

Slide 16 text

I’ve created a simple React application with 3 small components and a bunch of errors in the HTML

Slide 17

Slide 17 text

I’ve created a simple React application with 3 small components and a bunch of errors in the HTML

Slide 18

Slide 18 text

Test your code while you develop @axe-core/react https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react eslint-plugin-jsx-a11y https://github.com/evcohen/eslint-plugin-jsx-a11y vue-axe https://axe.vue-a11y.com/ @axe-core/webdriverjs + protractor https://github.com/dequelabs/axe-core-npm/tree/develop/packages/webdriverjs

Slide 19

Slide 19 text

@axe-core/react Install it as a dev dependency Make sure you import the library only if it is a non-production environment, because you will expose the vulnerabilities of your web site This tool will execute the a11y tests over your code using the axe- core engine, and you will be able to see the results of the tests in the development console of your browser A severity level is also assigned for each violation (Minor, Moderate, Serious, Critical)

Slide 20

Slide 20 text

eslint-plugin-jsx-a11y If you use eslinter, you can include the a11y rules in the .eslintrc.json file adding the eslint-plugin-jsx-a11 The linting issues will be displayed directly in the code editor

Slide 21

Slide 21 text

eslint-plugin-jsx-a11y If you use eslinter, you can include the a11y rules in the .eslintrc.json file adding the eslint-plugin-jsx-a11 The linting issues will be displayed directly in the code editor

Slide 22

Slide 22 text

eslint-plugin-jsx-a11y The linting issues will be displayed directly in the code editor If you use eslinter, you can include the a11y rules in the .eslintrc.json file adding the eslint-plugin-jsx-a11 The linting issues will be displayed in the terminal as well

Slide 23

Slide 23 text

www.adrianbolonio.com/en/accessibility-with-storybook

Slide 24

Slide 24 text

Use the development tools of the browser

Slide 25

Slide 25 text

Use the development tools of the browser When inspecting an HTML element and clicking on the color box in front of the HEX code in the CSS inspector, a floating window will appear with information about that color. You will see the score of the contrast ratio of that color with the background where it’s placed (text, button, ... etc) and you will be able to see if it passes the AA and AAA contrast ratio tests.

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Use the development tools of the browser The accessibility inspector provides a means of accessing important information exposed to assistive technologies on the current page through the accessibility tree, allowing you to check what is missing or what needs attention. The accessibility inspector can be found in your browser's developer tools.

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Write your own unit tests jest-axe https://github.com/nickcolley/jest-axe

Slide 32

Slide 32 text

jest-axe Install it as a dev dependency The results of the test will be displayed in the terminal Write an accessibility test using ReactDOMServer to render the html of your application and check for violations https://github.com/nickcolley/jest-axe

Slide 33

Slide 33 text

Automate your accessibility tests

Slide 34

Slide 34 text

Automated a11y tests @axe-core/cli https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli pa11y http://pa11y.org/ Lighthouse https://developers.google.com/web/tools/lighthouse/

Slide 35

Slide 35 text

@axe-core/cli Install it globally in your machine You can now run the command in your CLI, followed by the URL of the page you wish to test

Slide 36

Slide 36 text

pa11y Install it globally in your machine You can now run the command in your CLI, followed by the URL of the page you wish to test

Slide 37

Slide 37 text

pa11y You can run the command in your CLI for localhost as well You can now run the command in your CLI, followed by the URL of the page you wish to test Install it globally in your machine

Slide 38

Slide 38 text

pa11y-ci By default, Pa11y CI looks for a config file (.json) in the current working directory. Each URL in your config file can be an object and specify pa11y configurations which override the defaults too. Install it globally in your machine

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Lighthouse You can now run the lighthouse command in the terminal ( with --view) and it will immediately open the generated html report. Install it globally in your machine

Slide 41

Slide 41 text

Automating the accessibility tests of your source code with GitHub Actions

Slide 42

Slide 42 text

GitHub Actions GitHub Actions allow you to automate, customize, and execute your software development workflows right in your repository with GitHub Actions. With GitHub Actions you could execute a series of statements and commands after a specific event has occurred, simply put, it’s your own pipeline CI / CD directly in your repository. Github defines a workflow as a configurable automated process made up of one or more jobs. The workflow configuration to define events, tasks, and steps to be executed in GitHub Actions are defined using YAML files that must be located in the .github/ workflows folder.

Slide 43

Slide 43 text

GitHub Actions

Slide 44

Slide 44 text

GitHub Actions

Slide 45

Slide 45 text

GitHub Actions

Slide 46

Slide 46 text

GitHub Actions

Slide 47

Slide 47 text

GitHub Actions

Slide 48

Slide 48 text

GitHub Actions

Slide 49

Slide 49 text

www.adrianbolonio.com/en/accessibility-github-actions

Slide 50

Slide 50 text

Do manual tests and simulation tests

Slide 51

Slide 51 text

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer. Voice Over Narrator Orca Screen Readers Talkback Other commercial screen readers: NVDA, JAWS

Slide 52

Slide 52 text

Testing a11y manually axe chrome extension https://www.deque.com/axe/ ARC Toolkit https://www.paciellogroup.com/toolkit/ Accessibility Insights WAVE https://wave.webaim.org/ https://accessibilityinsights.io/

Slide 53

Slide 53 text

axe chrome extension https://www.deque.com/axe/

Slide 54

Slide 54 text

ARC Toolkit https://www.paciellogroup.com/toolkit/

Slide 55

Slide 55 text

Accessibility Insights https://accessibilityinsights.io/

Slide 56

Slide 56 text

WAVE (web accessibility evaluation tool) https://wave.webaim.org/

Slide 57

Slide 57 text

1. Test your code while you develop 2. Use the browser development tools 3. Automate your accessibility tests 4. Do manual tests and simulation tests Testing Web Accessibility

Slide 58

Slide 58 text

https://github.com/bolonio/testing-web-a11y

Slide 59

Slide 59 text

www.adrianbolonio.com

Slide 60

Slide 60 text

https://www.edx.org/course/web-accessibility-introduction Introduction to Web Accessibility

Slide 61

Slide 61 text

“It’s not just about disabled users being able to access your website, it’s about everyone being able to access your website.” - Trenton Moss