A11Y PRO Tests · Sitio demo

Catálogo de pruebas de accesibilidad

Errores de accesibilidad, en directo

Esta página contiene fallos deliberados de accesibilidad (WCAG). Lanza el bookmarklet A11Y PRO Tests desde la sección Bookmarklets, ejecuta el test indicado en cada sección y observa cómo señala los problemas con marcadores, hallazgos y referencias al criterio.

Creado ❤ por Diego Javier Mena Amado

A11Y PRO · Findings 23 tests FAIL REVIEW OK FAIL 2 fails 1 review 19 ok WCAG 2.2

PPerceivable

La información debe poder percibirse: contraste, alternativas, estructura y adaptación a pantalla.

Contrast

1.4.3 / 1.4.11

Abre Contrast: evalúa texto (1.4.3), value y ::placeholder en inputs/textareas, y contraste no textual 3:1 (1.4.11) en bordes de controles e iconos SVG interactivos sin texto. En las filas grises (fondo con imagen/gradiente), usa el selector de color de la fila para muestrear el fondo y resolver el ratio en vivo.

Casos de muestra

Deben marcarse en rojo (fallo AA 1.4.3 y 1.4.11)

Gris claro sobre blanco: contraste insuficiente para texto normal.

Gris sobre blanco en texto grande que aún no llega a 3:1.

No deben marcarse (pasan AA)

Texto normal oscuro sobre blanco.

Texto grande gris que pasa el umbral 3:1 por ser grande.

Blanco sobre azul de marca

Deben marcarse en gris (revisar — fondo con imagen/gradiente, con selector de color manual)

Texto sobre un gradiente: usa el selector de color en la fila para resolver el ratio.

Image alt

1.1.1

Abre Image alt: sin alt en rojo; en naranja las sospechas de experto (alt como nombre de archivo, palabra redundante «imagen/foto», alt muy largo, alt repetido entre imágenes, figcaption que podría cubrir un alt ausente, imagen dentro de enlace/botón sin nombre, background-image: url(...) en contenedor vacío e iconos de fuente i/span.icon-* sin aria-hidden ni role="img"); decorativa en azul; con alt en verde con la fuente del nombre.

Casos de muestra

Headings

1.3.1

Abre Headings: el outline de la página es limpio salvo estos casos deliberados (salto de nivel, H1 duplicado, heading dentro de control, rol sin nivel, aria-level contradictorio y oculto para AT). Los dos últimos (clase sr-only) son invisibles pero SÍ disponibles para AT — patrón legítimo que debe aparecer en el outline sin marcarse como oculto.

Casos de muestra

Título principal (H1)

Título principal (H1)

Subtítulo que salta a H3

Subtítulo correcto (H2)

Heading por rol sin aria-level

H2 con aria-level=5 (contradice la etiqueta)

Navegación de productos (solo lectores de pantalla)

Acciones rápidas de la sección (solo lectores de pantalla)

Lists

1.3.1

Abre Lists: el li huérfano sale en rojo y las sospechas en naranja; las listas correctas (ul, ol, dl) salen en verde.

Casos de muestra
  • Elemento válido
  • Otro elemento válido
  1. Paso ordenado uno
  2. Paso ordenado dos
