EAA ComplyEAA Comply · Accessibility & compliance
Informe n.ºEAAC-2026-0624-17AEmitido el 27 de junio de 2026MUESTRA — DATOS FICTICIOS

Auditoría completa — WCAG 2.1 y 2.2 AA · EN 301 549

Informe de auditoría de accesibilidad web

Este informe recoge cada barrera de accesibilidad encontrada en el sitio indicado abajo, qué le hace a un cliente real y cómo se corrige exactamente. Está escrito para entregárselo directamente a tu desarrollador.

Sitio auditado
shop.demostore-example.com
Titular del sitio
Demo Store S.L. (ejemplo)
Periodo de auditoría
24–27 de junio de 2026
Informe emitido
27 de junio de 2026
Auditor
EAA Comply · eaacompliance.com
Alcance
15 páginas probadas a mano en 6 plantillas (inicio, categoría, producto, carrito, checkout, cuenta); 41 páginas rastreadas con axe-core
Probado en
Escritorio 1280 px y móvil 390 px · NVDA y VoiceOver · solo teclado · zoom 200%

Resumen ejecutivo

shop.demostore-example.com no cumple hoy el nivel AA. Encontramos 37 problemas distintos en las seis plantillas del alcance. Seis son críticos, que en este informe significa que un cliente que usa teclado o lector de pantalla no puede superarlos sin ayuda.

Tres de esos seis están directamente en el camino de la venta. El aviso de cookies no se puede cerrar con el teclado, así que quien navega sin ratón no llega ni a entrar en la tienda. Los botones del carrito y de cantidad se anuncian solo como «botón», de modo que un usuario de lector de pantalla no distingue «eliminar artículo» de «añadir uno más». Y cuando el checkout rechaza una dirección, no se anuncia nada: el formulario simplemente parece no responder.

Nada de esto exige rediseñar. La lista completa de correcciones son unas 11–15 horas de desarrollo, y casi todo es marcado: etiquetas, nombres accesibles, gestión del foco y cuatro valores de color. El diseño visual no cambia.

Corregir estos 37 problemas lleva el alcance auditado al nivel AA en la fecha de la reverificación. No convierte el sitio en conforme para siempre: la accesibilidad se rompe otra vez con la siguiente actualización de la plantilla o con el siguiente lote de fotos de producto. Para eso está la revisión mensual.

Resumen de resultados

No AA
Nivel de conformidad alcanzado
61/100
Puntuación de accesibilidad
37
Problemas encontrados
6
Problemas críticos

La puntuación es un índice propio de EAA Comply que pondera gravedad, frecuencia y en qué punto del proceso de compra aparece cada problema. Sirve para medir el avance entre auditorías. No es una medida estándar: WCAG no tiene puntuación, solo cumple o no cumple por criterio.

Problemas por gravedad

GravedadNúmeroQué significa aquí
Crítico6Impide por completo una tarea a al menos un grupo de usuarios. No se puede terminar la compra.
Grave14La tarea se puede completar, pero con dificultad, adivinando o con ayuda de otra persona.
Moderado12Notablemente más difícil o confuso; la mayoría acaba consiguiéndolo.
Leve5No bloquea nada, pero incumple un criterio y conviene corregirlo.

Conformidad por criterio de éxito (extracto)

WCAGCriterio de éxitoNivelResultado
1.1.1Contenido no textual (texto alternativo)ANo cumple
1.3.1Información y relacionesANo cumple
1.3.5Identificar el propósito de la entradaAANo cumple
1.4.1Uso del colorANo cumple
1.4.3Contraste (mínimo) 4,5:1AANo cumple
1.4.10Reflujo a 320 pxAACumple
1.4.11Contraste no textual (controles)AANo cumple
2.1.1Operabilidad con tecladoANo cumple
2.1.2Sin trampas para el foco del tecladoANo cumple
2.4.1Evitar bloques (enlace de salto)ANo cumple
2.4.7Foco visibleAACumple
2.5.8Tamaño del objetivo (mínimo)AANo cumple
3.3.1Identificación de erroresANo cumple
3.3.2Etiquetas o instruccionesANo cumple
4.1.2Nombre, función, valorANo cumple
4.1.3Mensajes de estadoAANo cumple

El informe entregado cubre los 56 criterios de nivel A y AA de WCAG 2.1 y 2.2, cada uno con la evidencia que sostiene el veredicto y marcando como no aplicables aquellos para los que el sitio no tiene contenido. Esto es un extracto representativo.

El plan de corrección, en el orden en que lo haríamos

OrdenProblemaEsfuerzo
1Crítico F-01 — El aviso de cookies no se puede cerrar con el teclado2-3 h
2Crítico F-02 — Los botones de solo icono no tienen nombre accesible1 h
3Crítico F-03 — Los campos del checkout usan placeholder en vez de etiqueta2 h
4Grave F-04 — Los errores de validación se ven pero nunca se anuncian2 h
5Grave F-05 — Los precios y los enlaces del pie no llegan al contraste mínimo1 h
6Grave F-06 — Las imágenes de producto usan el nombre del archivo como texto alternativo3 h
7Los 31 problemas restantes (moderados y leves)5–7 h

