Target: WCAG 2.1 Level AA
Last updated: 2026-08-03
Automated and manual checks
| # | Criterion | Status | Notes |
|---|---|---|---|
| 1 | lang attribute on <html> |
Pass | <html lang="en"> is present. |
| 2 | Skip-to-content link | In progress | Added web/src/accessibility.css and a skip-link pointing to #root. |
| 3 | Focus indicators | In progress | focus-visible outline added in web/src/accessibility.css. |
| 4 | Reduced motion | In progress | prefers-reduced-motion media query added. |
| 5 | High contrast | In progress | prefers-contrast: more border-width adjustment added. |
| 6 | Color contrast of text | Needs review | Requires verification of Tailwind text/background pairs. |
| 7 | Keyboard navigation of modals | Needs review | Trap focus and return focus on close. |
| 8 | ARIA labels on icon-only buttons | Needs review | Many icon-only controls may be missing aria-label. |
| 9 | Form labels and error association | Needs review | Check all <input> and <label> pairings. |
| 10 | Tables and screen readers | Needs review | Add scope and caption where needed. |
Quick fixes applied
- Added
web/src/accessibility.csswithfocus-visible,skip-link,sr-only,prefers-reduced-motion, andprefers-contrastsupport. - Wired the stylesheet into
web/index.html. - Added a visible skip-to-content link as the first focusable element in
<body>.
Remaining work
- Run
axe-coreorpa11yagainst key views (login, dashboard, VM list, settings). - Add
aria-labelto icon-only buttons andaria-expandedto toggles. - Ensure all interactive elements are reachable via keyboard.
- Verify color contrast for the primary orange on dark surfaces.
Verification command
npx axe-core-cli http://localhost:5000