Case Study - JMix Accessibility Overhaul for California's Centralized Placements Platform

Industry: Higher Education / Healthcare Technology

Client: Foundation for California Community Colleges
Project: Centralized Placements (CCPS)
Frontend Framework: JMix (Vaadin-based UI)
Scope: Accessibility, Usability Enhancements, Frontend Architecture
Status: In progress (2025)

---

The Challenge

The Centralized Placements (CCPS) platform supports streamlined healthcare placements across California's community colleges. As part of an ongoing accessibility audit and product modernization effort, the Foundation for California Community Colleges engaged Web3Box to address usability and ADA compliance issues in their web-based application (distinct from the mobile app).

Key pain points included:

1. Incomplete keyboard navigation and focus visibility
2. Screen reader issues (e.g., unannounced labels, poor ARIA roles)
3. Layout problems on mobile devices and under zoom conditions
4. Outdated interaction flows leading to user confusion

---

The Solution: A JMix-Powered Accessibility Overhaul

At the heart of the project lies a JMix-based frontend, a Java-centric framework built on Vaadin Flow, ideal for complex, secure enterprise applications. Our team leveraged this platform to deliver a consistent, accessible user experience.

Why JMix?

JMix allows us to:

1. Build UIs in pure Java, using components like Button, Grid, TextField, and Dialog
2. Easily control backend-to-frontend bindings
3. Use @Subscribe, DataContext, and ScreenFragment for modular UI logic
4. Extend Vaadin components to inject ARIA attributes, tab indexes, and dynamic labels

---

Key UI Workflows We Improved

1. "Check Providers" feature: New interactive flow that lets users run a live provider match count before proceeding
2. Form navigation and validation: Improved screen reader announcements, focus management, and real-time field feedback
3. Responsive layout fixes: Addressed reflow issues for zoomed views and small screens using FlexLayout and scoped CSS
4. WCAG 2.1 support: Added semantic headings, skip links, and compliant focus states using JMix's underlying Vaadin component structure

---

Accessibility (ADA/WCAG) Improvements

The Web3Box team worked closely with FoundationCCC's stakeholders to triage, prioritize, and resolve over 50 WCAG violations, including:

• 1.4.3 Contrast (Minimum)
• 1.3.1 Info & Relationships
• 2.1.1 Keyboard Navigation
• 4.1.2 Name, Role, Value
• 1.4.10 Reflow
• 3.3.2 Labels or Instructions

We used VoiceOver, axe-core, Lighthouse, and NVDA during testing, applying fixes directly via getElement().setAttribute(...) and Vaadin-specific focus management logic in Java.

---

Result

1. Improved accessibility score across all tested pages
2. Compliance with WCAG 2.1 AA in targeted modules
3. New modular UI patterns implemented using JMix screen fragments
4. Live feedback on provider availability (real-time check logic)
5. Reusable codebase for future enhancements

---

Technologies Used

• Frontend: JMix (Vaadin Flow 24+), Java 17, CSS (Theming via Vaadin)
• Backend: Spring Boot, REST API, JPA
• Dev Tools: JMix Studio (IntelliJ plugin), GitHub, Figma, axe-core, Chrome DevTools
• Testing: VoiceOver, NVDA, axe DevTools, WAVE, Lighthouse

---

Looking Ahead

This project demonstrates how forward-thinking public sector organizations like the Foundation for California Community Colleges can benefit from modern, accessible, and scalable web platforms built with tools like JMix. By combining our expertise in accessibility, secure enterprise systems, and long-term maintainability, Web3Box continues to support mission-driven initiatives that serve real communities.

We're proud to be part of a project that not only improves technology, but also helps create a more inclusive experience for all users.

---

Technologies Used: