better-accessibility

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

Style `:focus-visible` instead of bare `:focus` so keyboard users see a ring while mouse users usually do not. Prefer the browser's default indicator or a verified project token, use at least a 2px solid perimeter, and never use `outline: none` without a replacement.

`role="status"` is a polite live region that waits for a pause, used for toasts, result counts, and loading updates. `role="alert"` is assertive and interrupts immediately, reserved for urgent errors not tied to a specific control.

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

A `<div onClick>` has no role, no keyboard focus, and no Enter/Space activation, so screen readers and keyboard users cannot operate it. Use `<button>` for actions and `<a href>` for navigation, which provide these behaviors natively.

Use native `disabled` when a control is genuinely unavailable; it removes focus, blocks activation, and excludes form submission. Use `aria-disabled="true"` only when keeping the control focusable is intentional, then block pointer and keyboard behavior in code and style the state explicitly.