Todas las fichas de investigación
Fecha: 14 de octubre de 2026. Alcance: el hub y las tres herramientas (Horalis Crecimiento, Coste de vida, Inflación), construidas como se publican. WCAG 2.2 AA es la base de la norma europea EN 301 549.
Resultado: lo que se puede comprobar con herramientas y con un navegador cumple, tras corregir lo que se encontró (abajo). Falta la prueba con lectores de pantalla reales y con personas: sin ella, la auditoría no está completa (ver «Lo que falta»).
Qué se comprobó y cómo
25 páginas (22 en español y las portadas en inglés):
- hub: portada, metodología, privacidad, aviso legal, condiciones, principios, acerca de y hoja de ruta;
- Crecimiento: al abrir, con el resultado, Probar mi plan, Cómo funciona, Tus datos, Acerca de y Condiciones;
- Coste de vida: sus dos vistas y Tus datos;
- Inflación: la herramienta y Tus datos.
Cada página, con todos sus desplegables abiertos, en cuatro modos: 360 px claro, 360 px oscuro, 1366 px claro y 1366 px oscuro. Chromium, con las preferencias de movimiento reducido.
| Criterio | Cómo | Resultado |
|---|---|---|
| Todos los de nivel A y AA que se pueden automatizar (contraste 1.4.3, nombres 4.1.2, etiquetas 1.3.1 y 3.3.2, idioma 3.1.1 y 3.1.2, títulos 2.4.2…) | axe-core 4.10.3, reglas wcag2a, wcag2aa, wcag21a, wcag21aa y wcag22aa | 0 fallos en las 25 páginas y los 4 modos |
| Teclado (2.1.1, 2.1.2, 2.4.3) | Tab por toda la página (499 paradas en total) hasta volver a un elemento ya visitado | Todo se alcanza; ninguna trampa |
| Foco visible (2.4.7) | En cada parada: contorno o sombra visibles | En todas |
| Foco no oculto (2.4.11, nuevo en 2.2) | En cada parada: nada fijo encima del elemento | En todas, tras la corrección 1 |
| Tamaño del objetivo (2.5.8, nuevo en 2.2) | Cada enlace, botón, campo y resumen: 24 × 24 px como mínimo (salvo un enlace dentro de una frase) | Sí. Los botones de opción tienen 18–20 px, pero su etiqueta, que también los activa, mide 44 px. El campo de archivo oculto (1 × 1 px) se usa desde su botón visible |
| Reajuste (1.4.10) | A 320 px de ancho: sin desplazamiento lateral de la página | 0 px en todas |
| Espaciado del texto (1.4.12) | Interlineado 1,5, letras 0,12 em, palabras 0,16 em, párrafos 2 em, a 320 px | 0 px de desplazamiento lateral, tras la corrección 3 |
| Estructura | Un h1, main, header, footer, enlace «Saltar al contenido», lang de la página | En todas |
Además, los tests de cada herramienta ya comprueban en cada build:
- el contraste AA de cada texto en los dos modos;
- objetivos de 44 × 44 px y campos de 16 px en Crecimiento;
- que nada se mueve con el movimiento reducido;
- que el diseño no se desplaza mientras carga (CLS 0);
- que los colores del gráfico se distinguen con cualquier tipo de visión del color.
Coherencia visual. Las cuatro webs usan los mismos colores, la misma letra (la del sistema) y los mismos espacios de seed-kit (tokens.css, base.css, chrome.css). La cabecera y el pie son el mismo modelo, dibujado igual en HTML y en React (un test los compara).
Lo que se encontró y se corrigió
- Foco tapado en la tabla de datos de la metodología (2.4.11). A 360 px, la primera columna de la tabla quedaba fija al desplazarla de lado y tapaba los enlaces de las licencias. Corregido: en esa tabla la primera columna no queda fija.
- Enlaces sueltos de menos de 24 px (2.5.8): el enlace de cada herramienta en la metodología, su ficha de investigación y las huellas para espejos en «Cómo comprobar una copia». Ahora miden 44 px, y los de la tabla, 24 px.
- Un título que desbordaba con el texto más espaciado (1.4.12): «Condiciones de uso», a 320 px. Corregido: los títulos parten las palabras largas, con guion, y el texto largo (direcciones, «Persoonsgegevens») también.
- El enlace «Metodología» dentro de la línea de la versión no llegaba a 44 px en Crecimiento (su test de objetivos lo detectó). Pasó a la lista de enlaces del pie, como los demás.
Lo que falta (necesita a personas)
- Lectores de pantalla reales: NVDA con Firefox (Windows), VoiceOver con Safari (macOS e iOS) y TalkBack con Chrome (Android). Tareas:
- Crecimiento: elegir la pregunta, escribir las cantidades, elegir un ejemplo, oír el resultado, abrir Probar mi plan;
- Coste de vida: elegir un país y oír lo que hace falta;
- Inflación: cambiar el país y oír la frase;
- el hub: descargar el .zip, enviar un comentario.
- Firefox y Safari: la auditoría solo usó Chromium.
- Personas con discapacidad que usen las herramientas con sus propios medios. El principio «Para todos» del hub ya lo dice como pendiente.
- El neerlandés se construye, pero está oculto: no se auditó aparte. Usa las mismas páginas y estilos.
- Una declaración de accesibilidad pública, que el principio «Europeo de verdad» promete. Este informe es su base. Falta publicarla en el hub con un canal para comunicar barreras: el de comentarios sirve.
Cómo repetirla
hub/scripts/a11y-audit.mjs hace todo lo de arriba con Playwright. axe-core no es una dependencia del repositorio: se instala aparte y se dice dónde está.
npm install --prefix /tmp/axe axe-core@4.10.3
# Construye antes los cuatro sitios (npm run build en cada uno).
AXE=/tmp/axe/node_modules/axe-core/axe.min.js node --experimental-strip-types hub/scripts/a11y-audit.mjs informe.jsonUn cambio de diseño que toque el foco, los tamaños o el texto debería repetirla.