هذا المقال غير متوفر بالعربية بعد. أنت تقرأ النسخة الإنجليزية.
Web accessibility: the mistakes found on almost every website
Low contrast, images without alternatives, silent buttons… The most widespread issues are also the easiest to fix. Here's an overview.
فريق Codanalyst
قراءة في 3 دقائق
المحتويات
Every year, the organization WebAIM analyzes the home pages of the million most visited websites. And every year, the finding is the same: the vast majority have accessibility errors that can be detected automatically. More interesting still, they are almost always the same errors.
That's good news. The most widespread issues are also among the easiest to fix, often in minutes. Since 28 June 2025, the European Accessibility Act has also made these requirements mandatory for many online services, including e-commerce. All the more reason to get started.
Insufficient text contrast
This has been the number one error for years. Light gray on a white background looks elegant on a large, well-calibrated screen, but becomes unreadable in sunlight, on a cheap screen or for someone with low vision.
The WCAG rule, level AA: a contrast ratio of at least 4.5:1 for body text, and 3:1 for large text. Browser developer tools display this ratio when you inspect a piece of text.
Images without alternative text
A screen reader reads the alt attribute in place of the image. Without it, it announces "image" at best, and the file name at worst.
<!-- Avoid -->
<img src="IMG_4032.jpg">
<!-- Better -->
<img src="IMG_4032.jpg" alt="Caramelized apple tart on a wooden board">
Silent links and buttons
A magnifying glass icon, an arrow, a social network logo: visually, everyone understands. For a screen reader, these links have no name, and it simply announces "link" or "button".
<button aria-label="Search">
<svg aria-hidden="true">…</svg>
</button>
Same problem with "Click here" or "Read more" links repeated ten times on a page: out of context, they say nothing about where they lead.
Form fields without labels
Example text inside a field (the placeholder) is not a label: it disappears as soon as you start typing, and many assistive technologies don't read it. Every field needs a linked label:
<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email">
Undeclared page language
Without the lang attribute, a screen reader reads your English text with the pronunciation of the device's language. The result quickly becomes incomprehensible. The fix takes a few characters:
<html lang="en">
Navigation impossible with a keyboard
Unplug your mouse and browse your site with the Tab key. Can you always see where the focus is? Can you open the menu, close a modal, submit the contact form? Many sites remove the focus outline for aesthetic reasons, and in doing so make keyboard navigation impossible.
What automation can't see
Automated tools, Codanalyst included, reliably detect the errors above. They can't judge whether an alternative text is relevant or whether a user journey makes sense. An automated audit is the right starting point, not the finish line: it clears away the mechanical errors so your manual testing can focus on what matters.
Analyze your site to get the list of its accessibility errors, page by page.