Building Accessible Interfaces

Overview

Accessibility is not a pass applied at the end. Almost every accessibility defect is a structural decision — a div that should have been a button, a state communicated only in color, a modal that never moved focus — and structural decisions are expensive to reverse.

Core principle: Native semantic HTML is accessible by default. Every layer you add on top of it is a layer you now own the accessibility of.

Target: WCAG 2.2 Level AA.

The Iron Law

NO CUSTOM CONTROL WHERE A NATIVE ELEMENT EXISTS

A <div onclick> needs a role, a tabindex, key handlers for Enter and Space, a focus style, and a disabled state. A <button> needs none of that — it arrives with all of it, correct on every platform and assistive technology, for free.

Wrote <div onclick>? Replace it with <button>. Do not add ARIA to make the div behave like a button — ARIA changes what assistive tech announces, never what the browser does.