codanalystBlog
Todos los artículos

Este artículo aún no está disponible en español. Estás leyendo la versión en inglés.

Accesibilidad

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.

C

El equipo de Codanalyst

3 min de lectura

Índice
  1. 01Insufficient text contrast
  2. 02Images without alternative text
  3. 03Silent links and buttons
  4. 04Form fields without labels
  5. 05Undeclared page language
  6. 06Navigation impossible with a keyboard
  7. 07What automation can't see

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">

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">

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.

¿Te ha resultado útil este artículo?

Compártelo con tu equipo.

inX

Empieza ahora

¿Listo para auditar tu sitio?

Obtén un informe completo y priorizado en menos de un minuto. Tu primera auditoría es gratis.

  • Sin permanencia
  • Sin tarjeta bancaria
  • Sin instalación