Day 20: Accessibility Audit

Today I conducted a comprehensive accessibility audit and implemented significant improvements to ensure the Shika Digital website meets WCAG standards. The focus was on keyboard navigation, focus management, color contrast, and proper ARIA attributes.

What Was Built

1. Keyboard Navigation for Radio Groups

Implementation in AssessmentQuestion.tsx:

  • Added full arrow key navigation for radio button groups (ArrowUp, ArrowDown, ArrowLeft, ArrowRight)
  • Implemented Home/End key support to jump to first/last options
  • Proper roving tabindex pattern (only first radio is tabbable, rest use tabindex=-1)
  • Keyboard navigation automatically selects options on focus

Benefits:

  • Screen reader users can navigate options naturally
  • Matches expected ARIA radio group behavior
  • Reduces tab stops for faster navigation

2. Focus Management

Implementation in Assessment.tsx:

  • Automatic focus on first interactive element when navigating forward through questions
  • Fallback chain: first radio button → first text input/textarea → first focusable element
  • Small delay ensures DOM is ready before focusing

Benefits:

  • Users immediately know where they are after page transitions
  • Reduces confusion for screen reader users
  • Improves overall assessment form usability

3. Color Contrast Improvements

Updated Components:

  • MillionDollarPromise.astro: Changed from var(--color-teal) to var(--color-teal-light) for better contrast on dark backgrounds
  • assessment.astro: Changed from var(--color-teal) to var(--color-teal-dark) for improved readability
  • book.astro: Changed expect-number color from var(--color-teal) to var(--color-teal-dark)

Benefits:

  • All text now meets WCAG AA contrast requirements
  • Improved readability for users with low vision
  • Consistent use of accessible color variants

4. Semantic HTML & Heading Hierarchy

Updated in book.astro:

  • Changed expect-title headings from <h3> to <h2> for proper heading hierarchy
  • Ensures screen readers can navigate content structure correctly

5. Back Button Accessibility

Implementation:

  • Added proper aria-label="Go back to previous question" to back button
  • Visual text remains ”← Back” for sighted users
  • Screen readers announce the full, descriptive action

Updated Tests:

  • All accessibility tests now use the aria-label for button selection
  • Tests verify both visual text and accessible name are correct

6. Navigation Control Fix

Issue:

  • When users selected an answer on Q1 that changed the assessment path, the form would auto-advance to Q2
  • This was problematic for keyboard users who might not expect the sudden navigation

Implementation in Assessment.tsx:

  • Removed auto-advance behavior when path changes
  • Users must now explicitly click the “Next” button to proceed
  • Provides better control over navigation flow

Benefits:

  • Predictable navigation for keyboard and screen reader users
  • Users maintain control over when to proceed
  • Prevents confusion from unexpected page changes

7. Lighthouse CI Configuration

Accessibility Threshold:

  • Increased accessibility score requirement from 90% to 100%
  • Ensures all pages pass full accessibility audits

Chrome Flags:

  • Removed --no-sandbox flag for better security practices
  • Kept only necessary flags: --disable-dev-shm-usage, --disable-gpu

Testing

All accessibility tests pass:

  • Keyboard navigation through radio options
  • Focus management on forward navigation
  • Back button accessibility
  • Color contrast compliance
  • Heading hierarchy validation
  • Explicit navigation flow (no auto-advance)

Lighthouse accessibility scores now require 100% to pass CI.

Notes

  • The roving tabindex pattern is a standard ARIA pattern that reduces cognitive load by minimizing tab stops
  • Color contrast changes use existing design tokens (--color-teal-dark, --color-teal-light) to maintain design consistency
  • Removing auto-advance on path change ensures keyboard users have predictable control over form progression