Ordenado por impacto en el cliente dividido por esfuerzo, no solo por gravedad. F-02 es una hora de trabajo que desbloquea doce controles, así que va por delante de elementos más lentos de la misma gravedad.

Hallazgos en detalle

Abajo se reproducen seis de los 37 hallazgos con el formato que usa el informe completo. Todos los problemas se documentan así, y en el nivel «Correcciones guiadas» se añade el código ya corregido para tu tecnología.

El aviso de cookies no se puede cerrar con el teclado

F-01 Crítico
WCAG: 2.1.2 · 2.4.3Nivel: ARegla de axe-core: no detectable automáticamenteCasos: 41Esfuerzo: 2-3 h

Dónde

Las 41 páginas — el aviso de consentimiento que aparece en la primera visita.

A quién afecta

Cualquiera que navegue sin ratón: usuarios de solo teclado, de lector de pantalla, de conmutador y de control por voz.

Por qué incumple

El aviso es un <div> con tabindex="-1" y el control de aceptar es un <span> con un manejador de clic, así que ni recibe el foco ni se anuncia como botón. La capa tapa la página, pero el tabulador sigue recorriendo el contenido de debajo y nunca llega a Aceptar. Quien usa ratón hace un clic y sigue; quien usa teclado no puede cerrar el aviso ni llegar a la tienda. Incumple 2.1.2 Sin trampas para el foco del teclado y, al dejar de seguir el foco el orden visible, 2.4.3 Orden del foco.

Encontrado en el sitio

<div class="cc-bar" tabindex="-1">
  <span class="cc-ok" onclick="acceptAll()">Accept</span>
</div>

Cómo se corrige

<div class="cc-bar" role="dialog" aria-modal="true"
     aria-labelledby="cc-title">
  <h2 id="cc-title">Cookies</h2>
  <button type="button" class="cc-ok">Accept</button>
  <button type="button" class="cc-no">Reject non-essential</button>
</div>

Los botones de solo icono no tienen nombre accesible

F-02 Crítico
WCAG: 4.1.2 · 1.1.1Nivel: ARegla de axe-core: button-nameCasos: 12Esfuerzo: 1 h

Dónde

Carrito y buscador de la cabecera, el control de lista de deseos de cada tarjeta de producto y los selectores de cantidad del carrito y de la ficha de producto — 12 controles.

A quién afecta

Usuarios de lector de pantalla y de control por voz, que no tienen ningún nombre que pronunciar.

Por qué incumple

Cada botón contiene solo un icono SVG, sin texto ni etiqueta, así que se anuncia como «botón» y nada más. En el carrito hay cuatro seguidos: aumentar, disminuir, guardar para después y eliminar. Adivinar cuál es cuál es adivinar si el pedido está a punto de vaciarse.

Encontrado en el sitio

<button class="qty-up">
  <svg viewBox="0 0 16 16">...</svg>
</button>

Cómo se corrige

<button type="button" class="qty-up" aria-label="Increase quantity">
  <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">...</svg>
</button>

Los campos del checkout usan placeholder en vez de etiqueta

F-03 Crítico
WCAG: 3.3.2 · 1.3.1 · 1.3.5Nivel: A / AARegla de axe-core: labelCasos: 9Esfuerzo: 2 h

Dónde

Checkout paso 1 (dirección de envío) y paso 2 (pago) — 9 campos.

A quién afecta

Usuarios de lector de pantalla, personas con discapacidad cognitiva y cualquiera a quien interrumpan en mitad de un formulario largo.

Por qué incumple

