When I built BabyNamePick, accessibility wasn't my first priority. It should have been. Here's what I got wrong and how I fixed it.
The Wake-Up Call
A user emailed me: "I love the concept but I can't navigate your site with a screen reader." That one sentence changed how I build things.
What Was Broken
1. Missing Alt Text on Decorative Elements
I had decorative SVG icons without aria-hidden="true". Screen readers were announcing "image image image" on every page.
Fix: Added aria-hidden="true" to decorative elements and meaningful alt text to informational ones.
2. Color Contrast Issues
My original design used light gray text on white backgrounds for "subtle" styling. Looked clean. Failed WCAG AA contrast ratios.
Fix: Bumped all text to at least 4.5:1 contrast ratio. The site actually looks better now — more confident, less wishy-washy.
3. Keyboard Navigation Was Broken
Tab order jumped randomly between sections. The name filter dropdowns weren't keyboard-accessible at all.
Fix: Proper tabindex management, focus trapping in modals, and custom keyboard handlers for interactive elements.
4. No Skip Navigation
With 2,000+ name pages, each with a header, navigation, and sidebar, screen reader users had to wade through the same content on every page.
Fix: Added a "Skip to main content" link as the first focusable element.
What I Learned
Semantic HTML Is 80% of Accessibility
Most of my issues came from using <div> where I should have used <nav>, <main>, <article>, and <section>. Switching to semantic HTML fixed half my problems without any ARIA attributes.
Test With Real Tools
I started using VoiceOver (macOS) and NVDA (Windows) to actually navigate my site. The experience was eye-opening. Things that looked fine visually were completely confusing aurally.
Accessibility Improves UX for Everyone
Better contrast helps users in bright sunlight. Keyboard navigation helps power users. Clear heading hierarchy helps everyone scan content faster. Accessibility isn't a tax — it's a feature.
The Checklist I Now Follow
For every new page on BabyNamePick:
- Run Lighthouse accessibility audit (target: 95+)
- Navigate entire page with keyboard only
- Test with VoiceOver
- Check color contrast with WebAIM's tool
- Verify heading hierarchy (h1 → h2 → h3, no skips)
- Ensure all interactive elements have visible focus states
Results
After these fixes:
- Lighthouse accessibility score: 68 → 98
- Time on site increased 12% (better UX for everyone)
- Zero accessibility complaints since
The lesson: accessibility isn't something you bolt on later. But if you have to bolt it on later, do it anyway. Your users will thank you.
BabyNamePick — free AI baby name generator with 2,000+ names from 46 cultures. Now actually accessible.
Top comments (0)