Frontend Accessibility

Screen reader accessibility requires semantic HTML labels, ARIA attributes for form fields, and keyboard navigation support. Use proper `<label>` elements, `aria-labelledby` or `aria-describedby` for complex inputs, and ensure all interactive elements are reachable via keyboard Tab order.

Keyboard-accessible navigation uses semantic HTML (`<nav>`, `<ul>`, `<li>`), ensures all menu items are focusable and operable via Enter or Space keys, implements focus indicators, and adds ARIA attributes like `aria-expanded` for dropdowns to communicate state to assistive technologies.

Color contrast accessibility requires text and interactive elements to meet WCAG standards (4.5:1 for normal text, 3:1 for large text). Test contrast ratios against background colors, avoid relying solely on color to convey information, and ensure focus states are visually distinct.

ARIA attributes support dynamic content accessibility by communicating state changes, region updates, and live announcements to screen readers. Use `aria-live` for status updates, `aria-current` for navigation context, and `role` attributes to clarify component purpose when semantic HTML isn't available.

Semantic HTML is foundational and should not be replaced by ARIA. ARIA supplements semantic markup—use proper HTML elements first (`<button>`, `<nav>`, `<main>`), then layer ARIA attributes for complexity. This ensures keyboard operability, screen reader compatibility, and resilience across browsers.

Code reviews should verify keyboard navigation works without a mouse, semantic HTML elements are used correctly, color contrast meets WCAG standards, ARIA labels are accurate and not redundant, focus management works for modals and dynamic updates, and screen reader testing confirms the experience is usable.