Los campos tienen placeholder y ninguna <label>. Un placeholder no es una etiqueta: desaparece en cuanto el campo tiene contenido, así que quien aparta la vista ya no puede ver para qué era el campo, y además se anuncia de forma inconsistente entre lectores de pantalla. El gris del placeholder (#9aa4b2 sobre blanco) es solo 2,52:1, muy por debajo del mínimo de 4,5:1.

Encontrado en el sitio

<input type="text" name="postcode" placeholder="Postcode">

Cómo se corrige

<label for="ship-post">Postcode</label>
<input type="text" id="ship-post" name="postcode"
       autocomplete="postal-code">

Los errores de validación se ven pero nunca se anuncian

F-04 Grave
WCAG: 3.3.1 · 4.1.3 · 1.4.1Nivel: A / AARegla de axe-core: no detectable automáticamenteCasos: 6Esfuerzo: 2 h

Dónde

Checkout, alta en la newsletter y formulario de contacto — 6 formularios.

A quién afecta

Sobre todo usuarios de lector de pantalla, y cualquiera que no perciba un cambio de color.

Por qué incumple

El texto del error se escribe en un <div class="err"> sin rol, y el campo se marca solo con un borde rojo. Quien usa lector de pantalla pulsa Enviar, no oye nada y no tiene forma de saber que el formulario no salió. Marcar el campo solo con color incumple además 1.4.1 Uso del color.

Encontrado en el sitio

<div class="err"></div>
<input type="email" id="mail" class="is-error">

Cómo se corrige

<input type="email" id="mail" aria-invalid="true"
       aria-describedby="mail-err">
<div id="mail-err" class="err" role="alert">
  Email address: enter an address in the form name@example.com.
</div>

Los precios y los enlaces del pie no llegan al contraste mínimo

F-05 Grave
WCAG: 1.4.3Nivel: AARegla de axe-core: color-contrastCasos: 23Esfuerzo: 1 h

Dónde

Tarjetas de producto, el bloque de precio de la ficha, la etiqueta de rebaja y los enlaces del pie — 23 elementos.

A quién afecta

Personas con baja visión y cualquiera que mire el móvil en la calle.

Por qué incumple

El precio rebajado es #e05c5c sobre blanco, una relación de 3,59:1, y los enlaces del pie son #8b95a5 sobre #f6f9fc, 2,86:1. El nivel AA exige 4,5:1 para texto de tamaño normal. El precio rebajado es justo la cifra que el cliente ha venido a leer.

Encontrado en el sitio

.price--sale { color: #e05c5c; }   /* 3.59:1 on white */
.site-foot a { color: #8b95a5; }   /* 2.86:1 on #f6f9fc */

Cómo se corrige

.price--sale { color: #c0392b; }   /* 5.44:1 on white */
.site-foot a { color: #5a6678; }   /* 5.51:1 on #f6f9fc */

Las imágenes de producto usan el nombre del archivo como texto alternativo

F-06 Grave
WCAG: 1.1.1Nivel: ARegla de axe-core: no detectable automáticamenteCasos: 38Esfuerzo: 3 h

Dónde

38 imágenes de producto en las plantillas de categoría y de producto.

A quién afecta

Usuarios de lector de pantalla y cualquiera cuyas imágenes no lleguen a cargar.

Por qué incumple

El texto alternativo es el nombre del archivo: alt="product-img-04.jpg". Es el hallazgo más instructivo del informe, porque axe-core lo registra como correcto: la regla comprueba que exista un atributo alt y que no esté vacío, y lo está. Solo una persona leyendo la salida se da cuenta de que al cliente no se le está diciendo absolutamente nada del producto que está pensando comprar.

Encontrado en el sitio

<img src="/img/product-img-04.jpg" alt="product-img-04.jpg">

Cómo se corrige

<img src="/img/product-img-04.jpg"
     alt="Navy wool scarf, folded, showing the ribbed weave">

Sobre el overlay de accesibilidad instalado en esta tienda

La tienda tiene instalado un widget overlay. Hicimos la auditoría completa dos veces, una con el widget activo y otra con él desactivado, y los 37 problemas son idénticos en ambas: el widget no corrigió ninguno. Además añadió uno, porque su propio botón de apertura no tiene nombre accesible y está contado en F-02. No es una crítica a la decisión de instalarlo; es lo que mostraron las pruebas.

Qué encontró la prueba automática y qué no

axe-core encontró 14 de los 37 problemas. Los otros 23 salieron de probar a mano con lector de pantalla y teclado. Esa proporción es normal, y es la razón por la que un escaneo no es una auditoría: las reglas automáticas son buenas en lo que una máquina puede medir —un atributo que falta, una relación de contraste, un id duplicado— y ciegas ante si un nombre significa algo, si el foco puede salir de un diálogo o si el mensaje de error de verdad ayuda. F-01 y F-06 son los ejemplos más claros: uno es invisible para el escáner y el otro queda registrado por él como correcto.

Alcance, límites y qué no probamos

Qué pasa a continuación

Ver el certificado de muestra correspondiente →

Tu declaración de accesibilidad (extracto del borrador)

Compromiso. Demo Store S.L. se compromete a hacer accesible shop.demostore-example.com conforme a la Directiva (UE) 2019/882 y a la norma armonizada EN 301 549.

Situación de cumplimiento. Este sitio web es parcialmente conforme con WCAG 2.1 nivel AA. «Parcialmente conforme» significa que algunas partes del contenido no cumplen del todo la norma de accesibilidad.

Contenido no accesible. El aviso de cookies no se puede manejar con teclado (WCAG 2.1.2). Varios controles no tienen nombre accesible (WCAG 4.1.2). Los errores de formulario no se anuncian (WCAG 4.1.3). Resolución prevista: 31 de julio de 2026.

Vía de contacto. Si encuentras una barrera en este sitio, escribe a accesibilidad@demostore-example.com. Respondemos en 10 días hábiles.

La declaración entregada está completa, fechada y lista para publicar; este extracto enseña las partes que salen de la auditoría. Dice «parcialmente conforme» porque el día de la auditoría eso era lo cierto. Se reescribe en la reverificación.

Documento de muestra. shop.demostore-example.com, Demo Store S.L. y todos los hallazgos, cifras y fechas de este informe son ficticios y existen únicamente para mostrar el formato del informe que entrega EAA Comply. No se representa ningún cliente, sitio ni auditoría reales. EAA Comply es un servicio técnico de auditoría independiente, no una autoridad pública ni un organismo de certificación. Un informe real se elabora sobre tu código en producción y su contenido será distinto.

© 2026 EAA Comply — ← Volver a eaacompliance.com · hello@eaacompliance.com