Accessibility in Baby Name Tools: What I Got Wrong (and Fixed)

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: Prope