Shipping Less JavaScript Without Rewriting Everything

This post started as a note to my future self. Every few months I relearn the same lessons about accessibility, so this time I'm writing them down.

The setup was ordinary: Vite at the edges, Svelte doing most of the heavy lifting, and a handful of scripts nobody wanted to own. It worked well until usage roughly doubled over a single quarter.

Where we started

The first symptom was subtle. Nothing failed outright, but accessibility kept drifting in the wrong direction, and every fix seemed to make the next one harder.

We had good intentions. We even had a document describing how accessibility should work. The trouble was that the document and the code had quietly gone their separate ways.

How it works

Rather than a big-bang rewrite, we migrated one module at a time over about 12 weeks, keeping both paths alive behind a flag.

The core of it looks like this:

.card-list {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .card {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.5rem;
  }
}

It's tempting to generalize this into a library. Resist that urge until you've needed it in at least three places.

A few things that helped along the way:

• Pair on the first few changes so the knowledge doesn't live in one head.
• Delete dead code aggressively; it's the cheapest refactor there is.
• Measure before and after, even if it's just a rough number in a spreadsheet.
• Agree on what "done" means before the first pull request.

Trade-offs

We still haven't solved form validation. That's a post for another day, and honestly, I'm not sure we'll get it right the first time either.

The biggest cost was social, not technical. Changing how people think about accessibility takes much longer than changing the code.

Takeaways

I don't think there's a universal answer here, but I hope this gives you a few ideas to try on your own project. If you do, I'd love to hear how it goes.