Five WCAG Mistakes That Are Costing You Conversions
Your site might technically pass an automated accessibility test, but are you actually reaching one in five people who have a disability?
Most teams create barriers without realising it. These are not obscure edge cases. They are common mistakes that affect real people trying to use your product right now.
Let's walk through five accessibility issues we see repeatedly in audits, and more importantly, how to fix them.
Invisible focus indicators
Picture this: you are navigating a website using only your keyboard. You tab through links and buttons, but you cannot tell where you are on the page. This is what happens when focus indicators are removed or barely visible.
Many designers remove the default browser focus outline because they find it visually unappealing. Fair enough. But removing it without providing an alternative leaves keyboard users lost.
The fix is straightforward. Design a custom focus state that fits your brand. Make it prominent, with at least 3:1 contrast against the background. Without one, keyboard users cannot tell where they are on the page.
Form errors that screen readers miss
Error messages that only show up visually are a conversion killer. A screen reader user fills out your contact form, hits submit, and hears nothing. They do not know what went wrong or how to fix it.
The solution involves proper ARIA labels and live regions. When an error occurs, announce it. Tell users which field has the problem and what they need to do. Better yet, validate as users type so they catch issues before submitting.
Good error handling is not just accessible. It reduces frustration for everyone and increases form completion rates across the board.
Colour as the only indicator
Red means error. Green means success. Simple, right? Not if you are among the 8% of men and 0.5% of women with colour vision deficiency.
When colour is the only way to convey information, you are excluding millions of users. This shows up everywhere: form validation, data visualisations, status indicators, interactive elements.
Add icons, patterns, or text labels alongside colour. Your charts can use both colour and texture. Error messages can include warning icons. Success states can show checkmarks. The information becomes accessible to everyone, regardless of how they perceive colour.
Low contrast text that strains everyone
Light grey text on white backgrounds might look sleek, but it creates real problems. Users with low vision struggle to read it. Older users find it difficult. Even people with perfect vision squint when reading it on their phone in bright sunlight.
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. These are not arbitrary numbers. They are based on research into what people actually need to read comfortably.
Test your colour combinations. There are free tools that calculate contrast ratios instantly. When in doubt, go darker. Legibility always wins over aesthetics.
Buttons that don't look like buttons
Flat design led to a trend where everything looks the same. Links that look like buttons. Buttons that look like text. Clickable elements that look decorative.
This creates confusion for everyone, but particularly impacts users with cognitive disabilities who rely on familiar patterns to navigate interfaces.
Make interactive elements obvious. Use established patterns. Buttons should look pressable. Links should be underlined or clearly differentiated from body text. Maintain consistency throughout your interface.
Moving forward
These five issues come up in nearly every audit we run. They are straightforward to fix and they affect a large number of users.
Most of these improvements make the product better for everyone, not just users with disabilities. Clearer focus states help all keyboard users. Better error messages reduce support tickets. Higher contrast improves readability in any lighting condition.
Start with these. Test with a keyboard and a screen reader. Build the fixes into your components so they do not regress.
