Pega HTML o selecciona un archivo para obtener observaciones de accesibilidad. La revisión del teclado y del diseño renderizado debe hacerse en la interfaz.
Se ejecuta localmente en tu navegadorEsta auditoría de código fuente no puede inspeccionar diseño calculado, teclado, estados dinámicos ni el árbol de accesibilidad real de una aplicación en ejecución.
Usa los hallazgos como lista de revisión y prueba después la interfaz renderizada con teclado, árbol de accesibilidad del navegador y personas que usan tecnología asistiva.
Pega un documento HTML o un fragmento en el editor, o elige un archivo local, y pulsa Auditar localmente. El informe se construye solo a partir del marcado: ids duplicados, atributo lang ausente o vacío, falta de un landmark main, títulos H1 ausentes o repetidos, niveles de encabezado que se saltan un paso, imágenes sin atributo alt, controles sin label ni nombre accesible, botones y enlaces sin nombre, textos de enlace genéricos, tablas de datos sin celdas de encabezado, encabezados vacíos e iframes sin título.
El panel derecho responde a otra pregunta: la relación de contraste entre dos colores, calculada como la define WCAG. Ambos paneles funcionan dentro de esta pestaña, así que la página trabaja sin conexión y no se sube ningún marcado, archivo ni color.
Los avisos de revisión son defectos demostrables a partir del texto: un id que aparece dos veces, una imagen sin alt, un control sin label, aria-label, aria-labelledby ni title utilizable, un botón o un enlace sin nombre accesible, un encabezado vacío, un iframe sin título y un elemento con role=button que no recibe el foco del teclado. Un label que envuelve al control, el nombre por defecto que el navegador da a un input submit o reset y el alt de un input de tipo image cuentan como nombre, así que el marcado válido no se reporta.
Los avisos de información dependen del contexto: un documento sin landmark main, un orden de encabezados que se salta un nivel, un enlace cuyo texto completo es una frase como «click here» y una tabla sin celdas th. Merecen una revisión, pero no siempre son un error. Cuando no queda ningún aviso de revisión, el informe lo dice; eso describe esta lista de comprobación, no afirma que la página cumpla WCAG.
Cada color se convierte en luminancia relativa con la fórmula sRGB que usa WCAG (canal dividido por 255 y después / 12,92 o ((c + 0,055) / 1,055) ^ 2,4) y la relación es (L1 + 0,05) / (L2 + 0,05), de modo que negro sobre blanco es 21:1 y un color sobre sí mismo es 1:1. El orden de los dos valores no importa.
Los niveles mostrados son los umbrales de WCAG: 4,5:1 para texto normal (AA), 3:1 para texto grande y para componentes de interfaz y gráficos (AA), y 7:1 para texto normal en AAA. El tamaño de la fuente, el peso y el resultado renderizado no forman parte del cálculo, por eso la página indica el nivel alcanzado en lugar de un veredicto. Solo se aceptan valores hexadecimales de 3 o 6 dígitos; rgb(), HSL y los nombres de color reciben una indicación en vez de una relación.
La auditoría lee el marcado y nunca representa el documento. El contraste tal como se renderiza, el orden de foco, las trampas de teclado, los estados hover y focus, las regiones live, los cambios de estado ARIA, los subtítulos y todo lo que solo existe en una aplicación en marcha quedan fuera de su alcance. Las reglas automáticas cubren además solo una parte de WCAG: las pruebas con teclado y lector de pantalla, el zoom y el espaciado del texto siguen siendo manuales.
El panel de color comprueba un par cada vez y no conoce el tamaño de la fuente, así que toma el nivel como un aviso para inspeccionar el elemento real. Si un color no se puede interpretar, la fila de contraste del resumen vuelve a un guion y el mensaje bajo los campos indica el formato esperado.