Home › Accessibility
WCAG 2.2 AA
Accessibility, built in and governed
This redesign targets WCAG 2.2 AA conformance across the main Reading League site and all 46 chapter pages. We document the findings, fix them in the prototype, and establish a testing and training regime to keep every page accessible as the network grows.
What this commitment means
WCAG 2.2 AA is the standard for accessible web content: sufficient color contrast, keyboard navigation, screen-reader support, resilient code, and mobile responsiveness. It applies to public-facing sites serving educators, families, and administrators across the country.
This redesign meets WCAG 2.2 AA through four methods: automated testing with axe and Lighthouse, manual keyboard and screen-reader testing on each page, documentation of all accessibility decisions in the chapter template and this audit, and training for the content team and chapter volunteers.
The findings below are drawn from an initial audit. A full WCAG 2.2 AA certification audit would be conducted before launch; these items flag the most common gaps we observed and how the redesign addresses them.
Before and after findings
Finding 1: Insufficient color contrast
The light-teal accent color (#7cbcce) is used as text throughout the site. It falls below the required 4.5:1 contrast ratio on white.
Before
Body text and links set in light teal on white measure about 2.1:1, well under the 4.5:1 minimum for AA.
Fix: Reserve light-teal for decoration
Light-teal is used only in large decorative contexts (background bands, section dividers). All readable text switches to deep teal (#063e4d) on cream or white, which passes 4.5:1 AA contrast.
This deep-teal text passes AA on white and is consistent throughout the site.
Finding 2: Non-keyboard-operable chapter map
The chapter state-map SVG is not keyboard-navigable or screen-reader-labelled. Users on keyboard or with screen readers cannot interact with it or learn which states have chapters.
Fix: Keyboard-operable chapter finder
The redesign rebuilds the chapter map as a set of labelled buttons, each keyboard-accessible with clear focus states. A synchronized text list below allows searching and linking directly to each chapter. Open the accessible chapter finder.
Finding 3: Inconsistent chapter site accessibility
Volunteer chapter websites drift on alt text standards, heading hierarchy, color contrast, and mobile layout. No shared baseline or template exists to keep all 46 sites in sync.
Fix: Governed, accessible chapter template
A locked, accessible chapter page template ensures all 46 sites inherit the same HTML structure, color palette, and responsive design. Chapter admins edit only the content (text, images, links), never the template. View the chapter template.
Finding 4: Mobile responsiveness gaps
Some sections are not fully responsive; text and tap targets fall below the 24-pixel hit-area minimum on small screens.
Fix: Mobile-first, responsive design
All pages are designed mobile-first and tested on phones, tablets, and desktops. Interactive elements (buttons, links, menu items) have tap targets at least 24px × 24px. Text resizes fluidly with the viewport.
How we keep it accessible
Automated
Axe testing on every build
Each page runs through axe for automated WCAG violations: color contrast, form labels, ARIA attributes, heading structure, and image alt text.
Manual
Keyboard and screen-reader passes
Every page is tested with the Tab key and a screen reader (NVDA or VoiceOver) to confirm navigation order, focus management, and content flow.
Documented
Accessibility guidelines for authors
The chapter template and content-editing guide document alt-text conventions, heading rules, link text, and color use. Admins follow the same standard across all 46 sites.
Trained
Onboarding for chapter admins
All chapter volunteers receive training on accessible content: writing descriptive alt text, avoiding misleading link text, testing on mobile, and using the locked template.