accessibility-compliance

Use role="dialog" with aria-modal="true", label it via aria-labelledby pointing to the title, and wrap content in a focus trap. Close on Escape, prevent body scroll, and return focus to the triggering element when the modal closes.

Use roving tabindex where only the active item has tabIndex 0, and handle Arrow keys, Home, and End to move focus. Tabs use role="tablist" with aria-selected; menus use role="menu" with aria-expanded and aria-controls on the trigger button.

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

Yes, criterion 2.5.8 (new in WCAG 2.2) requires interactive targets to be at least 24x24 CSS pixels at Level AA. Apple HIG and Material Design recommend 44x44 or 48x48dp for comfortable touch interaction on mobile devices.

Prefer native HTML elements like button, nav, and main whenever possible, since they carry built-in semantics and keyboard behavior. Only add ARIA roles and attributes when building custom widgets that native elements cannot express, such as sliders or comboboxes.

Screen readers only announce content inside live regions. Add role="status" with aria-live="polite" for non-urgent updates or role="alert" with aria-live="assertive" for errors, and ensure the region exists in the DOM before its content changes.