Skip to content

Add a11y-matrix to Tools - #276

Open
henriqueyuri00 wants to merge 1 commit into
brunopulis:mainfrom
henriqueyuri00:add-a11y-matrix
Open

Add a11y-matrix to Tools#276
henriqueyuri00 wants to merge 1 commit into
brunopulis:mainfrom
henriqueyuri00:add-a11y-matrix

Conversation

@henriqueyuri00

Copy link
Copy Markdown

Adds a11y-matrix to the Tools table.

Disclosure: I built this. Completely fine to close if self-submissions aren't welcome here.

Against the contributing guidelines

  • Added to an existing section (Tools) — no new section, so no Table of Contents entry is needed
  • Placed in alphabetical order, immediately after a11y-checker
  • Searched the open and closed pull requests first — not already listed, not a duplicate
  • Spelling and grammar checked
  • No trailing whitespace on the added line — one line added, nothing else touched
  • Not an overlay tool, per the repository disclaimer

What it is

A CLI and GitHub Action that runs axe-core across the browser states a single CI run never enters: prefers-color-scheme: dark, prefers-reduced-motion: reduce, forced-colors: active, a mobile viewport, and the 320px width WCAG 1.4.10 requires. Each state changes exactly one variable away from the baseline, so a finding is attributed to the preference that caused it rather than reported as an anonymous count.

Why it might be worth listing

It came out of a defect I shipped: a button label at 1:1 contrast against its own background — invisible — in dark mode only, with a green pipeline throughout.

Two things were going on, and the second is the reason the tool exists:

  1. The headless browser boots in light mode, so the dark palette was never rendered.
  2. axe reports text at exactly 1:1 as incomplete, not as a violation, because it cannot prove the element was not deliberately hidden. Pipelines assert on violations and discard incomplete, so the most severe contrast defect there is lands in the bucket nobody reads.

It also measures reflow directly (document scrollWidth against viewport width) rather than inferring it, since axe has no rule for 1.4.10 — and it suppresses the "partially obscured" contrast result when the element is merely scrolled out of view inside a keyboard-reachable scroll container, which is the sanctioned way to present a wide data table at 320px. The suppression count and reason are always printed.

Free, MIT, no account, no telemetry. Runs with npx github:henriqueyuri00/a11y-matrix <url>. CI exercises the composite action for real: a deliberately broken fixture must fail the build and a clean one must not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant