$30 off During Our Annual Pro Sale. View Details »

Testing Web Accessibility

Testing Web Accessibility

When we develop a new web application, we often put a lot of work on the design, on making it beautiful and usable. In other words, we want our web app to be effective, efficient, and satisfying for the user. But a lot of times we don’t think about the user experience for people with disabilities, including people with age-related impairments.

Web accessibility (a11y ) means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers.” (Source: W3C - Web Accessibility Initiative). Our role as frontend and web developers is to create clear interfaces to make people understand and care about data, independently of their disabilities or impairments, but what we, developers, often forget is to ensure that the code we write follows the Web Content Accessibility Guidelines (WCAG), and the only way to achieve that is testing, either manual or automated.

Automated web a11y tests can free up our QA team from manual testing every part of our application…but…they can’t automatically, and magically, make our site accessible. We should 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.

The example code is hosted here: https://github.com/bolonio/testing-web-a11y
---
Adrián Bolonio
https://www.adrianbolonio.com
https://twitter.com/bolonio
https://www.linkedin.com/in/adrianbolonio

Adrián Bolonio

April 10, 2021
Tweet

More Decks by Adrián Bolonio

Other Decks in Technology

Transcript

  1. Testing Web Accessibility @bolonio Adrián Bolonio How to find accessibility

    vulnerabilities in your website
  2. Madrid (Spain) Adrián Bolonio Accessibility Software Engineer at GitHub @bolonio

    #a11y Advocate
  3. Accessibility (a11y)

  4. Accessibility (a11y) 11 a y

  5. Accessibility (a11y) ccessibilit 11 10 9 8 7 6 5

    4 3 2 1 a y
  6. Accessibility (a11y)

  7. Web Accessibility (a11y)

  8. 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)
  9. 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.
  10. Types of impairments Web Accessibility != visually impaired people

  11. Permanent Temporary Situational Permanent Temporary Situational Types of impairment Source:

    https://www.microsoft.com/design#toolkit
  12. 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)
  13. Testing Web Accessibility How to find accessibility vulnerabilities in your

    website
  14. 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
  15. Test your code while you develop

  16. I’ve created a simple React application with 3 small components

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

    and a bunch of errors in the HTML
  18. 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
  19. @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)
  20. 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
  21. 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
  22. 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
  23. www.adrianbolonio.com/en/accessibility-with-storybook

  24. Use the development tools of the browser

  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. Write your own unit tests jest-axe https://github.com/nickcolley/jest-axe

  32. 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
  33. Automate your accessibility tests

  34. 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/

  35. @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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. Automating the accessibility tests of your source code with GitHub

    Actions
  42. 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.
  43. GitHub Actions

  44. GitHub Actions

  45. GitHub Actions

  46. GitHub Actions

  47. GitHub Actions

  48. GitHub Actions

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

  50. Do manual tests and simulation tests

  51. 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
  52. 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/
  53. axe chrome extension https://www.deque.com/axe/

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

  55. Accessibility Insights https://accessibilityinsights.io/

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

  57. 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
  58. https://github.com/bolonio/testing-web-a11y

  59. www.adrianbolonio.com

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

  61. “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
  62. Accessibility is NOT a feature

  63. Thanks @bolonio www.adrianbolonio.com