Accessible by Default: Building Inclusive UIs from the Start

Accessibility is one of those things that's far easier to build in from the start than to retrofit later. After years of auditing sites and wrestling with inaccessible codebases, I've developed a set of habits that make inclusive design feel natural rather than burdensome.

Start with semantic HTML

The single highest-leverage thing you can do is use the right HTML elements. A <button> is keyboard-focusable, announces itself to screen readers, and fires on Enter and Space by default. A <div onClick> does none of those things. Semantic HTML is free accessibility.

Design with focus in mind

Every interactive element needs a visible focus style. I keep a global focus ring defined in CSS custom properties so it's consistent across components and easy to update across the whole app at once.

Test with a keyboard

Before shipping any interactive component, tab through it without touching the mouse. If you can't complete the user flow by keyboard alone, something needs to change. It takes five minutes and catches a surprising number of issues.

Use automated tools as a floor, not a ceiling

Tools like axe-core and Lighthouse catch about 30–40% of WCAG issues automatically. They're a great first pass, but real usability testing with assistive technology is the only way to know if your experience actually works for users who depend on it.