accessibility-system-architect

Use role="dialog" with aria-modal="true" and aria-labelledby pointing to the title. Trap focus inside the dialog by cycling Tab between first and last focusable elements, close on Escape, and return focus to the trigger element on close.

Set role="combobox" with aria-expanded, aria-controls, and aria-activedescendant on the input. Handle ArrowDown and ArrowUp to move the active option, Enter to select, and Escape to close, with options rendered in a role="listbox" element.

WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), and 3:1 for UI components and focus indicators against adjacent colors. Never convey meaning through color alone; pair it with an icon or label.

Use aria-disabled when the element should remain focusable so screen reader users can discover it, such as a submit button during loading. HTML disabled removes the element from the tab order entirely, which can hide it from keyboard users.

Integrate @axe-core/react in development mode to run axe-core audits automatically against rendered components. Complement it with manual checks: tab through features without a mouse, test with VoiceOver or NVDA, zoom to 200%, and enable forced colors mode.

Use semantic HTML first; ARIA only supplements it when no native element exists, such as custom comboboxes or live regions. Never use div with role="heading" when an h1-h6 element works, and never use ARIA to fix broken structure.