Accessibility From the First Sketch

Every accessibility conversation I've ever been in started too late.

Somebody sends the file over for review. The layout is approved. The photography is licensed. The client has already signed off twice. And then a well-meaning question lands in the thread: "Can we just check this for accessibility before it goes out?"

What that question actually means is: can you repaint the house without moving any walls.

Sometimes, sure. More often the fix is real structural work — bump the body copy, darken the teal, rewrite the caption, rebuild the chart, and then rework the entire palette because the brand color fails contrast at every weight you actually need it at. Now you're asking a client to pay for a second round of design that looks, to them, more or less identical to the first one.

That conversation goes badly. And it goes badly because of when it happened, not because of what it asked for.

Five years designing under Section 508 at CDC taught me the only cheap version of that fix: draw it accessible the first time.

What "from the first sketch" actually means

It isn't an audit. It isn't a checklist you run at the end while the printer waits. It's about six decisions you make before you've committed to anything — at the stage where changing your mind still costs you nothing but a few minutes.

Choose the palette against contrast, not against the mood board.

This is the one that saves the most money and gets skipped the most often. Before a color enters the system, I check it in the combinations it will actually appear in: body text on background, headline on background, button label on button, icon on card. WCAG AA wants 4.5:1 for normal text, 3:1 for large text and for meaningful graphics and UI components. A brand color that hits 4.7:1 is a color you can use everywhere for a decade. A brand color that hits 3.2:1 is a color you will fight for a decade — and every fight will be billed to somebody.

The trick is that you almost never have to abandon the color. You have to find its accessible sibling. Same hue, adjusted value. Nobody in the client meeting can tell you moved it; every screen reader user and every person reading on a phone in a parking lot can.

Set the smallest type size before you design the biggest headline.

Headlines are fun and they lie to you. Decide what the caption, the footnote, the legend, and the disclaimer are going to be — and hold that floor. On print I don't go below 10pt for body copy, and for anything a patient or a traveler is reading under bad light, 12pt is the real floor. The layout has to be built around that number, not squeezed to accommodate it after the fact.

Sketch the reading order, not just the composition.

A beautiful composition can have an incoherent sequence. Before I make anything pretty, I number the elements in the order I want a person to encounter them, and I check that a linearized version — the version a screen reader hands over, or the version that stacks on a phone — still makes sense. If the numbers zigzag, the design is going to break the moment it leaves the artboard.

Write the alt text while you're choosing the image.

This sounds like a documentation chore. It's actually the fastest editorial test I know. If you can't describe in one sentence what an image is doing for the reader, the image isn't doing anything for the reader. I've killed more weak stock photos with this question than with any critique.

Never let color carry the meaning by itself.

Red bar bad, green bar good — fine, until roughly one in twelve men can't reliably tell them apart. Add the label. Add the pattern. Add the direct annotation. This is a five-minute decision at sketch stage and a full chart rebuild at proof stage.

Assume it will be translated.

This one I learned the expensive way. When I was building a family of trifolds and rack cards for Denova Collaborative Health, every piece had to exist in English and Spanish. Spanish routinely runs longer than English — plan for something like 25% and you'll rarely be surprised. If the English layout is set tight enough that it only just fits, the Spanish version isn't a reformat, it's a redesign. Leave the air in from the beginning and both versions ship on the same day.

The part nobody tells you

Accessibility constraints make the work better.

Not "better" in a virtuous, eat-your-vegetables way. Better in a this is a stronger piece of design way. A palette that survives contrast testing is a palette with real value range in it, which means it has hierarchy built in. A layout that survives linearization is a layout with an actual argument in it. Alt text discipline kills decorative filler. A type floor forces you to cut copy, and cutting copy is almost always the right call.

The constraint isn't the tax. The constraint is the brief.

Where it still goes wrong

Two places, mostly.

The first is the handoff. You can design a perfectly accessible layout and then export a PDF with no tag structure, no reading order, no document language set, and no alt text carried through — and you have shipped an inaccessible file made of accessible pixels. Tagging is part of the design job now. Budget the hours for it out loud, in the estimate, where the client can see them.

The second is the "just this once." A last-minute banner, a conference one-sheet, an ad someone needed by five. Those are the pieces that end up living on the site for three years. There is no such thing as a one-time exception to a system; there's only the moment your system stopped being a system.

Design isn't decoration. It's translation — taking something complicated and handing it to someone in a form they can actually use. A translation that a chunk of your audience can't read isn't a bad translation. It just isn't one.

So: draw it accessible on the first sketch. It's the same amount of work. It's just scheduled correctly.

‍