Driving Digital Accessibility at Pocket Prep

— POCKET PREP

Pocket Prep's goal is to make exam prep affordable, accessible, and fun. However, our product wasn't digitally accessible for blind, low vision, and keyboard-only users.

Team

Heidi Baggerman, Design Manager / ‍Robby Helms, Web Dev / Maria Soboleva, iOS dev / Curtis Martin, Android Dev / Deon McCormick, Bizdev / Ken Gillette, COO / Rob Witman, CTO / Ablr360

My Role

Lead Designer
Instigated and coordinated accessibility work across all teams at Pocket Prep

Platform

iOS, Android, and Web Apps

Timeline

Ongoing efforts 2021-2023 (A11y is never done)

The Quick Skim

Problem

Pocket Prep's products were not accessible for blind, low vision, and keyboard-only users in 2021. This was an ethical, legal, and business growth issue.

A spreadsheet of accessibility issues as outlined by Ablr360.

↑ Marked up accessibility document from Ablr360

Task

With support from leadership, I instigated Pocket Prep's move towards WCAG 2.0 AA compliance. We engaged with a 3rd party accessibility firm, Ablr360, to audit our product and make improvements to our processes.

Alt text instructions for dev with spreadsheet of alt text database in the background.

↑ The content, development, and design team collaborated to visually redesign over 1000 of our images to be low-vision accessible and have alt text for screen readers

Action

Resolved design issues in our products and design system as marked by Ablr360 in their WCAG 2.0 AA audit.
Work with engineering to address dev-driven accessibility fixes
Evangelize for company-wide Accessibility considerations that reached from our engingeering to marketing and content teams
Solidify accessibility-driven design into our design library

Accessibility Statements as documented in website.

↑ Accessibility statement that is available on our marketing site for clients and users to evaluate how well we adhere to WCAG Accessibility standards.

Result

While accessibility work is never done, Pocket Prep greatly improved our products’ accessibility for blind, low vision, and keyboard only users.

People who are low vision and use assistive technology are now able to use our products
Robust accessibility statements have garnered more B2B clients (like universities, whose edtech resources must adhere to Section 508 Accessibility Standards)
Incorporated accessibility checks into our design and development processes for future features
I gave a Digital Accessibility 101 talk at RTP180 to evangelize the importance of accessibility to the local Triangle tech community in North Carolina

The Deep Dive

Digital accessibility standards are a crucial but often overlooked part of the product process for startups like Pocket Prep. It requires extensive coordination and investment across engineer, design, and content teams. Below is one example of our A11y work.

In the Weeds with an Inaccessibility

Pocket Prep is an quiz-based education app that helps people study for a professional certification exam, like becoming an EMT, Firefighter, or Nurse. The calendar graph was a visual indication of studying consistency to provide incentive to keep a consistent study schedule. Much like Duolingo, the calendar feature also used "streaks" to motivate consistent studying.
‍
Ablr360 flagged functional and visual A11y issues across all three of our platforms' calendar components:
‍
Web: Keyboard skips the calendar. Visually, there is no legend to indicate what colors and outlines mean.

iOS: VoiceOver only indicates the calendar's numbers/dates but does not indicate the status of studied/didn't study per day nor whether the Question of the Day was correct or incorrect. Visually, there is no key to indicate what the colors and outlines mean.
‍
Android: Talkback does not indicate status of studied and didn't study nor correct or incorrect. The calendar reads “Cap S” for Sunday, and only reads the number of the date. Visually, there is no key to indicate what the colors and outlines mean.
‍
TL;DR The calendar status elements weren't read out correctly. Visually, it is inaccessible to convey data through color and shapes without a key.

Marked up calendar view from Ablr accessibility audit.

↑ Calendar issues as called out by Ablr360

Designing for Low Vision and Assistive Technologies

My job was to work with developers on how the calendar, and the dense amount of information contained in such a small element, could be conveyed. I also needed a visual key that would integrate with the existing UI components.

I iterated on several ways to surface calendar data with a screen reader. I led multiple discussions with the dev team and Ablr360 (who included screen reader users). Since we were working with existing components, I skipped wireframing and iterated with visuals.

[Above] Iteration

A Scalable Solution

We landed on an approach that benefited sighted users as well: I applied an alt-text like treatment to our calendar that gave a summary visible through a toggle on the component. I also added a key that ensured crucial information wasn't communicated solely through color.
‍
I worked closely with our developers to test their implementation and tweaked as needed across platforms.

Our solution was then tested and approved by screenreader users through Ablr360 across web and mobile.

Accessibility issues with calendar component, namely color contrast and failure to read calendar properly.

[Top] Before/After

[Bottom] Calendar component updated across light and dark mode on the mobile iOS app.

I updated our calendar component to reflect the addition of the key and alt text toggle. This "alt text toggle" for complex graphs like our calendar became a scalable solution on our stats tab as well, where we applied a similar approach to our quiz scores graph.

Calendar component documentation for developers where each state is clearly shown.

“Pocket Prep was... 100% accessible. And my hat’s off to the developers, they did a great job on that.”
Rob, visually impaired EMT Pocket Prep user

“I really, really appreciate your push for a11y here. It'll pay dividends in our future contracts, but more importantly it's just the right thing to do for people. Thank you for making it part of what we do here!”
Curtis, Android Dev

[Top] Documentation of component behavior and visuals for developers.
‍
[Bottom] Testimonies from users who utilized our accessibility features.

User and Business Benefit

Though this initiative was a large investment of time and money from our leadership, design, product, and content teams, we have seen great positive impact on users and the business.

‍Pocket Prep has gotten messages from blind users who have been able to successfully study with our app. Pocket Prep won contracts with many universities and government funded organizations who are legally bound to fulfill Section 508 Accessibility laws in the tools they offer students, and thus wouldn't have been able to work with us without the Accessibility Statements now readily available on the Pocket Prep website.

I am proud to have led our team in Pocket Prep's A11y journey, but I wouldn't have been able to get it off the ground without the full support of the leadership and engineering teams at Pocket Prep.

By helming this initiative, I gained invaluable insights into the benefits and challenges of building accessible products from a design and development perspective.

If you have thoughts or questions about A11y, I'd love to talk! This is a field I am passionate about but still have a lot to learn.

UP NEXT —

Design with Anxiety in Mind

End to end Mock Exam feature build that went on to be one of the company’s key selling points and user success indicators.