Fix 13 WCAG accessibility violations in the checker UI itself
HTML:
- Move <div id="msalConfig"> out of <head> (invalid HTML)
- Add skip-to-main-content link (WCAG 2.4.1)
- Wrap content in <main id="main-content">
- Auth overlay: aria-modal, aria-describedby, aria-describedby on p
- Microsoft SVG: aria-hidden="true" (decorative)
- Tab buttons: aria-controls; panels: role=tabpanel, aria-labelledby
- Score number: <div> → <output> element
- Marker legend: role=legend (invalid) → role=region + aria-label
- Reset zoom button: aria-label added
CSS:
- input:focus outline:none → outline:2px solid accent (WCAG 2.4.7)
- --text-muted #696969 → #5a5a5a (~5.5:1 contrast, was 4.35:1)
- Skip link styles (visible on focus)
- @media (prefers-reduced-motion: reduce) disables all animations
JS:
- upload.js/batch.js: keydown Enter/Space activates upload areas (WCAG 2.1.1)
- results.js: issue cards get role=listitem inside role=list
- results.js: filterIssues() updates aria-pressed on all filter buttons
- results.js: displayResults() focuses resultsSection for screen readers
- utils.js: aria-valuenow set on role=progressbar element, not fill div
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
304526a8c4