$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

    View Slide

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

    View Slide

  3. Accessibility (a11y)

    View Slide

  4. Accessibility (a11y)
    11
    a y

    View Slide

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

    View Slide

  6. Accessibility (a11y)

    View Slide

  7. Web Accessibility (a11y)

    View Slide

  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)

    View Slide

  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.

    View Slide

  10. Types of impairments
    Web Accessibility != visually impaired people

    View Slide

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

    View Slide

  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)

    View Slide

  13. Testing Web Accessibility
    How to find accessibility vulnerabilities in your website

    View Slide

  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

    View Slide

  15. Test your code


    while you develop

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  24. Use the development tools
    of the browser

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  31. Write your own


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

    View Slide

  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

    View Slide

  33. Automate your


    accessibility tests

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  41. Automating the accessibility
    tests of your source code with
    GitHub Actions

    View Slide

  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.

    View Slide

  43. GitHub Actions

    View Slide

  44. GitHub Actions

    View Slide

  45. GitHub Actions

    View Slide

  46. GitHub Actions

    View Slide

  47. GitHub Actions

    View Slide

  48. GitHub Actions

    View Slide

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

    View Slide

  50. Do manual tests and
    simulation tests

    View Slide

  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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  59. www.adrianbolonio.com

    View Slide

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

    View Slide

  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

    View Slide

  62. Accessibility is NOT a feature

    View Slide

  63. Thanks
    @bolonio
    www.adrianbolonio.com

    View Slide