Add accessibility testing

[AndrewJamison]

Is your feature request related to a problem? Please describe.
There is currently no accessibility testing

Describe the solution you'd like
We would like to add an accessibility testing library/framework to the project

Describe alternatives you've considered
Other forms of testing (unit/integration)

Additional context
N/a

[kayleekimberly]

@upkarlidder @demilolu This issue needs the ms-cohort-claimed label

[kayleekimberly]

pa11y-ci

• Designed to automatically detect a11y issues within a CI build
• Install with npm install -g pa11y and npm install pa11y-ci --save-dev
• URLs to test are added to a .pa11yci config file
• Official Repo
• pa11y Overview and Installation
• Seems to be a very versatile and popular option
• Requires Node.js 12+ to run the most up-to-date version
• Clear documentation for setting up with CI actions
• Example output:
  

[kayleekimberly]

Google Lighthouse CI

• Designed to automatically detect a11y issues within a CI build
• Allows for testing within Chrome DevTools, a Chrome Extension, through the CLI tools, or via a CI build
• Can install the CLI tools with npm install -g lighthouse
• Official Lighthouse Repo
• Official Lighthouse CI Repo
• Getting Started with Lighthouse CI
• Greatest offering is its ability to generate extensive, detailed reports on its findings
• Extensive documentation and setup instructions for CI actions
• Example output:
  
  

[kayleekimberly]

axe

• Designed to automatically detect a11y issues within a CI build
• A family of tools which runs the axe search engine for accessibility vulnerabilities
• Can be run from CLI
• Helpful Github Action Guide
• Official Website
• Example output:
  

[upkarlidder]

Discussing with our accessibility experts. Feel free to pick one if you don't hear back by Friday (03.04).

[upkarlidder]

@kayleekimberly adding another on to the mix for your investigation - https://www.npmjs.com/package/accessibility-checker

Edit - @tombrunet added more details in the comment below. Thank you 🙏🏽

[tombrunet]

IBM Equal Access Accessibility Checker - https://www.ibm.com/able/toolkit/tools/#develop

• Based on IBM requirements, which are based on WCAG 2.1 (can also scan for WCAG 2.0)
• Extensions for Chrome and Firefox
  • Reports in HTML, XLS
• Command-line or Node integrations, see https://www.npmjs.com/package/accessibility-checker
  • Works with jest, mocha, cucumber, etc
• Karma plugin: https://www.npmjs.com/package/karma-accessibility-checker
• Cypress plugin: https://www.npmjs.com/package/cypress-accessibility-checker
• Automated tools have reports in JSON, CSV, HTML

[kayleekimberly]

Additional notes on the IBM Equal Access Accessibility Checker:

• Setup has required prerequisites: a separate testing framework, and a browser automation tool such as Selenium may be required depending on the type of testing desired and the framework being used
  • Since the unit testing in this repo is planning to use jest, that is likely what would make most sense for accessibility testing as well to reuse existing imports
• Documentation does not include instructions for setting up a Github Action

[kayleekimberly]

Conclusions from the above investigation: All of the tools that were investigated appear to be quality, popular choices for automated accessibility testing. My top recommendations would be the IBM Equal Access Accessibility Checker or the pa11y-ci. I think either tool would be a good fit for the project.

CC: @upkarlidder

[upkarlidder]

Thank you for the detailed investigation @kayleekimberly. With the final two recommendations, let's go with IBM Equal Access Accessibility Checker.

[kayleekimberly]

Remaining tasks for this issue

• implement jest as a testing framework for this project
• implement the node version of the accessibility-checker
• add accessibility test file
• add github action to run the accessibility test file

The jest boilerplate documentation is a great place to start.