better-accessibility

Use native `<dialog>` with `showModal()` for a free focus trap, inert background, and Escape handling. Otherwise add `role="dialog"`, `aria-modal="true"`, set `inert` on background content, focus the first focusable element on open, and return focus to the trigger on close.

Style `:focus-visible` instead of bare `:focus` so keyboard users get a ring while mouse clicks do not. Never use `outline: none` without a verified replacement, and check the full indicator against every adjacent color it crosses.

Native `disabled` removes the control from the tab order, blocks activation, and excludes it from form submission. `aria-disabled="true"` only announces the state, so you must block pointer, keyboard, and form behavior in code and style the state explicitly.

Use `role="status"` (polite) for non-urgent updates like toasts, saved confirmations, and result counts. Reserve `role="alert"` (assertive) for urgent errors not tied to a control, since it interrupts whatever the screen reader is reading.

WCAG 2.5.8 Level AA requires a 24×24 CSS-pixel target or one of its spacing, equivalent-control, inline, or essential exceptions. For usability, aim for 44×44px on touch and 40×40px on desktop, extending small elements with a pseudo-element on the wrapper.

A placeholder disappears once the user types and usually fails contrast requirements, leaving the field unlabeled. Every input needs a programmatic `<label for>` or wrapping `<label>`, with placeholders used only as format examples alongside the label.