Política de accesibilidad

1 Objetivo y alcance

Reducir las barreras de acceso a la información y funcionalidades de la plataforma, considerando la accesibilidad como una prioridad transversal de diseño y desarrollo, no como una mejora opcional.

Esta política aplica a todas las vistas y componentes de la plataforma Classia: catálogo de cursos, panel de usuario, formularios de inscripción, páginas institucionales y contenidos educativos.

2 Contraste de color (WCAG 1.4.3 / 1.4.6)

Todos los tokens de color del sistema de diseño (--color-text, --color-heading, --color-text-muted, etc.) están calibrados para garantizar un ratio de contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande, tanto en modo claro como en modo oscuro.

• Los colores de texto, encabezados y elementos interactivos cumplen WCAG AA.
• El modo oscuro cuenta con su propio conjunto de tokens redefinidos para mantener los mismos ratios de contraste sobre fondos oscuros.
• Los íconos y gráficos informativos cumplen con el criterio 1.4.11 (Non-text Contrast).

3 Navegación por teclado y foco visible (WCAG 2.4.3 / 2.4.7 / 2.4.11)

• Todos los elementos interactivos (enlaces, botones, campos de formulario, selectores) muestran un indicador de foco visible mediante :focus-visible, implementado con el token --color-focus (contorno de 3 px).
• Se incluye un skip-link («Saltar al contenido principal») visible al recibir foco, que permite a usuarios de teclado y lectores de pantalla omitir la navegación repetida.
• El orden de tabulación sigue el flujo visual lógico del documento.
• Los diálogos nativos (<dialog>) devuelven el foco al elemento disparador al cerrarse, respetando el ciclo de foco dentro del modal mientras está abierto.

4 HTML semántico y atributos ARIA (WCAG 1.3.1 / 4.1.2)

• Se utiliza HTML5 semántico: <main>, <nav>, <header>, <footer>, <section>, <article>, <aside>.
• Los formularios usan etiquetas <label> asociadas mediante for/ id o agrupación con <fieldset> y <legend>.
• Las imágenes decorativas llevan alt="" y las informativas llevan texto alternativo descriptivo. Los íconos SVG decorativos tienen aria-hidden="true".
• Los menús desplegables usan role="menu", role="menuitem" y aria-label. El menú de usuario usa aria-expanded para comunicar su estado.
• Las secciones con contenido se asocian a sus encabezados mediante aria-labelledby.
• El botón de modo oscuro actualiza su aria-label dinámicamente para reflejar la acción disponible («Cambiar a modo claro» o «Cambiar a modo oscuro»).

5 Modo oscuro y preferencias del sistema

Classia implementa un modo oscuro completo que puede activarse mediante el botón de la barra de navegación o de forma automática cuando el sistema operativo del usuario tiene configurada la preferencia prefers-color-scheme: dark.

• La preferencia se guarda en localStorage para persistir entre sesiones.
• Se aplica antes del primer pintado de la página (técnica anti-FOUC) para evitar parpadeos visuales molestos.
• Ambos temas cumplen con los ratios de contraste mínimos WCAG AA. Ningún contenido informativo se pierde al alternar entre modos.

6 Diseño adaptable (RNF-18)

• El diseño es fluido mediante CSS Grid y Flexbox con breakpoints definidos en 320 px, 360 px, 420 px, 720 px, 980 px y 1280 px.
• No existe desborde horizontal (horizontal overflow) en ninguna resolución probada. Las tablas de datos extensas se envuelven en contenedores con scroll horizontal controlado.
• Los tamaños de texto utilizan clamp() para escalar fluidamente.
• El sitio ha sido verificado en Chrome, Firefox, Safari y Edge en resoluciones desde 320 px hasta pantallas ultraanchas (1920 px+).
• Los objetivos táctiles tienen un tamaño mínimo de 44 × 44 px (WCAG 2.5.5).

7 Movimiento y animaciones (WCAG 2.3.3)

Todas las animaciones y transiciones respetan la media query prefers-reduced-motion: reduce. Cuando el usuario tiene configurada esta preferencia en su sistema operativo, las duraciones de animación se reducen a 1 ms, eliminando efectivamente el movimiento sin perder funcionalidad.

8 Revisión y herramientas

La accesibilidad se evalúa con las siguientes herramientas y metodologías:

• Auditoría automática con Lighthouse (Google Chrome DevTools).
• Inspección manual con navegación exclusiva por teclado (Tab, Shift+Tab, Enter, Escape, flechas).
• Verificación de ratios de contraste con WCAG Color Contrast Checker.
• Validación de HTML semántico con HTMLHint y W3C Validator.

La revisión no sustituye las pruebas con personas usuarias reales. El equipo de Classia está comprometido a iterar sobre los resultados de accesibilidad en cada sprint.

9 Reportar barreras de acceso

Si encontrás barreras de acceso, dificultades de uso o querés sugerir mejoras de accesibilidad, podés comunicarlo a través de la página de Contacto. Nos comprometemos a responder en un plazo razonable y a incorporar las mejoras necesarias.