I had Claude audit my portfolio against Apple's Human Interface Guidelines. Clean dark theme, smooth animations, looks good on mobile. I thought it was solid.
Nine gaps. Not edge cases. Fundamentals.
What I didn't know I was missing
Accessibility is one of those things you can't see when you're the one building the site. You're not navigating with a keyboard or using a screen reader. You're not someone who gets motion sick from animated backgrounds.
I had animations in over twenty components. Card entrances, hover effects, background blobs, all assuming the user wants movement. Adding a reduced motion check to each one was tedious, but the site still looks good with animations off. Arguably better. Less noisy.
Touch targets on mobile were embarrassingly small. The standard says 44 pixels minimum. Filter buttons on my site were well under that. A small fix with real impact.
Decorative elements were being announced by screen readers. Animated blobs, progress bars, overlay gradients. None of them convey meaning. Adding aria-hidden to each one was simple once I knew to look for it.
The double title bug
While reviewing blog posts, I noticed every title showed up twice. Once from the page header, once from the content body. I'd been writing H1 titles in the markdown and the page was already rendering the title from metadata.
The kind of thing that's invisible when you're writing posts and obvious when you're reading them.
What I actually learned
Accessibility is a quality bar, same as "the site loads" and "the buttons work." I should've baked it in from day one instead of treating it as an audit item.
The portfolio is better now. Not done, but closer to something I'd be proud to show someone who navigates the web differently than I do.
Leave a Reply