Everyone says accessibility matters, but I find the best way to understand it is through actual examples. Not abstract principles, but real moments where we got it right (or wrong first).
When semantic HTML actually saved someone's day
We were working on a governance platform for a cooperative. The initial version used divs for everything because, honestly, they were faster to style. But when we brought in a screen reader user for testing, watching them navigate was eye-opening.
They'd hit the page and immediately start hunting for landmarks. Without proper <nav>, <main>, and <article> elements, their screen reader just saw an endless stream of content. After we fixed it, they could jump straight to the meeting agenda they needed.
"I can finally navigate your meeting agendas without feeling lost," they told us.
I think about that comment a lot. Proper markup isn't academic. It's the difference between someone getting their work done and giving up in frustration.
The checkout form that worked great (unless you don't use a mouse)
Here's an embarrassing one. We launched an e-commerce site that looked gorgeous. The client loved it. Sales were good. Then someone emailed saying they couldn't check out.
Turns out our custom dropdown menus were keyboard traps. Mouse users? Fine. Keyboard users? Stuck. They'd tab into a dropdown and couldn't get out without reloading the page.
We had to basically rebuild those components from scratch using proper ARIA patterns. Modal dialogs that actually trap focus the right way. Dropdowns that announce when they open and close. Escape keys that work when you need them.
The lesson stuck with me: making something look good is only half the job.
"But our brand colors are perfect!"
This conversation happens more often than you'd think. A client had beautiful brand guidelines with light gray text on white. Very minimalist. Very modern. Completely unreadable.
The contrast ratio was 2.1:1. WCAG wants 4.5:1 minimum. That's not a suggestion. It's the difference between text that's readable and text that isn't.
We found a darker gray that kept their aesthetic intact while actually being visible. After launch, they got emails from customers—not just people with vision issues, but older users, people viewing on their phones in sunlight, folks with cheap monitors. Turns out when you make text readable, everyone benefits. Who knew?
Alt text is weirdly hard
You'd think describing images would be straightforward. It's not. We've all seen alt="image123.jpg" or alt="Click here for more information"—basically useless.
But going too far the other way doesn't help either. A product photo doesn't need "Image of a silver MacBook Pro laptop with a cup of coffee next to it on a wooden desk with natural lighting coming from the left." The person shopping just needs "MacBook Pro 16-inch, Silver."
Some quick rules that actually work:
- Decorative stuff (borders, spacers, aesthetic fluff)? Empty alt="" so screen readers ignore it
- Functional images (buttons, links)? Describe what it does, not what it looks like
- Graphs or charts? Put the data in the surrounding text, not crammed into alt text
- Text in images? Yeah, you need to include that text in the alt
Context matters more than rules, though.
The placeholder text trap
I used to think placeholder text was helpful. You know, that light gray hint inside a form field? Turns out it causes more problems than it solves.
The moment you start typing, it vanishes. So if you're filling out a long form and forget what field you're on—too bad. Plus, placeholder text often fails contrast requirements (hey, we're back to that gray-on-white problem).
The fix is simple but feels old-school: actual <label> elements that stay visible. Group related stuff with <fieldset> and <legend>. Write error messages that make sense—not "Invalid email" but "Email must include an @ symbol."
That one change dropped form abandonment 23% on one client's site. People could actually tell what went wrong and fix it.
Where to start if this all feels overwhelming
Look, I get it. Reading this list might make accessibility feel like this massive undertaking. But you don't have to fix everything at once.
Pick something small. Maybe check if your site works with a keyboard (just unplug your mouse and try navigating). Or run your color palette through a contrast checker. Or fix your heading structure so it goes h1, h2, h3 instead of jumping around based on what "looks right."
Then do another thing. Then another.
The person who can finally navigate your site, or read your text, or complete your form—they won't care that you fixed 100 things. They'll just be glad the one thing that was blocking them is gone.
At Onclick Cooperative, we build accessible-first web applications for cooperatives and small businesses. Want to talk about making your site work for everyone? Schedule a call.