accessibility-compliance

Use role="dialog" with aria-modal="true", label it via aria-labelledby, trap focus inside with a FocusTrap component, close on Escape key, and return focus to the triggering element when closed. Prevent body scroll while the modal is open.

Use ARIA live regions with role="status" and aria-live="polite" for non-urgent updates, or role="alert" with aria-live="assertive" for errors. Clear the message before setting new text to ensure repeated announcements are detected.

WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text. UI components and focus indicators need at least 3:1 against adjacent colors.

WCAG 2.2 Level AA requires 24x24 CSS pixels minimum, while Level AAA and Apple HIG recommend 44x44 points. Android Material Design recommends 48x48dp. Maintain at least 8dp spacing between adjacent targets.

The first rule of ARIA is to prefer native HTML elements like button, nav, and main over ARIA roles. Only add ARIA when native semantics are insufficient, such as custom sliders, tabs, or comboboxes, and never duplicate information native elements already provide.

Custom div-based components lack built-in keyboard support. Add tabIndex={0} for focusability, handle Enter and Space keydown events for activation, and ensure a visible focus indicator. Using native button elements avoids this entirely.