Add a11y testing

.github/workflows/a11y.yml

@@ -0,0 +1,41 @@
+name: Check for a11y issues
+
+on:
+  pull_request:
+
+jobs:
+  a11y_audit:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache Playwright Browsers
+        id: cache-playwright
+        uses: actions/cache/restore@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+        run: npx playwright install chromium --with-deps
+
+      - name: Run A11y Audit On PDF Styles
+        run: ./script/test-a11y
+
+      - name: Save Playwright Browsers Cache                                                             
+        if: always() && steps.cache-playwright.outputs.cache-hit != 'true'                               
+        uses: actions/cache/save@v4                                                                      
+        with:                                                                                            
+          path: ~/.cache/ms-playwright                                                                   
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}                                 

.gitignore

@@ -11,3 +11,6 @@ package-lock.json
 
 # CSS coverage report (as a clickable HTML)
 .DS_Store
+
+# a11y testing
+testing

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Add automated a11y testing with @axe-core/playwright
+
 
 ## [v2.16.0] - 2026-01-05
 

README.md

@@ -39,6 +39,18 @@ To take a book completely from git repo to pdf, you'll need to run a variation o
 
 For additional enki usage, consult [enki's readme](https://github.com/openstax/enki).
 
+## Audit a11y
+
+You can run the a11y audit to detect **some** accessibility issues. It's important to remember that automated accessibility testing is **not perfect**. It is a **cursory** test that will warn about things like color contrast, etc. In its current state, it **probably detects around 20-30% of all accessibility issues**.
+
+You can set the tags it tests in the [wrapper](./script/test-a11y). Keep in mind that the HTML generated from the css is a little broken, so some tests will yield false positives.
+
+You can run this test with `yarn a11y` or `yarn run a11y` (whichever).
+
+The test also runs when you make a PR on the styles repository. It generates a summary of the results which you can see in [summary.md](./testing/summary.md) locally, or in the summary on the GitHub action.
+
+Unless we can figure out a way to map back to the scss, perhaps with source maps and some clever tricks, you will need to search for the associated components/shapes yourself to fix the issues.
+
 # Important Links
  - [CE  Team Confluence Documentation](https://openstax.atlassian.net/wiki/spaces/CE/overview)
  - [How to Release CE Styles](https://openstax.atlassian.net/l/c/TjrhH68R)

package.json

@@ -4,7 +4,12 @@
   "type": "module",
   "license": "MIT",
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.0",
+    "browser-driver-manager": "^2.0.1",
+    "playwright": "^1.57.0",
     "postcss": "^8.3.3",
+    "postcss-selector-parser": "^7.1.1",
+    "prettier": "^3.8.0",
     "stylelint": "^14.5.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
@@ -13,7 +18,8 @@
   "scripts": {
     "download-fonts": "./script/download-fonts",
     "lint": "stylelint './styles/**/*.scss'",
-    "compile": "node ./styles/build/build.js"
+    "compile": "node ./styles/build/build.js",
+    "a11y": "bash ./script/test-a11y"
   },
   "dependencies": {
     "sass-embedded": "^1.77.8"