Los errores de accesibilidad más comunes en los sitios web son el texto con poco contraste, las imágenes sin texto alternativo, los campos de formulario sin etiqueta, los enlaces vacíos, los botones vacíos y la falta de un idioma definido. Así lo muestra el informe WebAIM Million de 2026, que prueba de forma automática las páginas de inicio de un millón de sitios web populares. Según ese informe, el 96% de todos los errores encontrados pertenece a esas seis categorías.
La buena noticia: la mayoría de estos errores se corrigen con unas pocas líneas de HTML o con otra forma de trabajar en tu CMS. Este artículo repasa los diez errores más comunes, con el criterio de WCAG correspondiente y una solución concreta. Forma parte de nuestra guía completa sobre accesibilidad web.
¿Qué dice el informe WebAIM Million?
El informe WebAIM Million es una prueba de accesibilidad anual y automática de las páginas de inicio del millón de sitios web más populares. La edición de 2026 se basa en mediciones de febrero de 2026, hechas con la herramienta WAVE de WebAIM, que comprueba errores frente a WCAG 2.2 en los niveles A y AA.
Las cifras principales del informe:
- El 95,9% de las páginas de inicio tenía errores de WCAG detectables automáticamente, frente al 94,8% en 2025.
- De media había 56,1 errores por página de inicio, frente a 51 en 2025.
- Según WebAIM, los seis tipos de error más frecuentes llevan siete años siendo los mismos.
| Error (WebAIM Million 2026) | Porcentaje de páginas de inicio 2026 | 2025 |
|---|---|---|
| Texto con contraste demasiado bajo | 83,9% | 79,1% |
| Imágenes sin texto alternativo | 53,1% | 55,5% |
| Campos de formulario sin etiqueta | 51% | 48,2% |
| Enlaces vacíos | 46,3% | 45,4% |
| Botones vacíos | 30,6% | 29,6% |
| Idioma del documento ausente | 13,5% | 15,8% |
Los errores 7 a 10 de esta lista proceden de otras mediciones del mismo informe: estructura de encabezados, textos de enlace vagos, uso de ARIA y enlaces para saltar contenido. WebAIM no los incluye en el top seis, pero sí se midieron y afectan a muchos sitios.
Una salvedad que hace la propia WebAIM: las herramientas automáticas no detectan todos los errores. El informe indica que no encontrar errores no significa que una página sea accesible o cumpla WCAG. La situación real es, por tanto, peor de lo que muestran estas cifras.
1. Texto con poco contraste de color
El contraste insuficiente es el error de accesibilidad más común: WebAIM lo encontró en el 83,9% de las páginas de inicio, con una media de 34 casos por página. Se trata de texto cuyo color destaca demasiado poco sobre el fondo.
- Criterio de WCAG: 1.4.3 Contrast (Minimum), nivel AA. El texto normal necesita al menos 4,5:1 y el texto grande (18 puntos, o 14 puntos en negrita) al menos 3:1, según la especificación de WCAG 2.2.
- Por qué importa: las personas con baja visión, las personas mayores o quien usa el móvil a pleno sol no pueden leer texto gris claro ni texto sobre una foto.
La solución está en tu identidad visual y en el CSS, no en el HTML. Elige colores de texto que alcancen al menos 4,5:1 en un comprobador de contraste y pon una capa oscura bajo el texto que va sobre una imagen. Encontrarás más sobre el contraste de color en el glosario.
2. Imágenes sin texto alternativo
La falta de texto alternativo es el segundo error: el 53,1% de las páginas de inicio tenía al menos una imagen sin atributo alt. Según WebAIM, al 16,2% de todas las imágenes le faltaba el texto alternativo, una media de 10,8 por página de inicio.
- Criterio de WCAG: 1.1.1 Non-text Content, nivel A.
- Por qué importa: un lector de pantalla no lee nada, o lee el nombre del archivo. Si la imagen es un enlace, el usuario no sabe adónde lleva. WebAIM señala que el 45% de las imágenes sin texto alternativo eran enlaces.
Da a las imágenes informativas una descripción breve de lo que cuentan en ese contexto. Da a las imágenes puramente decorativas un alt vacío, para que el lector de pantalla las omita.
<!-- Imagen informativa -->
<img src="equipo.jpg" alt="Nuestro equipo de soporte de cinco personas en el mostrador de Valencia">
<!-- Imagen enlazada: describe la finalidad del enlace -->
<a href="/prijzen"><img src="icono-precios.svg" alt="Ver los precios"></a>
<!-- Imagen decorativa: alt vacío -->
<img src="linea-ondulada.svg" alt="">
Un buen texto alternativo también ayuda a los buscadores y a los sistemas de IA a entender tus imágenes; consulta contenido que cita la IA.
3. Campos de formulario sin etiqueta
Un campo de formulario sin etiqueta es el tercer error: el 51% de las páginas de inicio tenía al menos uno. Según WebAIM, el 33,1% de todos los campos de formulario no estaba bien etiquetado.
- Criterios de WCAG: 1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A) y 4.1.2 Name, Role, Value (A).
- Por qué importa: un lector de pantalla solo dice "campo de edición", sin decir qué hay que rellenar. Un marcador de posición desaparece en cuanto escribes, así que también los usuarios que ven olvidan la pregunta.
Vincula una etiqueta visible a cada campo con for e id. Un campo de búsqueda que solo tiene un icono puede llevar un aria-label.
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" autocomplete="email">
<!-- Campo de búsqueda sin etiqueta visible -->
<input type="search" name="q" aria-label="Buscar en el sitio">
Para formularios de pedido y checkouts, el artículo sobre formularios y checkout accesibles profundiza en los mensajes de error y los campos obligatorios.
4. Enlaces vacíos
Un enlace vacío es un enlace sin texto que un lector de pantalla pueda leer. WebAIM encontró enlaces vacíos en el 46,3% de las páginas de inicio. Casi siempre se trata del icono de una red social o de un logotipo sin texto alternativo.
- Criterios de WCAG: 2.4.4 Link Purpose (In Context), nivel A, y 4.1.2 Name, Role, Value, nivel A.
- Por qué importa: el usuario solo oye "enlace" y no sabe adónde lleva.
<!-- Mal: icono sin texto -->
<a href="https://www.linkedin.com/company/ejemplo"><svg>…</svg></a>
<!-- Bien: texto para el lector de pantalla, icono oculto -->
<a href="https://www.linkedin.com/company/ejemplo">
<svg aria-hidden="true" focusable="false">…</svg>
<span class="visually-hidden">Síguenos en LinkedIn</span>
</a>
5. Botones vacíos
Un botón vacío es un botón sin nombre accesible, y WebAIM lo encontró en el 30,6% de las páginas de inicio. Piensa en un menú de hamburguesa, una cruz para cerrar o un botón de búsqueda que solo tiene un icono.
- Criterio de WCAG: 4.1.2 Name, Role, Value, nivel A. Si el botón es una imagen, también 1.1.1.
- Por qué importa: quien no ve el botón no sabe qué hace y no se atreve a pulsarlo.
<button type="button" aria-label="Abrir el menú" aria-expanded="false">
<svg aria-hidden="true" focusable="false">…</svg>
</button>
6. Idioma del documento ausente
Una página sin idioma definido no le dice al navegador en qué idioma está el texto. Según WebAIM, faltaba en el 13,5% de las páginas de inicio.
- Criterio de WCAG: 3.1.1 Language of Page, nivel A. Para fragmentos en otro idioma: 3.1.2 Language of Parts, nivel AA.
- Por qué importa: el lector de pantalla lee entonces un texto en español con pronunciación inglesa, lo que a menudo resulta incomprensible.
<html lang="es">
…
<p>Nuestro eslogan es <span lang="en">built for speed</span>.</p>
</html>
7. Una estructura de encabezados desordenada
Los encabezados son el índice de una página para quienes usan lector de pantalla, y en muchos sitios no es correcto. WebAIM contó niveles de encabezado saltados, como un salto de H2 a H4, en el 41,8% de las páginas de inicio. El 18,1% tenía más de un H1 y el 7,5% no tenía ningún encabezado.
- Criterios de WCAG: 1.3.1 Info and Relationships (A) y 2.4.6 Headings and Labels (AA).
- Por qué importa: WebAIM indica que los encabezados son el principal medio con el que los usuarios de lectores de pantalla navegan por el contenido.
Saltarse un nivel no siempre es por sí solo un error de WCAG, pero hace que la estructura sea confusa. Usa los encabezados en orden y elige el nivel según la estructura, no según el tamaño de la letra. El texto en negrita que parece un encabezado, pero no lo es en el código, sí es un error según el 1.3.1.
8. Textos de enlace vagos
Un texto de enlace vago, como "haz clic aquí", "más" o "siguiente", no dice nada sobre el destino del enlace. WebAIM encontró este tipo de textos en el 15,2% de las páginas de inicio, con una media de 5,3 casos por página.
- Criterio de WCAG: 2.4.4 Link Purpose (In Context), nivel A.
- Por qué importa: los usuarios de lectores de pantalla suelen pedir que se les lea una lista con todos los enlaces. Diez veces "leer más" resulta entonces inútil.
Escribe el destino en el texto del enlace: "consulta el horario de apertura" en lugar de "haz clic aquí". Es el error que más fácil te resulta evitar como creador de contenido.
9. ARIA mal utilizado
WAI-ARIA es un conjunto de atributos HTML que proporciona información adicional a las tecnologías de apoyo, pero usarlo mal empeora la página. WebAIM contó una media de más de 133 atributos ARIA por página de inicio. Las páginas con ARIA tenían una media de 59,1 errores, frente a 42 en las páginas sin ARIA.
WebAIM subraya que se trata de una correlación y no de una prueba de que ARIA cause los errores; las páginas con ARIA también son más complejas. Un dato concreto: de los menús ARIA (role="menu"), el 22% causaba problemas de accesibilidad por falta de código o de manejo con teclado.
- Criterio de WCAG: normalmente 4.1.2 Name, Role, Value, nivel A.
- Solución: usa primero elementos HTML normales, como
<button>,<nav>y<a>. Ya traen integrados el rol correcto y el manejo con teclado. Añade ARIA solo donde el HTML se quede corto.
10. Un enlace para saltar contenido ausente o roto
Un enlace para saltar contenido (skip link) es un enlace al principio de la página con el que los usuarios de teclado se saltan la navegación y van directamente al contenido. Según WebAIM, el 17,1% de las páginas de inicio tenía uno, y uno de cada diez no funcionaba.
- Criterio de WCAG: 2.4.1 Bypass Blocks, nivel A. Un enlace para saltar contenido es una forma habitual de cumplirlo; los encabezados y los landmarks como
<main>también ayudan. - Por qué importa: sin él, un usuario de teclado tiene que recorrer con Tab todo el menú en cada página.
<body>
<a href="#contenido" class="skiplink">Ir al contenido</a>
<header>…</header>
<main id="contenido">…</main>
</body>
No ocultes el enlace con display: none, porque entonces no funciona. Haz que se vuelva visible en cuanto recibe el foco.
¿Qué errores detectan las herramientas automáticas y cuáles no?
Las herramientas automáticas detectan si falta algo, pero rara vez si algo es correcto. Esa diferencia determina cuánto trabajo manual te queda después de un análisis.
| Error | Detectable automáticamente | Qué queda para la revisión manual |
|---|---|---|
| Contraste bajo | Solo con una página renderizada | Texto sobre imágenes, degradados y estados hover |
| Texto alternativo ausente | Sí | Si el texto alternativo describe bien la imagen |
| Campos sin etiqueta | Sí | Si la etiqueta es clara |
| Enlaces y botones vacíos | Sí | Si el nombre describe bien la función |
| Idioma del documento ausente | Sí | Si el idioma definido es el correcto |
| Estructura de encabezados | En parte, como los niveles saltados | Si los encabezados describen bien el contenido |
| Textos de enlace vagos | En parte, palabras conocidas como "haz clic aquí" | Si un enlace es claro en su contexto |
| ARIA | Errores técnicos en los atributos | Si el manejo con teclado funciona |
| Enlace para saltar contenido | Si existe | Si se vuelve visible y salta al contenido |
El contraste de color merece atención aparte. Para medir el contraste, una herramienta tiene que saber qué color reciben realmente el texto y el fondo, incluidas las hojas de estilo, las imágenes y las capas. Eso requiere una representación real de la página. Una prueba que solo analiza el HTML no puede, por tanto, medir el contraste de forma fiable. Por eso Flowproof indica que el contraste debe revisarse manualmente, en lugar de dar un resultado que no sería correcto.
Cómo combinar pruebas automáticas y manuales lo explicamos en probar la accesibilidad web. Los criterios en sí los encontrarás en WCAG 2.2 explicado.
Cómo comprobarlo en tu propio sitio
Con estos pasos localizarás los diez errores en tu propio sitio:
- Lanza una prueba automática en tu página de inicio, una landing page, una página de producto y tu formulario más importante. Detectará textos alternativos y etiquetas que faltan, enlaces y botones vacíos y el idioma del documento.
- Mide el contraste con un comprobador de contraste, sobre todo en tonos claros, colores corporativos y texto sobre fotos.
- Revisa tu estructura de encabezados con una extensión del navegador que muestre los encabezados como lista, y comprueba si esa lista se lee como un índice.
- Lee tus textos de enlace sin el texto que los rodea y sustituye cada "haz clic aquí" o "leer más".
- Recorre la página con Tab usando solo el teclado: ¿funciona el enlace para saltar contenido, ves el foco y puedes abrir y cerrar los menús?
- Revisa los textos alternativos de tu biblioteca de medios por su contenido, no solo por si existen.
El control de accesibilidad de Flowproof está incluido en los planes de pago Pro y Business. Prueba con axe-core frente a WCAG 2.0, 2.1 y 2.2 en los niveles A y AA, muestra en cada hallazgo el criterio de conformidad, el nivel y la gravedad, y comprueba también si tienes un enlace para saltar contenido y un enlace a tu declaración de accesibilidad. Puedes crear una cuenta gratis y pasar después a un plan de pago.