Code used in Cecilie's Course Automatic Accessibility Testing for All Slides: https://docs.google.com/presentation/d/1-KI2xtE9_PpKIKh-YOoZbppbQQsGfOll2AKm0WtTlUI/edit?usp=sharing
-
Git Windows: Git for Windows Mac or Unix: do nothing, git’s already installed
-
Code editor. I will use Visual Studio Code, feel free to use what https://code.visualstudio.com/
- Download and install Node.js. Instructions here: https://nodejs.org/
- Clone project from Github:
git clone https://github.com/anneceh/automatic-A11y/ - cd into the project catalog:
cd automatic-A11y - cd into the app catalog:
cd a11y-app - Install dependencies with
npm install
- Open Chrome or Edge and go to a web page of choice
- Open developer tools Windows: Ctrl + Shift + I Mac: Command + Option + I
- Select Accessibility and generate report
- Answer the following:
- What is the accessibility score?
- What kind of errors did the audit find?
- What kind of errors did the audit not find?
If you’re unable to get the project up and running, use the code pen instead: https://codepen.io/anneceh/pen/LJzbry
- cd into the app catalog:
cd a11y-app - start the app with
npm start - Run the tests with
npm test - How many errors are found?
- Configure the tests to ignore the errors.
- Tip: read the documentation https://github.com/nickcolley/jest-axe
- Change the configuration back and fix the errors instead of ignoring them
- cd into the app catalog:
cd a11y-app - Open cypress with
npx cypress open
- Configure the tests to ignore the errors.
- Tip: read the documentation: https://github.com/component-driven/cypress-axe
- Write your own test where you check accessibility, add a couple of todos and then check accessibility again