Accessibility
With the passing of HB21-1110 (Colorado Laws for Persons with Disabilities), federally funded programs must use products that meet current accessibility standards. A Voluntary Product Accessibility Template (VPAT) is a certification that demonstrates WCAG conformance.
The Problem
Many of our clients are school districts who use our software to run their "out-of-school-time" (federally funded) school programs.
We partnered with a third-party agency, BlindIT, to audit our software and identify accessibility gaps. Following the initial audit, we uncovered 164 risks that needed to be mitigated in various ways
Emerging Patterns
Early on, we set a clear priority: resolve all “Blockers” and address as many “High” risks as possible in the first phase. A we analyzed the findings, clear patterns began to emerge.
Solutions
Updated Dashboard
Updated navigation bar colors to help with color contrast ratios and modernizing the application
The tiles were redesigned to transition away from arbitrary color selections toward our brand colors, while maintaining WCAG-compliant color ratios.
By mapping new, accessible shades to the legacy colors, visual familiarity was maintained for long-term users while ensuring sufficient contrast ratios and a cohesive brand identity.
To meet compliance standards, the component’s state logic was overhauled to include a dedicated hover state and distinct visual treatments for focus versus selection. This decoupling of states ensures a predictable and clear experience for all users, whether navigating via mouse or assistive technology.
Default
Hover
Focus
Selected
Screen Reader and Keyboard Friendly Components
A comprehensive audit and remediation of the component library resolved critical accessibility gaps. Below are some examples:
Default
Hover
Focus
Updated colors for hover and focus states so there is a clear distinction between the two.
Unified the UI for validation modals and added ARIA labels to ensure success/error feedback is programmatically announced to screen readers.
Focus
(unselected)
Focus
(selected)
Implemented visible focus indicators for all components to improve keyboard navigation
Legacy Modal Updates
Modernized legacy modals to resolve security risks and accessibility blockers. Updated the component architecture to support logical tab orders, ARIA labeling, and explicit required field indicators. This ensured full keyboard and screen reader support while maintaining established functionality
Before
After
Impact & Next Steps
After collaborating closely with the development team to implement our changes, BlindIT conducted a second audit, which resulted in 98 medium/low risks. We achieved a 52.3% reduction in accessibility-related issues, and with no remaining blockers, we successfully earned our VPAT certification. Our next steps focus on lower priority fixes identified during the initial audit to further reduce remaining risks.
Reflections
This project pushed me to strengthen my accessibility expertise by deeply analyzing each risk and referencing WCAG guidelines to determine the best mitigation strategies. Working with legacy systems presented unique challenges and required strong collaboration between design and development to identify practical, effective solutions.