Promotee — Accessibility-Focused Interview Flashcard App
A keyboard-first flashcard app designed to help non-native speakers practice interviews with more confidence. The app was built with screen reader support, motion control, and structured semantic markup as part of the core UX rather than as a later add-on.
Overview
An accessibility-focused interview flashcard app built from the start with accessibility as a product principle rather than a retrofit. The project demonstrates how inclusive interaction design, implementation details, and validation can work together in a usable product.
Context
I created the app to support non-native speakers preparing for interviews. From the start, I wanted it to be privacy-friendly and fully usable by keyboard and screen reader, while still feeling polished and practical rather than like a demo.
Challenge
The challenge was to make an interactive app accessible in practice — not only at the level of semantic markup, but across motion, notifications, focus management, validation, and dynamic screen states.
- Keep the app operable without a mouse
- Maintain strong Lighthouse scores across real user flows
- Balance accessibility, usability, and performance
- Validate dynamic states rather than static screenshots alone
What I Did
Accessibility Implementation
- Used semantic landmarks and accessible form patterns
- Implemented skip links, visible focus, keyboard navigation, live regions, and accessible toast announcements
- Respected reduced motion settings and provided alternate non-animated behavior
Validation & Testing
- Measured key pages with Lighthouse across desktop and mobile
- Tested dynamic pages locally using realistic dummy data to preserve real flow conditions
- Used contrast tools to verify rather than assume color accessibility
Performance Work
- Replaced GIFs with video for better control and performance
- Tuned preload strategies per page depending on content priority
Outcome
Accessibility
100 on all core screens
Best Practices / SEO
100 on key audited pages
Performance
97+ even on dynamic pages
- The app works as a keyboard-first product rather than a design-only accessibility example
- The project demonstrated that accessibility, usability, and performance can coexist in a modern frontend stack
Selected Evidence
Toast Accessibility
Toast messages implemented with assertive live region behavior.
Reflection
- Interactive UI can still be accessible when accessibility is treated as a design input from the start
- Color contrast should be verified, not assumed
- There is still more to learn in validating screen-reader-specific interaction patterns