Tarea 5 — Accesibilidad

[madkoding]

Tarea 5 — Modo Accesibilidad

Resumen: Implementar toggle de accesibilidad que aumente contraste, tamaños de fuente y reduzca animaciones

---

Descripción

Agregar un toggle de accesibilidad en el navbar (junto al de idioma y dark mode) que active un conjunto de mejoras de accesibilidad en todo el sitio. Al activarse, debe:

• Aumentar el contraste general (textos más oscuros sobre fondos más claros y viceversa)
• Incrementar el tamaño base de fuente (al menos 125%)
• Aumentar el espaciado entre líneas y párrafos
• Reducir o desactivar animaciones y movimientos (respetar prefers-reduced-motion)
• Agrandar blancos de elementos clickeables (botones, links, tarjetas)
• Agregar subrayado a todos los links para identificarlos sin depender del color

La preferencia debe persistir en localStorage y ser independiente del dark mode (pueden activarse ambos simultáneamente).

---

Alcance

Incluye:

• Toggle de accesibilidad en el navbar (ícono de persona/accessibility)
• Clase CSS .accessibility-mode en el body que active todas las mejoras
• Aumento de contraste en textos, fondos, bordes y elementos interactivos
• Incremento de fuente base (de 16px a 20px mínimo)
• Reducción/desactivación de animaciones (CSS @media (prefers-reduced-motion) + override)
• Subrayado persistente en todos los links
• Aumento de padding/margin en botones y elementos clickeables
• Persistencia en localStorage (vrton-accessibility)
• Independencia del dark mode (funciona en claro y oscuro)
• Estilos responsive

No incluye:

• Soporte para lectores de pantalla (se asume que el HTML semántico ya lo cubre)
• Traducción a lenguaje simple de los contenidos
• Cambio de tipografía a una de alta legibilidad (se mantiene la actual)
• Modo daltónico o filtros de color
• Navegación por voz

---

Criterios de Aceptación

1. El toggle de accesibilidad está visible en el navbar en todas las páginas públicas
2. Al activarlo, el tamaño de fuente base aumenta al menos un 25%
3. Todos los textos tienen contraste mejorado (ratio ≥ 7:1 para texto normal)
4. Las animaciones (hover, carrusel, flying hearts, scroll effects) se reducen o desactivan
5. Todos los links tienen subrayado visible
6. Los botones y elementos clickeables tienen padding aumentado
7. El espaciado entre líneas (line-height) aumenta a al menos 1.8
8. La preferencia persiste al recargar la página
9. El modo accesibilidad funciona correctamente combinado con dark mode
10. No hay regresión visual en modo normal cuando la accesibilidad está desactivada

---

Casos de Prueba

#	Caso	Pasos	Resultado Esperado
CP1	Toggle visible	Cargar cualquier página pública	El ícono de accesibilidad está en el navbar
CP2	Activar accesibilidad	Hacer clic en el toggle	Body recibe clase .accessibility-mode, fuente aumenta
CP3	Desactivar accesibilidad	Hacer clic en el toggle estando activo	Body pierde la clase, fuente vuelve a tamaño normal
CP4	Persistencia	Activar, recargar página	Modo accesibilidad sigue activo
CP5	Contraste mejorado	Activar modo, inspeccionar texto	Ratio de contraste ≥ 7:1
CP6	Links subrayados	Activar modo, ver cualquier link	Todos los links tienen text-decoration: underline
CP7	Animaciones reducidas	Activar modo, hover sobre botón	No hay animación de ripple ni transform
CP8	Carrusel sin animación	Activar modo, navegar carrusel	Las imágenes cambian sin transición animada
CP9	Flying hearts detenidos	Activar modo en Hero	Los corazones no se mueven o están ocultos
CP10	Botones más grandes	Activar modo, inspeccionar botón	Padding aumentado, área clickeable más grande
CP11	Line-height aumentado	Activar modo, ver párrafo	line-height ≥ 1.8
CP12	Combinación con dark mode	Activar dark mode + accesibilidad	Ambos modos funcionan simultáneamente

[fcarvajalbrown]

Levanto un choque que aparecio implementando esto, porque es una decision de diseno y no me corresponde tomarla solo.

El criterio 3 pide contraste 7:1 para texto normal. El blanco sobre el rojo de VRTon, #d33741, da 4.78. No hay forma de llegar a 7:1 manteniendo ese rojo: el texto blanco encima de los botones primarios se queda corto y no hay vuelta que darle.

Lo resolvi oscureciendo el rojo a #a52b33 unicamente dentro del modo accesible. Mantiene el tono, da 7.02, y fuera del modo el rojo de la marca queda intacto, asi que quien no active accesibilidad no ve ningun cambio de color.

Igual prefiero decirlo con todas sus letras en vez de que aparezca en la revision: dentro del modo accesible, el rojo corporativo no es exactamente el rojo corporativo. Es la unica salida si el criterio 3 se toma en serio.

La alternativa existe y es legitima: bajar la exigencia a AA 4.5:1 solo para los botones y dejar el rojo de marca sin tocar en ningun caso.

Diganme cual de las dos prefieren y lo dejo asi.

[fcarvajalbrown]

Vuelvo sobre esto porque quedo sin respuesta y el PR #10 ya esta arriba esperando.

La pregunta sigue siendo una sola y es de diseno, no tecnica: dentro del modo accesible, rojo oscurecido a #a52b33 para llegar a 7.02, o rojo de marca intacto y bajamos el criterio 3 a AA 4.5:1 en los botones. No hay una tercera salida.

Lo deje implementado con la primera, que es la que cumple el issue tal como esta escrito. Pasarlo a la segunda es una linea de CSS y lo hago el mismo dia en que me lo digan.

Mientras no haya respuesta sigo tomando el issue literal. Prefiero avisarlo ahora y no sorprender a nadie en la revision.

[motoko-section9]

Buena pregunta y bien planteada. Mi voto: bajar el criterio 3 a AA 4.5:1 solo para botones/acentos, y dejar el rojo corporativo intacto en todos los modos.

Razones:

• El rojo #d33741 es parte de la identidad de marca de VRTon. Cambiarlo en accesibilidad, aunque sea solo ahí, crea inconsistencia visual entre usuarios con y sin el modo activado.
• AA 4.5:1 para texto normal es el estándar WCAG 2.1 AA. El criterio 3 del issue pide AAA (7:1), que es un nivel extra que pocos sitios aplican a colores de marca.
• Si en el futuro alguien toma capturas del sitio en modo accesible y el rojo no coincide, van a preguntar si es un bug.

Dicho eso, si la decisión del equipo es mantener AAA, la implementación que hiciste con #a52b33 es correcta y limpia. Solo definirlo explícitamente en el issue como decisión consciente.

Powned by Motoko