Improving Accessibility and Usability in an AI Language Learning Platform
Embedded Files
BACKGROUND
Vista Higher Learning (VHL) develops print and digital solutions for language learning used by instructors and students in both K-12 and higher education.
To expand its digital learning platform, VHL acquired MyConversationTrainer (MCT), an AI-powered language learning tool that allows instructors to create interactive conversation exercises designed to improve students’ speaking and comprehension skills.
PROBLEM
As VHL prepared MCT for integration, the team noticed that the product lacked consistent accessibility patterns, which made parts of the experience harder to use for some students and instructors.
An accessibility audit uncovered more than 20 issues across the product. I collaborated with the team to address many of these, including page titles, focus order, and bypass blocks, which are critical for users who rely on screen readers.
In addition, several interface issues were prioritized for improvement, affecting visual clarity, interaction cues, and control over audio playback.
ACCESSIBILITY IMPROVEMENTS
To address these issues, I collaborated with the team to design updates to components and interactions across the interface, with the goal of aligning the experience with WCAG 2.2 AA accessibility standards.
Below are a few examples of the improvements implemented:
1
Improving Color Contrast
Several interface elements, including buttons and interaction states, were difficult to read or distinguish for users with visual impairments due to insufficient contrast.
I refined color values across components to meet accessibility contrast standards while maintaining visual consistency with the interface. This included adjusting button colors and interaction states such as hover, focus, and disabled to ensure clarity across the product.
Before: Original chat activity with low-contrast interface elements
After: Updated chat activity with improved contrast
2
Making Links More Accessible
Links appeared similar to regular body text and relied primarily on a light blue color to indicate interactivity, making them difficult to distinguish.
I updated the link styling by adjusting the color and font weight to create a clearer visual distinction, while retaining the hover underline as an additional interaction cue.
Before: Student progress table with links that rely primarily on color
After: Updated link styling with clearer visual distinction
3
Introducing Start Screens for Audio Activities
Audio playback and recording began automatically when users entered activities. This behavior could interfere with screen reader navigation and reduced user control over when audio interactions began.
I designed a start screen that allows users begin the activity when they’re ready, giving them better control and preventing audio from starting automatically.
New: Start screen added to prevent audio from starting automatically
OUTCOME
These improvements are currently being implemented as part of the ongoing integration of MCT into the VHL platform.
By addressing both structural and interface-level accessibility issues, the team established clearer interaction patterns and improved usability across the interface. These improvements move the product closer to meeting WCAG 2.2 AA accessibility standards while supporting a more consistent and inclusive experience for students and instructors.
Page updated
Google Sites
Report abuse