Let me cook 🔥
I'm going to tell you about the time I built something inaccessible and got rightfully called out for it. It's not a proud moment, but it's an important one.
The Beautiful Disaster
I built this gorgeous custom dropdown. Smooth animations. Beautiful styling. Looked perfect.
One problem: you couldn't use it with a keyboard. At all.
No focus states. No arrow key navigation. No escape to close. Just... mouse only.
I didn't think about it. I just... didn't think.
The Call Out
Someone in the Discord (before we abandoned it for Telegram) tried to use the site with a keyboard. Screen reader user. They couldn't navigate past the dropdown.
> "This is completely unusable for me. Did anyone test this with a keyboard?"
My stomach dropped. No. No one did. Because I didn't think to.
The Fix
I spent a full day rebuilding that dropdown:
`tsx
function Dropdown({ options, onSelect }) {
const [isOpen, setIsOpen] = useState(false);
const [focusIndex, setFocusIndex] = useState(-1);
const handleKeyDown = (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setFocusIndex(i => Math.min(i + 1, options.length - 1));
break;
case 'ArrowUp':
e.preventDefault();
setFocusIndex(i => Math.max(i - 1, 0));
break;
case 'Enter':
case ' ':
e.preventDefault();
if (focusIndex >= 0) onSelect(options[focusIndex]);
setIsOpen(false);
break;
case 'Escape':
setIsOpen(false);
break;
}
};
return (
`Arrow keys work. Enter selects. Escape closes. Tab moves focus properly.
The New Rule
Now I test everything with: 1. Keyboard only (no mouse) 2. Screen reader (VoiceOver) 3. High contrast mode 4. 200% zoom
It adds time. It's worth it.
The Lesson
Accessibility isn't a feature. It's a requirement. And "I didn't think about it" is not an excuse.
To the person who called me out: thank you. Seriously.
🔥