Accessibility

Accessibility is mostly a series of small correct decisions, and the largest one is using the element that already does the job.

Semantic HTML first. A <button> is focusable, activates on Enter and Space, announces itself as a button, and works with every assistive technology — for free. A <div onClick> has none of that and needs a role, a tabindex, and keyboard handlers to reach parity, which is why the rule of thumb is that no ARIA is better than bad ARIA. ARIA describes; it never adds behaviour.

Keyboard operability is the baseline test, and the fastest audit you can run: put the mouse away and use the feature. Every interactive element must be reachable, the focus indicator must be visible, and the tab order must follow the visual order. Modals must trap focus while open and return it to the trigger on close — otherwise a keyboard user is dropped back at the top of the document.

Forms need real labels. A <label> associated with its control gives a screen reader the name and makes the label click into a larger tap target. Placeholder text is not a label: it disappears on input, usually fails contrast, and is announced inconsistently. Errors must be associated with their field and announced, not merely coloured red.

Colour is never the only signal. Pair it with text, an icon, or a pattern. Contrast wants 4.5:1 for normal text and 3:1 for large text and meaningful UI boundaries — and low-contrast grey-on-grey is the single most common accessibility failure in otherwise careful design.

Structure carries meaning. Headings in order describe the page for anyone navigating by heading, landmarks let people jump to the main content, and alt text conveys purpose — decorative images take an empty alt so they are skipped rather than described.

Respect stated preferences. prefers-reduced-motion is a real accessibility need for vestibular disorders, not a nicety.