Accesibilidad

Qué se ha comprobado, y con qué resultado

• Contraste del texto y de los controles. Cada color de la hoja de estilos lleva anotado su contraste al lado de la regla que lo usa. Los más ajustados son los bordes: el gris de los campos del formulario y del botón de menú da 3,59:1 sobre blanco, por encima del 3:1 que pide el criterio 1.4.11 para un control. El texto va muy por encima del 4,5:1 del criterio 1.4.3. El verde del botón de WhatsApp es el oscuro de la marca (7,67:1) y no el claro, que se quedaba en 1,98:1.
• El texto sobre las fotografías. En la portada hay dos bloques con una foto de fondo. Ahí el contraste no se estima: se calculó componiendo el velo sobre cada píxel de cada foto y midiendo el punto más claro que queda debajo del texto. Con el velo que llevan, el peor punto da 5,20:1 en la cabecera y 5,10:1 en la franja de «cómo trabajamos», por encima del 4,5:1 del criterio 1.4.3. Sin velo serían 1,03:1, es decir, ilegible.
• Tamaño de los objetivos táctiles (criterio 2.5.8, que pide 24 × 24 px). El botón del menú está fijado en 40 × 40 y no se encoge aunque la pantalla sea de 320 px; los enlaces del menú desplegado miden 41 px de alto y ocupan el ancho entero, así que lo que se pulsa es la fila; los botones del aviso de cookies, 44 px.
• Navegación con teclado. El primer elemento enfocable de cada página es un enlace para saltar la cabecera, que aparece al recibir el foco. Todo lo que se puede pulsar recibe un contorno de foco visible de 3 px, y sobre los fondos oscuros ese contorno se invierte a blanco para que se siga viendo.
• Contenido plegable sin JavaScript. Las preguntas frecuentes y la lista de poblaciones del pie usan <details>, que es HTML nativo: el texto está en la página aunque el bloque esté cerrado, así que un lector de pantalla lo encuentra igual y no depende de que ningún script llegue a cargarse.
• Formulario. Cada campo tiene su etiqueta asociada, los obligatorios están marcados en la propia etiqueta y el resultado del envío se anuncia en una región con role="status" que además recibe el foco, para que no haya que ir a buscarlo. El campo señuelo contra robots está oculto también para el lector de pantalla y fuera del orden de tabulación.
• Estructura. Un solo h1 por página y los encabezados en orden, sin saltos; el idioma declarado en <html lang="es">; el mapa de cobertura lleva el nombre de cada población en texto, no solo en el dibujo; y cada fotografía lleva un texto alternativo que describe lo que se ve en ella, no un relleno con palabras clave.
• Zoom y tamaño de letra. Los tamaños se expresan en unidades relativas, así que el texto crece si subes el tamaño de letra del navegador. Comprobado que a 320 px de ancho no aparece barra de desplazamiento horizontal.