Remediation work for existing tables to meet accessibility requirements
Role
UX Designer, UI Designer
Product
Cambridge GO - Education Groups Service
Team
Delivery Manager, FE Engineers, Technical Product Analyst
Context
This project focused on making our class creation wizard accessible, ensuring it complied with WCAG 2.1 standards. We inspected every component—from buttons and forms elements to the tables and navigation—to catch and fix any issues that might block users with visual or motor impairments.
Approach
At this time our dev team were at the start of learning to build accessibly - so my approached invloved collective knowledge sharing, around accessibility best practices. We explored a range of tools—contrast checkers, axe, WAVE—and screen readers like NVDA and VoiceOver to experience the use of these tools firsthand with examples. To bridge the gap between design and code, I refreshed my HTML skills so I could specify semantic markup, ARIA attributes, and keyboard-friendly patterns.
The work
1
Update key UI components to meet or exceed WCAG 2.1 AA guidelines for contrast, focus states, and readability.
2
Embed accessibility into our UX to dev workflow through clear documentation.
3
Ensure table components and navigation is accessible via keyboard navigation and with screen readers
Screen reader friendly
The tables were rebuilt for screen-reader friendliness—using proper <thead>, <tbody>, and scope attributes—so row and column headers are read correctly. I also added clear visible focus states to interactive components and documented a tab order to implement so that keyboard users can navigate cells logically.
Delivery File
I put together a comprehensive handoff file for the developers, detailing the ARIA roles and attributes that ensure screen readers announce content clearly and meaningfully through descriptive labels. To remove any guesswork, I included both sample code snippets and a real-world implementation example, so our team could confidently build the accessible features.
Outcome
This was a great experience in working closely with developers to understand how to build accessibly. With the details we documented, our team was able to implement the remediations to the table without much back-and-forth iterations.