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

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