Skip to content
Advanced · The advanced practice

Accessibility automation gates

An a11y checklist is a hope; an a11y gate is a fact. The practice is layering: static rules, served-page scans, and fixtures that prove a rule fires on a broken input.

Advanced1 min read (computed · recorded 4)updated 2026-09-14a11yautomationgatesadvanced

by Motif Editors

revised 2026-09-14First publication in the bank completeness pass.

Part 3 of 4 in The advanced practiceMotion choreography systemsDesign token architecture

Key takeaways
  • Three layers beat one: static rules in the source, a scan of the built HTML, and a scan of the served pages.
  • A fixture is the proof a rule can fail: ship a deliberately broken input and watch the gate catch it.
  • Heading order, focus rings and label presence are checkable; taste is not — automate the checkable.

Layers, not a checklist

One scan of the source catches 'outline-none with no replacement'. One scan of the built HTML catches heading-order skips and duplicate ids. One scan of the served pages catches what hydration changes. This site runs all three, and a fixture suite proves each rule fires: a deliberately broken input ships into the harness so a rule that stops failing is a rule that is noticed.

Automate the checkable

Taste is not automatable; focus rings, labels, roles and heading order are. The discipline is to draw the line exactly there — automate everything that is checkable, so the human review is spent entirely on what only a human can judge.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Star Rating Input
rating input · half-star precision
3.5 / 5← hover to preview · click to set · arrows nudge