Goal
Create an engaging Black History Month digital experience that combines historical storytelling, visual design, and accessible interaction patterns for broad audiences.
Interactive Web Story
Black History Month: Healthcare Innovators
An interactive, accessible web story celebrating 11 Black innovators who shaped modern healthcare through surgery, diagnostics, public health leadership, and biomedical innovation.
Project Snapshot
Design Challenge
Balance narrative depth with readability across devices while ensuring strong accessibility support for keyboard and screen reader users.
Outcome
Delivered a polished, responsive web story featuring 11 innovators, real-time reading progress, voice support, and persistent theme preferences.
Featured Innovators
Dr. Patricia Bath
Pioneered laser cataract surgery and community ophthalmology.
Otis Boykin
Invented improved pacemaker control units.
Dr. Kizzmekia S. Corbett-Helaire
Led COVID-19 vaccine development at NIH.
Dr. Charles Drew
Father of the modern blood bank.
Dr. Joycelyn Elders
First African American U.S. Surgeon General.
Dr. Daniel Hale Williams
Performed an early successful open-heart surgery.
Dr. Percy Julian
Advanced synthetic cortisone production.
Dr. Rebecca Lee Crumpler
First African American woman to earn an MD in the U.S.
James McCune Smith
First Black physician with a medical degree in the U.S.
Vivien Thomas
Pioneered critical cardiac surgery techniques.
Dr. Miles V. Lynk
Co-founded the National Medical Association.
Accessibility and UX Highlights
Accessibility First
- Full keyboard navigation support
- Screen reader optimization with ARIA labeling
- Skip links for efficient page traversal
- Accessibility highlights panel with shortcuts
- Documented keyboard shortcut reference
User Experience
- Dark and light mode with localStorage persistence
- Responsive mobile-first layout
- Text-to-speech listen buttons per story section
- Real-time scroll progress indicator
- Smooth reveal animations via Intersection Observer
Technical Implementation
Core Stack
Built with semantic HTML5, modern CSS custom properties, and dependency-free JavaScript using progressive enhancement.
Web APIs
Integrated SpeechSynthesis API for read-aloud interaction, Intersection Observer for reveal effects, and localStorage for persistent theme state.
Performance and Support
Optimized for current Chrome, Firefox, Safari, and Edge with responsive behavior across phone, tablet, and desktop.