Matriz Técnica de Cumplimiento de Accesibilidad Web (WCAG 2.1 AA)

Todas las imágenes informativas y fotografías de recintos culturales (patio Art Déco del Museo de Arte Popular en el Hero, Museo del Templo Mayor, Palacio de Bellas Artes, mediaciones y talleres sensoriales) cuentan con textos alternativos contextuales y descriptivos ('alt'). Los iconos SVG decorativos tienen 'aria-hidden="true"' para no confundir a los lectores de pantalla. El imagotipo institucional y el isotipo conmemorativo de los 13 Años conmutan automáticamente a vectores monocromáticos en blanco puro en modo de alto contraste oscuro.

Uso de landmarks HTML5 nativos (<header>, <nav>, <main>, <article>, <aside>, <footer>) y etiquetas <label htmlFor> vinculadas explícitamente a cada input del formulario.

El color nunca es el único medio para transmitir información. Los errores incluyen icono de advertencia ⚠ y texto descriptivo; los enlaces cuentan con la opción de forzar subrayado permanente.

Paleta oficial de identidad (Azul Pantone 285 C #2273ba y Rojo Pantone 1795 C #dc2235) con contraste superior a 4.8:1 en textos normales y > 6:1 en hover. La sección Hero emplea un degradado accesible y tarjetas con contraste verificado > 10:1. Incluye modo 'Alto Contraste Oscuro' (#000000) y 'Alto Contraste Claro'.

El diseño soporta zoom nativo del navegador hasta un 200% sin ruptura de contenedor ni desplazamiento bidimensional. Además, la Barra A11y ofrece selector de tamaño Normal (100%), Grande (115%) y Muy Grande (130%).

El contenido refluye fluidamente sin necesidad de desplazamiento horizontal en pantallas de hasta 320 píxeles de ancho (o zoom 400% a 1280px).

Todos los elementos interactivos y sus bordes activos tienen un contraste de al menos 3:1 respecto a los colores adyacentes.

El interlineado base es de 1.6, con espaciado de párrafos y letras ajustado. El modo Dislexia eleva el interlineado a 1.85 y el letter-spacing a 0.06em sin truncar cajas de texto.

100% de la funcionalidad es operable mediante teclado estándar (Tab, Shift+Tab, Enter, Espacio, flechas).

El foco nunca queda atrapado. El menú móvil se puede abrir y cerrar con la tecla Escape o navegando hacia adelante/atrás fluidamente.

Se respeta la directiva 'prefers-reduced-motion: reduce' del sistema operativo y la Barra A11y incluye un botón para desactivar animaciones al 100%.

Componente <SkipLink> que permanece oculto visualmente hasta recibir el foco del teclado, permitiendo saltar directamente a '#main-content'.

El orden del foco en el DOM coincide exactamente con el orden visual y lógico de lectura.

Ningún enlace usa textos genéricos como 'haz clic aquí' o 'leer más' sin contexto. Todos incluyen su destino claro o cuentan con atributos 'aria-label' descriptivos.

Regla global ':focus-visible' con anillo de 3px de grosor, color institucional de alto contraste (#2273ba o amarillo en modo oscuro) y offset de 3px.

Configurado como '<html lang="es">' en el archivo raíz app/layout.tsx.

El menú de navegación y las regiones estructurales se presentan en el mismo orden relativo y con idéntico etiquetado en las 7 páginas del sitio.

Si un campo obligatorio no se llena o el correo es inválido, el sistema muestra el error en texto claro, con 'role="alert"' para que el lector de pantalla lo anuncie de inmediato.

Todos los campos cuentan con etiqueta visible persistente (no solo placeholders que desaparecen al escribir) e indican claramente qué datos son obligatorios (*).

Los mensajes de validación sugieren la corrección exacta (ej. 'Por favor ingresa un correo con formato válido: nombre@ejemplo.com').

Uso de atributos 'aria-expanded', 'aria-controls', 'aria-pressed' y 'aria-label' que informan en tiempo real el estado y función exacta a las tecnologías asistivas.

Implementación de 'aria-live="polite"' y 'role="status"' que anuncia automáticamente los cambios a los lectores de pantalla sin interrumpir la lectura en curso.