Accessibility gets treated as a compliance chore — a checklist someone runs before launch, produces 200 warnings, and quietly ignores. That framing is why most sites are still inaccessible.
A more useful framing: accessibility is the set of design decisions that stop your interface from depending on one specific way of perceiving it. Most of the fixes improve the experience for everyone, and about eight of them cover the overwhelming majority of real-world problems.
The eight that matter most
| Fix | Who it unblocks | Effort |
|---|---|---|
| Text contrast 4.5:1 or better | Low vision, everyone in sunlight | Low |
| Everything reachable by keyboard | Motor impairments, power users | Medium |
| Visible focus indicator | Keyboard users, everyone tabbing | Low |
| Labels on every form field | Screen readers, everyone | Low |
| Alt text that says what matters | Screen readers, slow connections | Low |
| Headings in real order | Screen readers, skim readers | Low |
| Never colour alone to convey meaning | Colour blindness (~8% of men) | Low |
| Respect reduced-motion setting | Vestibular disorders | Low |
The focus indicator you probably removed
Somewhere in almost every stylesheet is a line that removes the outline browsers draw around the focused element. It was added because the default ring looked ugly.
Without it, anyone navigating by keyboard is moving through your interface blind — they cannot see where they are. It is the single most common accessibility failure on the web and it is a one-line fix: design a focus style you like instead of deleting the one you inherited.
Test it in ten seconds: load your homepage and press Tab repeatedly. If you cannot see where you are at every step, that is the bug.
Alt text: describe the point, not the picture
Most alt text is written as if describing a photograph to someone who asked what is in it. The useful question is different: why is this image here?
- Decorative image — empty alt (
alt=""). Announcing it wastes the user’s time. - Image carrying information — describe the information. A chart’s alt text should state the finding, not say “bar chart”.
- Image that is a link or button — describe the destination or action, not the icon.
- Image containing text — repeat the text. Better still, do not put text in images.
Colour alone is never enough
Red for error, green for success, a red dot for “offline”. Around one in twelve men cannot reliably distinguish those, and nobody can in bright sunlight on a phone.
The fix is to add a second signal, always: an icon, a word, a pattern, a position. “Error: card number is too short” in red works for everyone. Red alone works for most people, which is not the same thing.
Same rule applies to charts — differentiate series by shape or direct labels, not by hue alone.
How to test without buying anything
- Tab through the page. Can you reach and use everything? Can you always see where you are? Can you escape every modal?
- Zoom to 200%. Does the layout hold, or does content overlap and disappear?
- Run the browser’s built-in audit. Chrome and Firefox both ship one. It catches contrast, missing labels and heading order automatically.
- Turn the screen off and use a screen reader. Uncomfortable, revealing, and free — VoiceOver and Narrator are already installed.
Automated tools catch roughly a third of real issues. The other two thirds are things only a human notices — like alt text that is technically present and completely unhelpful.
Common questions
Is this legally required?
In many jurisdictions, for many kinds of organisation — and the rules differ by country and sector, so check yours rather than assuming. Practically, the business case usually lands harder than the legal one: these fixes reduce support load and improve the experience for every user.
Does an accessibility overlay widget fix this?
No, and the disability community has been consistently clear about this. Overlays sit on top of the underlying problems, often interfere with the assistive technology people already use, and provide a false sense of resolution. Fix the markup.
How much does it cost to retrofit?
The eight items above are days, not months, on a typical site. What is expensive is a custom component library built without any of it — that is where retrofitting turns into rewriting.
Where should we start?
Focus indicators and form labels. Both are quick, both are high impact, and both overlap directly with the friction fixes in the five frictions.
Leave a Reply