QA · Buscador de reservas

Página de laboratorio. Contiene fallos sembrados a propósito para puntuar herramientas de auditoría. No refleja la calidad del resto del sitio.

Esta es la misma búsqueda de disponibilidad que hay en /reservar/, pero rota a propósito. El buscador bueno pasa axe-core sin una sola violación; este trae ocho defectos, cada uno aislado en su bloque data-qa.

Cuatro de los ocho los encuentra un motor de reglas sobre el DOM en reposo. Los otros cuatro —el calendario que no se puede usar con el teclado, los filtros sin agrupar, los resultados que se sustituyen sin avisar y el error marcado solo con un borde de color— solo aparecen si alguien conduce el navegador de verdad.

Buscador de disponibilidad — versión de laboratorio

Esta sección reproduce, a propósito y con defectos, el buscador de disponibilidad del Hotel Casa Ferrer (Carrer de Santa Anna, 14, 43003 Tarragona). No realiza ninguna búsqueda real contra el sistema de reservas: los resultados que aparecen abajo son de ejemplo, para una estancia del 12 al 15 de octubre de 2026. Cada bloque contiene exactamente un fallo de accesibilidad sembrado a propósito.

Fallos sembrados en esta página

• res-01 — El campo de fecha de entrada no tiene ningún nombre accesible: la etiqueta es un <span> suelto, sin <label for>, sin aria-label, sin title y sin placeholder. Debería saltar la regla label de axe, en el input de fecha del primer bloque.
• res-02 — El calendario propio son <div onclick> sin role, sin tabindex y sin manejador de teclado: no se puede seleccionar ningún día usando solo el teclado. Ninguna regla de axe lo detecta; hay que navegar el calendario con Tab para comprobarlo.
• res-03 — El grupo de tres casillas de servicios (terraza o balcón, bañera, vistas exteriores) no está dentro de un <fieldset> con <legend>, aunque cada casilla sí tiene su <label for> correcto. Ninguna regla de axe lo detecta.
• res-04 — El campo de huéspedes solo lleva el atributo title="Huéspedes" como etiqueta, sin <label> ni aria-label. Debería saltar label-title-only (best-practice, no WCAG).
• res-05 — La tarjeta de la habitación Doble Superior Balcó es un <button> entero que contiene dentro un enlace «Ver la habitación», que también se puede enfocar. Debería saltar nested-interactive en esa tarjeta.
• res-06 — El selector de tipo de habitación usa role="tablist" pero sus hijos son <div> sin role="tab". Debería saltar aria-required-children.
• res-07 — El precio de la Junior Suite Modernista se muestra en latón (#B08A4A) sobre crema (#F5F0E6) a 14 px, con un contraste aproximado de 2,6:1. Debería saltar color-contrast.
• res-08 — Dos fallos de aviso: (a) el botón «Aplicar filtros» sustituye el contenido de la lista de resultados sin ningún aria-live ni aviso; (b) el mensaje de error de fechas solo se marca con un borde rojo, sin texto ni role="alert". Ninguna regla de axe detecta ninguno de los dos.