ACCESSIBILITY

CONFORMANCE STATUS

Civitas conforms to Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Every page is checked against this standard automatically on every code change (see Testing Approach below); no known non-conformances remain open. If you find one, it's a bug — please report it below.

FEATURES

Civitas includes the following accessibility features:

• [✓]Skip to main content link at the top of every page
• [✓]Semantic HTML landmarks: header, nav, main, section, article
• [✓]Logical heading hierarchy (h1 → h2 → h3) on all pages
• [✓]ARIA labels and roles on interactive elements (tabs, buttons, modals)
• [✓]Full keyboard navigation: Tab, Shift-Tab, Arrow keys, Escape, Home/End
• [✓]Focus trap management in mobile navigation menu
• [✓]Visible focus indicators on all interactive elements (2px cyan outline)
• [✓]prefers-reduced-motion support — all animations disabled when requested
• [✓]prefers-contrast: more support — low-opacity text raised to full opacity, partisan colors lightened for improved contrast
• [✓]Plain-language summaries throughout — every score metric renders a jargon-free one-line explanation next to its technical label (no toggle to find), and each methodology section opens with an “In short” summary before the citations and formulas
• [✓]Score tooltips explain every metric — no number is shown without context; the explanation text is always present in the page (not injected only on hover), so it's reachable via CSS-only hover/focus even with JavaScript disabled
• [✓]External links announce “opens in new tab” to screen readers
• [✓]Decorative elements marked aria-hidden to prevent screen reader noise
• [✓]Data tables use proper th scope attributes and accessible captions
• [✓]Progress bars use role=“progressbar” with aria-valuenow/min/max
• [✓]Loading and error states use role=“status” and role=“alert”
• [✓]ESLint jsx-a11y plugin enforces ARIA correctness at development time

TESTING APPROACH

Accessibility is verified through a combination of automated and manual testing, on every code change — not a one-time audit that goes stale:

• [✓]Automated Lighthouse CI gate— every pull request builds the site and runs Lighthouse's accessibility audit against every major route (home, leaderboard, bills, explore, and this page among them); the build is blocked from merging unless every route scores 100/100. This has been the case on every change since the gate was added.
• [✓]ESLint jsx-a11y — runs on every code change, enforcing ARIA attribute correctness, label associations, and semantic role usage.
• [✓]Manual keyboard testing — All interactive flows (scorecard navigation, tab switching, tooltip opening, form submission) verified with keyboard-only navigation.
• [✓]Contrast verification— Every text color and opacity level actually used in the codebase (2026-07 audit) had its WCAG relative-luminance contrast ratio computed against the terminal background; any combination below 4.5:1 is floored in CSS to the minimum opacity, or substituted for a lighter shade, that clears it — enforced globally so it can't be missed on a new component. Decorative pixel-font headings (VT323, Press Start 2P) are scoped out of this floor deliberately: all body text and data use Share Tech Mono or system monospace fonts instead.
• [✓]Reduced motion — Animation behavior verified with prefers-reduced-motion enabled in browser settings.

HOW TO REPORT AN ISSUE

If you encounter an accessibility barrier on Civitas — something that prevents you from using a feature or accessing information — please let us know.

FORMAL COMPLAINTS

If you are not satisfied with our response, you may contact the U.S. Department of Health and Human Services Office for Civil Rights or another relevant authority in your jurisdiction.