Skip to main content
The Op-EdWeb
2026-02-201 min

Accessibility Is a Feature, Not a Pass

A sample article. Treating keyboard, screen-reader and reduced-motion behaviour as part of each component rather than an audit at the end.

Pass it on LinkedIn Post RSS

A third sample post, this time on design. Replace it, or delete it and the Blog section will simply show what is left.

Harbor Kit started as a collection of components I kept rewriting. The thing that made it a library rather than a folder was deciding that every component would come with a behaviour contract: what happens on Tab, on Escape, on arrow keys, and what a screen reader hears when it opens.

Writing the contract first changed the code. A dialog is not a div with a backdrop; it is a place focus moves to, stays inside, and returns from. Once that sentence is written down, it becomes a handful of tests, and the tests keep working long after you have forgotten why the code looks the way it does.

Reduced motion got the same treatment. Instead of sprinkling checks through the animations, the library exposes one setting that every animated component reads, so a visitor who asks for less movement gets less movement everywhere, including in places I would have forgotten.

The unexpected benefit was speed. Components with clear contracts are easier to compose, easier to review and easier to hand to someone else. Accessibility did not slow the work down; it was the specification the work had been missing.

Filed under
ReactTypeScriptFramer MotionTailwind CSS