Término
Definición del término
  • li fuera de una lista
  • Text spacing · Resize text · Zoom 200%

    1.4.12 / 1.4.4

    Abre Text spacing, Resize text o Zoom 200%: el estilo bloqueado por el autor, el recorte de contenido (con preview del texto perdido), el bloqueo de zoom en el meta viewport (user-scalable=no/maximum-scale) y los elementos fijos que sobredimensionan el viewport se señalan con su causa.

    Casos de muestra

    1rem — este texto escala con Resize text ✓

    14px — queda «locked», no escala ✗

    Caja de altura fija con overflow:hidden: al 200% el texto se recorta y se reporta «clips content».

    Este párrafo fija line-height:1.15 !important — el espaciado WCAG no puede aplicarse (hallazgo "locked" en Text spacing).

    Este párrafo usa font-size:14px — no escala en modo rem (hallazgo locked en Resize text).

    Caja fija con overflow oculto — el contenido se pierde al agrandar (recorte)

    Contenido largo que se recorta cuando el texto crece: la segunda y tercera línea desaparecen bajo el overflow:hidden de esta caja de altura fija, evidencia directa de pérdida de contenido al aplicar espaciado o resize.

    Reflow + Orientations · Responsive

    1.4.10 / 1.3.4

    Abre Responsive o Reflow: en los marcos estrechos la franja fija desborda (scroll-x con magnitud), el riel de tarjetas es scroll interno permitido (azul) y el badge de rango muestra el breakpoint activo de cada marco.

    Casos de muestra
    Franja fija de 720px — desborda el viewport en marcos estrechos (scroll-x con magnitud en px).

    Riel de tarjetas con scroll propio (hallazgo azul, contenido 2D permitido)

    Card 1
    Card 2
    Card 3
    Card 4
    Card 5
    Card 6

    OOperable

    La interfaz debe poder operarse: navegación, foco, objetivos táctiles y landmarks.

    Landmarks

    2.4.1 / 1.3.1

    Abre Landmarks: la página tiene header/nav/main/footer correctos (incluido el skip link de arriba); este segundo nav carece de nombre accesible y se marca para revisar.

    Casos de muestra

    Target size

    2.5.8 / 2.5.5

    Abre Target size: cada objetivo recibe anillo y fila tag — W×Hpx. Píldoras: fails (rojo, bajo 24×24 y choca con vecinos), AA ≥24 y AAA ≥44 en verde, spacing (turquesa — exento por separación), inline (gris — excepción en línea), overlaps (magenta). Los toggles del panel filtran hallazgos, evalúan AAA y acotan a la capa activa.

    Casos de muestra

    Cluster pegado — los círculos de 24px se tocan

    Pequeños pero separados ≥10px — exentos por espaciado (no se marcan)

    Enlace inline pequeño dentro de texto (excepción inline): enlace — no se marca.

    Focus order · Tabindex

    2.4.3 / 2.4.7 / 4.1.2 / 2.5.3

    Abre Focus order y pulsa Tab: el div focusable sin role y los tabindex positivos rompen el orden esperado; el botón en aria-hidden se numera en rojo (tabulable pero invisible a AT); los controles en inert o <details> cerrado NO se numeran porque el navegador los salta; el tabindex=5 duplicado lleva badge propio. Tabindex audita el atributo completo — positivos, valores inválidos, redundantes en nativos, focalizables sin rol, aria≠visible, -1 fuera de roving y destinos de foco por script.

    Casos de muestra
    Focusable sin role ni nombre
    Enviar
    Acción correcta
    Focalizable con nombre, sin rol
    Enlace sacado del tab order
    Destino de skip link (foco por script)
    Details cerrado
    Falso botón con onclick sin foco de teclado (2.1.1)

    UUnderstandable

    El contenido debe ser comprensible: idioma correcto y campos con etiqueta e instrucciones.

    Page language

    3.1.1 / 3.1.2

    Abre Page language: el lang de página sale con su veredicto y cada lang de parte se clasifica — vacío en rojo; en naranja: mal formado (es_ES), uso privado (x-), grandfathered (i-), obsoleto — usa he, parece código de país — meant ja y subetiqueta primaria desconocida; en verde los válidos (incluidos ISO 639-2/3 como ast, vía Intl.DisplayNames).

    Casos de muestra

    Párrafo con lang="zzz" — subetiqueta primaria desconocida.

    This paragraph is correctly tagged as English.

    日本語の段落 — código de país, debería ser ja.

    עברית — código obsoleto, debería ser he.

    tlhIngan Hol — etiqueta de uso privado.

    Guion bajo en vez de guion — tag mal formado.

    Paragrafu n'asturianu — ISO 639-2/3 válidu.

    Código grandfathered (i-).

    Atributo lang vacío.

    Labels & instructions

    3.3.2

    Abre Labels & instructions: fallos en rojo (sin etiqueta, nombre aria que no contiene la visible); revisiones en naranja (pista débil, autocomplete ausente, formato sin instrucción, required unilateral, etiqueta duplicada, label huérfano).

    Casos de muestra                      

    Fieldset · legend

    3.3.2 / 1.3.1

    Abre Fieldset · legend: el grupo sin legend sale en rojo; el correcto en verde con el nombre que anuncia AT (name: …). También detecta radios sin name, role=radio/checkbox sin aria-checked, grupos sin nombre y redacción del legend (aria que lo anula, title-only, duplicados, pinta de key i18n).

    Casos de muestra
    Con legend

    Error identification

    3.3.1 / 3.3.3

    Abre Error identification: fallos en rojo (aria-invalid="true" sin mensaje de error programático, aria-errormessage apuntando a id inexistente o vacío); revisiones en naranja (aria-errormessage sin aria-invalid="true", mensaje genérico sin sugerencia de corrección 3.3.3, mensaje visual de error huérfano sin enlazar); en verde los campos con error correctamente vinculado.

    Casos de muestra
        Error   Introduce un número móvil válido de 9 dígitos.
    El código promocional ha caducado (mensaje de error visual huérfano sin vincular).

    RRobust

    El código debe ser robusto para tecnologías de asistencia: nombres accesibles y regiones live.

    Accessible name · keys

    4.1.2 / 2.5.3

    Abre Accessible name · keys: con el toggle «Include unnamed controls» salen en rosa los controles sin nombre; aria-label="" y aria-labelledby con ids inexistentes fallan en rojo; en naranja las keys i18n (o el patrón regex propio), el aria-label en genéricos (ignorado por AT) y el nombre aria que no contiene el texto visible.

    Casos de muestra enlace sin href

    Live regions

    4.1.3

    Abre Live regions: el inventario muestra cada región con su cortesía efectiva y banderas de experto — oculta a AT (aria-hidden, nunca anuncia), no renderizada (display:none), aria-live inválido, anuncio de carga residual («Loading…» quemado en el DOM: en navegación lineal se lee tras cargar) y anunciando carga mientras hay busy/skeleton. El log captura en vivo anuncios, flips aria-busy y marca · vaciado cuando la región se limpia tras anunciar — pulsa el botón de simulación para ver el ciclo completo.

    Casos de muestra
    Región live (polite)
    Región role=alert (assertive)
    aria-live con valor inválido
    Región no renderizada (display:none)
    Loading Proof of reserves

    LLab

    Interruptores para disparar condiciones dentro de los marcos de Responsive/Reflow.

    Flags de condiciones

    Los checkboxes reescriben la URL con query params y recargan — los iframes de los tests heredan los params, así la condición se reproduce dentro de cada marco.

    Casos de muestra

    Modal & drawer — capas activas

    2.4.3 / 4.1.2

    Patrón de diálogo modal estándar (role=dialog + aria-modal + backdrop + foco atrapado + fondo inerte). Con un test de delineado abierto (Headings, Landmarks…), abre una capa: los recuadros del fondo desaparecen y solo se marcan los elementos dentro de la capa. En Focus order el escaneo queda acotado al diálogo y Tab solo cicla dentro.

    Casos de muestra

    Shadow DOM

    1.1.1 / 1.3.1 / 4.1.2

    Un web component con shadow root abierto: dentro viven una imagen sin alt, un campo con aria-labelledby a un id dentro del shadow y un botón sin nombre. Los scans deben atravesar el shadow root (deepQSA/deepQueryAll) y resolver ids con el root correcto (byId) — si la herramienta ignora el shadow, estos hallazgos no aparecen.

    Casos de muestra

    Tablas · ARIA · Documento

    1.3.1 / 4.1.2 / 4.1.1

    Casos para los tests Tablas, ARIA relaciones y Documento: una tabla sin encabezados, una tabla bien formada con headers roto, un tablist vacío, un listitem huérfano, un role inválido, un aria-controls colgando y dos id duplicados. El título de esta página debería salir OK.

    Casos de muestra
    Cuenta nómina1.240,50 €
    Cuenta ahorro8.302,10 €
    Fondos4.915,00 €
    Operaciones recientes
    FechaConceptoImporte
    12/10Nómina+1.240,50 €
    10/10Recibo luz−64,20 €
    no-tab child
    orphan item
    invalid role
    unodos

    Bookmarklets

    Arrastra un botón a tu barra de marcadores para lanzar los tests en cualquier página. Esta página se sirve con no-store: tras un build, recarga y arrastra de nuevo para refrescar.

    Casos de muestra

    Abrir catálogo de bookmarklets Abre a11y-bookmarks.html (generado por npm run build) y arrastra cada bookmarklet a tu barra de marcadores. La página incluye el bookmarklet principal A11Y PRO Tests con los 22 tests del panel.