Informe de accesibilidad de ejemplo
Este ejemplo estático muestra el tipo de informe que puede generar nuestro escáner automático: hallazgos concretos, referencias WCAG, el contexto afectado y orientaciones que tu equipo puede adaptar.
Hallazgos claros y listos para actuar
Los informes muestran el selector afectado, la gravedad, la correspondencia WCAG y las páginas afectadas para que un desarrollador decida qué corregir primero.
Hallazgo de ejemplo: falta el texto alternativo
HTML: <img src='logo.png'> Hallazgo: una imagen informativa no tiene alternativa textual. WCAG: 1.1.1 Contenido no textual.
Orientación de ejemplo
El informe puede sugerir añadir un atributo alt con sentido, por ejemplo <img src='logo.png' alt='Company name logo'>. Sigue siendo tarea de tu equipo revisar si el texto es preciso en su contexto.
Más allá de la automatización
El informe también marca las comprobaciones que requieren revisión manual, como un orden de foco lógico, un texto alternativo con sentido y el comportamiento en los distintos estados de interacción.
Ejemplo de contexto anotado
Cuando está disponible, el informe puede mostrar el contexto de la interfaz afectada junto al resultado de la regla, para que los equipos relacionen un hallazgo automático con la página que deben inspeccionar.
1.4.3 Contrast (Minimum)
Fix any of the following: Element has insufficient color contrast of 2.94 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Ensure that text has a contrast ratio of at least 4.5:1 against its background color to be legible for people with moderately low vision.
Detalles técnicos
Marcado que falla → corrección de ejemplo
<a href="/about" class="nav-link text-gray-400 bg-white">About Us</a><a href="/about" class="nav-link text-gray-700 bg-white">About Us</a>Corrección de ejemplo: una guía para tu código, no se aplica a tu sitio.
Leer la guía de la regla en wcagc: color-contrastLeer la guía de axe: 1.4.3(se abre en una pestaña nueva)