Let’s talk about web accessibility mistakes — not from a compliance angle, but from a “this is costing you money” angle. Most businesses treat accessibility as a legal checkbox, something you do to avoid lawsuits. But here’s the thing: the same WCAG compliance issues that make your site unusable for people with disabilities are also tanking your conversion rate for everyone else. Poor accessible web design practices hurt user experience across the board. An ADA website violation often signals a deeper UX problem that’s silently killing your conversions. I’ve audited hundreds of sites, and these 10 web accessibility mistakes come up over and over again — each one with a direct, measurable impact on business metrics.
1. Missing or Generic Alt Text on Key Images
When people think about alt text, they think about screen readers. And yes, screen readers need alt text. But alt text also serves as a fallback when images don’t load (happens more than you think on mobile networks), contributes to image SEO, and provides context for search engines trying to understand your page.
The conversion impact: Product images without descriptive alt text don’t show up in Google Image search. That’s free traffic you’re missing. And when images fail to load on a slow connection, users see a broken icon instead of a description of what they’re looking at. If that image was your product or a trust-building graphic, that’s a lost opportunity.
Fix it: Write alt text that describes the function, not just the appearance. “Red running shoes with mesh upper — Nike Air Zoom” beats “shoe-image-1.jpg” every time.
2. Low Color Contrast on CTAs and Body Text
WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. A lot of “modern” designs violate this with light gray text on white backgrounds, or pastel-colored buttons that look great on a designer’s calibrated monitor but vanish in direct sunlight on a phone.
The conversion impact is brutal. If people can’t read your CTA button text, they won’t click it. If they’re squinting to read your body copy, they’ll leave. I’ve seen conversion rates jump 15-20% just from increasing button contrast ratios to WCAG AA standards. It sounds absurd, but it’s real.
Fix it: Use a contrast checker tool on every text element and every button on your site. Pay special attention to mobile views in outdoor lighting conditions.
3. No Keyboard Navigation Support
Here’s one that surprises a lot of people: keyboard navigation isn’t just for users with motor disabilities. Power users tab through forms constantly. Users with broken trackpads navigate with keyboards. Mobile users with external keyboards rely on tab order.
If your dropdown menus, modal dialogs, and interactive elements don’t work with keyboard-only navigation, those users can’t convert. And if you’ve removed the default focus outlines for “aesthetic” reasons (a tragically common practice), even keyboard users who try can’t see where they are on the page.
Fix it: Never remove focus styles — restyle them instead. Test every interactive element and every form with keyboard-only navigation. Make sure tab order is logical, not random.
4. Broken Form Labels and Missing Error Messages
This one is a conversion killer regardless of disability. Forms without proper <label> elements associated with inputs are harder for everyone to use. On mobile, the tap target for a properly labeled input includes the label text — without that association, users have to tap the tiny input field itself.
And error handling? If your form validation just highlights the field in red without explaining what’s wrong, you’re going to lose people. Color alone isn’t enough (8% of men are color blind). And vague errors like “invalid input” on a phone number field — does it want dashes? Parentheses? Country code? — cause form abandonment.
Fix it: Every input gets a visible, associated label. Every error message is specific, visible, and uses text (not just color). Real-time validation that helps, not punishes.
5. Auto-Playing Media and Unexpected Movement
Auto-playing videos with sound are an obvious no-go, but even auto-playing muted videos and animated carousels create problems. For users with vestibular disorders, unexpected motion can cause physical discomfort. For everyone else, it’s a distraction that pulls attention away from your conversion elements.
Auto-playing hero carousels are particularly bad. Study after study shows that users almost never interact with carousel slides beyond the first one, and the motion actually reduces engagement with the primary CTA. You’d convert better with a static hero in almost every case.
Fix it: Give users control. If you must use animation, respect the prefers-reduced-motion media query. Replace carousels with a single, strong hero message.
6. Missing Heading Hierarchy
Screen reader users navigate pages by headings. But heading hierarchy isn’t just an accessibility feature — it’s a content structure feature that affects everyone’s ability to scan your page. When you jump from H1 to H4 because the H4 styling “looks right,” you’re breaking the logical outline of your page.
Search engines also use heading hierarchy to understand your content structure. A broken heading hierarchy can confuse Google about what your page is actually about, which affects your organic rankings.
Fix it: Use headings in order (H1 > H2 > H3). Style them with CSS to look however you want, but keep the semantic hierarchy intact. One H1 per page, always.
7. Links That Say “Click Here” or “Learn More”
Screen readers can pull up a list of all links on a page. Imagine hearing: “Click here. Click here. Learn more. Click here. Read more.” It’s useless. But beyond accessibility, vague link text is bad for everyone. “Click here” doesn’t tell the user where they’re going or what they’ll get. It’s a missed opportunity to set expectations and build intent.
Descriptive link text also contributes to SEO. Internal links with meaningful anchor text help search engines understand the relationship between your pages.
Fix it: Write link text that describes the destination or action. “View our pricing plans” instead of “Click here.” “Download the accessibility checklist” instead of “Learn more.”
8. Non-Accessible Modal Dialogs and Popups
Modals are everywhere — newsletter signups, cookie consent, exit-intent offers, product quick-views. And most of them are accessibility disasters. They don’t trap focus (keyboard users tab right out of the modal and into the invisible page behind it), they don’t have proper close mechanisms, and they don’t announce themselves to screen readers.
But here’s the conversion angle: if a user can’t close your modal, they close your tab. If the modal interrupts their flow and they can’t get back to where they were, they leave. Poorly implemented modals don’t just violate WCAG — they interrupt the conversion path for all users.
Fix it: Use the native HTML <dialog> element (it handles a lot of accessibility for free). Trap focus, handle escape key, return focus to the trigger element on close. For the full picture on building accessible interfaces, check out my web accessibility best practices guide.
9. Touch Targets That Are Too Small
WCAG 2.2 introduced a minimum touch target size of 24×24 pixels (with 44×44 as the recommended enhanced standard). This isn’t just about fat fingers — it’s about reducing errors on mobile. When links and buttons are too close together or too small, users accidentally tap the wrong thing. That’s a frustrating experience that leads to bounces.
I’ve seen footer navigation links with 12px font and zero padding between them. I’ve seen form checkboxes that are 16×16 pixels on mobile. I’ve seen “Remove from cart” buttons right next to “Add to cart” with no spacing. Each of these is both a WCAG violation and a conversion issue.
Fix it: Minimum 44×44 pixel touch targets on mobile. Add sufficient spacing between interactive elements. Make sure padding is included in the tappable area, not just the visible element.
10. No Skip Navigation and Poor Page Structure
Skip navigation links let keyboard and screen reader users jump past the main navigation to the content. Without them, these users have to tab through every single nav item on every page load. It’s like forcing someone to read the table of contents every time they turn a page in a book.
More broadly, poor page structure — missing landmark roles, no main content area defined, inconsistent navigation patterns — makes the entire site harder to use for everyone. When users can’t predict where things are, they lose confidence and leave.
Fix it: Add a skip link as the first focusable element on every page. Use semantic HTML landmarks (<nav>, <main>, <footer>). Keep navigation consistent across all pages.
The Business Case: Accessibility = More Conversions
Let me tie this all together with some numbers. The World Health Organization estimates that 1.3 billion people globally live with some form of disability. That’s roughly 16% of the world’s population. In the US alone, 61 million adults have a disability. If your website excludes these users, you’re leaving a massive market on the table.
But as I’ve shown with every example above, accessibility fixes don’t just help users with disabilities. Better contrast helps everyone. Better forms help everyone. Logical heading structure helps everyone. Proper keyboard navigation helps everyone. These aren’t accessibility accommodations — they’re UX improvements that happen to also make your site accessible.
Companies that take accessibility seriously consistently report higher conversion rates, lower bounce rates, better SEO performance, and stronger brand perception. It’s not charity work — it’s good business. And when you factor in the performance optimization angle, where accessible code tends to be cleaner and faster, the ROI case becomes undeniable.
Ready to go deeper? My comprehensive web accessibility best practices guide covers WCAG 2.2, ADA compliance requirements, testing strategies, and the full SEO impact of accessible design.
