Product & Design

Accessibility Is Much Cheaper Before Launch

Semantics, focus order, contrast and keyboard paths cost little during the build and a great deal afterwards. A practical WCAG AA working method.

Purushottam Kumar Suman
Purushottam Kumar Suman
Founder & CEO, Drema AI
8 min read
Diverse creative team discussing colour samples in a modern office

Retrofitting accessibility means revisiting every component, every flow and often the visual design. Building it in means choosing the right element and checking contrast as you go. The engineering difference is roughly a day versus roughly a quarter.

01

Semantics do most of the work

A button element is focusable, keyboard-activatable and announced correctly by screen readers, with no additional work. A div with a click handler is none of those, and making it equivalent requires role, tabindex and key handling that is easy to get wrong. Choosing the correct element eliminates most accessibility defects before they exist.

Most accessibility bugs are a div doing a button's job.

02

Try it without a mouse

Tab through your main flow. Can you reach everything, is the focus indicator visible, does the order follow the visual layout, can you escape a modal? This takes two minutes per screen and finds the majority of real problems, no tooling required.

Correct elementsbutton, a, label, fieldset — not divs
Visible focusNever remove the outline without replacing it
Logical orderTab order matches visual order
Contrast4.5:1 for text, checked at design time
03

Contrast belongs in the design phase

Light grey placeholder text and pale secondary labels fail contrast almost every time. Checking at design time costs seconds; discovering it after launch means changing tokens across an entire product and re-reviewing every screen.

04

Automation finds a third of it

Automated checks catch missing labels, contrast failures and structural errors, and belong in CI. They cannot tell you whether the focus order makes sense or whether an announcement is comprehensible. Treat a clean automated run as the floor, not the goal.

05

Forms are where it matters most

Labels properly associated, errors linked to their field and announced, required fields marked in more than colour, and grouped inputs in a fieldset. Forms are where users complete valuable actions, so an inaccessible form is a direct revenue problem, not only a compliance one.

06

It improves the product generally

Keyboard support helps power users. Clear focus helps everyone on a small screen. Sufficient contrast helps anyone outdoors in sunlight. Captions help people watching without sound. Accessibility work consistently improves the experience for users nobody classified as needing it.

2 min
Keyboard pass per screen
4.5:1
Text contrast minimum
~33%
Of issues automation can find
Purushottam Kumar Suman
Written by
Purushottam Kumar Suman
Founder & CEO, Drema AI

Founder and CEO of Drema AI. Builds AI systems, SaaS platforms and industry software — and writes about what actually survives production.

CTA Background

Got a problem like this one?

Bring it to a call with a founder.You will get a straight answer, including when the answer is no.

View Our Work
AI-First Engineering
Secure & Scalable
Built to Deliver Impact