The Most Common Web Accessibility Mistakes - and How to Fix Them
Most accessibility problems on the web aren't exotic. It's the same handful of mistakes over and over again - and that's actually good news: once you know them, you've already got the bulk of it covered. We run seven of our own brands live in production, including an accessibility scanner, and we see every day which points go wrong on real-world websites. Here are the most common ones - with concrete fixes instead of theory.
1. Insufficient color contrast
Light gray text on a white background looks elegant in the design tool, but for many people it's simply unreadable. This is by far the most frequent finding. The WCAG require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- How to fix it: Check your color combinations with a contrast checker (such as the WebAIM Contrast Checker). Darken your gray text until the value passes.
- Never rely on color alone to convey meaning - for example, "red fields are required." Always add text or icons as well.
2. Missing or meaningless alt text on images
Screen readers read out the alternative text when an image can't be seen. If it's missing, users only hear the file name like "IMG_4821.jpg" - useless. Just as bad: alt text like "image" or a string of keywords.
- How to fix it: Describe the content and function of the image briefly and factually. "Staff member advising a customer at the reception desk" instead of "consultation."
- Purely decorative images get an empty
alt=""so the screen reader skips them. That is explicitly correct here - not every image needs a description.
3. Website not operable by keyboard
Many people don't use a mouse - because of motor impairments, visual impairments, or simply out of habit. If you can't move through the menu, links, and forms with the Tab key, or a dropdown won't open with the keyboard, the site is unusable for them.
- How to test it: Put the mouse aside and operate your site using only Tab, Shift+Tab, and Enter. Can you reach everything? Can you trigger every element?
- How to fix it: Use real HTML elements like
andinstead of clickableelements. These are keyboard-operable by default. Interactive custom components need appropriate ARIA roles and keyboard handlers.4. Invisible focus indicator
Closely related to point 3: anyone navigating by keyboard needs to see where they currently are. Many designs strip out the focus outline with
outline: nonebecause it "looks distracting" - and in doing so make the site unusable.- How to fix it: Never remove focus without a replacement. Instead, design a clearly visible custom focus style with strong contrast.
5. Forms without associated labels
Input fields whose label exists only as placeholder text inside the field are a classic mistake. The placeholder disappears as soon as you start typing, and screen readers often can't associate the field at all.
- How to fix it: Connect every field to a visible
via theforattribute. - For errors, output clear text - "Please enter a valid email address" - instead of just turning the field red.
6. Missing or jumbled heading structure
Screen reader users often jump from heading to heading to get a sense of a page. If headings are only styled to look "big and bold" but aren't real
throughelements, or if levels are skipped, that orientation is lost.- How to fix it: Use a logical hierarchy: one
per page, thenfor main sections,for subpoints. Control the size with CSS, not by choosing the wrong level.
7. Vague link text
"Click here" or "learn more" are worthless taken out of context. Screen readers can read out all the links on a page as a list - ten instances of "learn more" help no one.
- How to fix it: Write link text that makes sense on its own: "View our services" instead of "more."
8. Videos without captions, missing language declaration
Audio and video content needs captions so that deaf people can use it. And the
tag surprisingly often lacks thelang="en"attribute - without it, the screen reader may read English text with the wrong pronunciation.- How to fix it: Set
lang="en"and provide a caption track for videos.
How to approach this systematically
An automated scanner (such as axe or our own tool) reliably catches roughly half of these problems - contrast issues, missing alt attributes, missing labels. The other half requires a manual test: a keyboard walkthrough, a screen reader spot check, a look at the logic. So don't rely on a green tool result alone.
Be honest with yourself about the scope: for a small business-card website, working through these eight points cleanly is often enough. Anyone who falls under the legal scope of accessibility legislation such as the European Accessibility Act (EAA) - for example online shops or certain services - should tackle the topic more systematically and with a documented test. Most mistakes, however, are no rocket science, just attention to detail.
Need a website, a tool or a SaaS of your own?We build it at a fixed price — by the team that runs seven of its own brands live. Clear scope, clear price, clear timeline.
Start a projectServices & pricing