Laboratorio QA
Zona de pruebas. Las páginas que cuelgan de aquí llevan fallos sembrados a propósito para puntuar herramientas de auditoría. El resto del sitio no los tiene: sirve de control.
Casa Ferrer se usa como banco de pruebas. Las páginas públicas del hotel pasan axe-core en escritorio y en móvil sin una sola violación de WCAG 2.2 AA; estas diez páginas de laboratorio, en cambio, están rotas a propósito y cada defecto lleva su identificador.
La idea es sencilla. Si una herramienta encuentra cosas en el sitio público, son falsos positivos. Si no encuentra las de aquí, son falsos negativos. Cada página termina con la lista de lo que se sembró en ella, y cada defecto va envuelto en un contenedor con su atributo data-qa para poder localizarlo sin ambigüedad.
Accesibilidad visual
Contraste de color
Texto por debajo del umbral, titular grande justo por debajo de 3:1, enlace distinguido solo por color y contraste medido después de la opacidad.
Imágenes y texto alternativo
Imagen sin alt, alt inútil, alt igual al nombre de fichero, imagen que da 404 y un enlace cuyo único contenido es una imagen sin alt.
Estructura de encabezados
Dos h1, salto de h2 a h4, encabezado vacío y párrafos maquetados como titulares.
Interacción y marcado
Formularios accesibles
Campo sin etiqueta, etiqueta que apunta a un id inexistente, radios sin fieldset, select sin nombre y un autocomplete inválido.
Tablas de datos
Tabla sin cabeceras, cabeceras sin scope, tabla de maquetación, caption vacío y una zona con scroll que no se puede enfocar.
Enlaces y objetivos táctiles
«Leer más» repetido a destinos distintos, enlace vacío, div haciendo de botón y dos iconos de 18 píxeles pegados entre sí.
ARIA y roles
Atributo no permitido para el rol, referencia rota, botón enfocable dentro de aria-hidden, rol inventado e id duplicado.
Teclado y foco
tabindex positivo, foco invisible, carrusel solo con ratón, iframe sin título y contenido que solo aparece al pasar el ratón.
Reservas y disponibilidad
Buscador de disponibilidad
Copia rota del buscador de /reservar/: campo de fecha sin nombre, calendario de div sin teclado, filtros sin agrupar, botón dentro de un enlace, role="tablist" mal formado y resultados que cambian sin avisar.
Extracción de contenido
Trampas para extracción
Precio solo dentro de una imagen, email con entidades, teléfono partido en fragmentos, contenido inyectado por JavaScript, duplicado fuera de pantalla, JSON-LD malformado, cifras con formato español y un noscript que contradice a la página.
Cómo usarlo
Apunta la herramienta a esta página y deja que siga los enlaces, o dale el sitemap, que las incluye todas. Para medir falsos positivos, pásale las páginas públicas del hotel: portada, habitaciones, restaurante, tienda y el resto.
Los identificadores de los defectos (contraste-01, form-03, scr-06…) son los mismos que aparecen en el atributo data-qa del HTML y en la lista del pie de cada página, así que se puede casar automáticamente lo que la herramienta reporta con lo que hay sembrado.