Description
Audit the application for accessibility gaps and implement improvements to ensure compliance with WCAG 2.1 AA standards. Focus areas include keyboard navigation, focus management, semantic HTML, and screen‑reader compatibility.
Requirements
- Keyboard navigation — all interactive elements must be reachable and operable via keyboard.
- Focus management — ensure logical focus order and visible focus indicators.
- Semantic HTML — use proper tags (
<button>, <nav>, <header>, <main>, <footer>) instead of generic <div>s.
- Screen‑reader compatibility — add ARIA roles, labels, and descriptions where necessary.
- Contrast improvements — meet minimum contrast ratio (4.5:1 for text, 3:1 for large text/icons).
- Accessible labels — ensure form inputs, buttons, and icons have descriptive labels.
- ARIA attributes — apply
aria-expanded, aria-invalid, aria-describedby, etc., for dynamic components.
- Interactive elements — modals, dropdowns, and tooltips must be accessible and dismissible via keyboard.
Acceptance Criteria
- ✅ Keyboard navigation works across all components — no traps or skipped elements.
- ✅ Focus indicators are visible and consistent — users can track their position.
- ✅ Semantic HTML applied — improves screen‑reader interpretation.
- ✅ Screen‑reader compatibility verified — tested with NVDA/VoiceOver.
- ✅ Contrast ratios meet WCAG 2.1 AA standards — verified with accessibility tools.
- ✅ ARIA attributes applied correctly — dynamic states announced to assistive tech.
- ✅ CI workflow includes accessibility checks — automated linting/tests for accessibility regressions.
Description
Audit the application for accessibility gaps and implement improvements to ensure compliance with WCAG 2.1 AA standards. Focus areas include keyboard navigation, focus management, semantic HTML, and screen‑reader compatibility.
Requirements
<button>,<nav>,<header>,<main>,<footer>) instead of generic<div>s.aria-expanded,aria-invalid,aria-describedby, etc., for dynamic components.Acceptance Criteria