Accesibilidad
GCM tiene preferencias de accesibilidad en dos capas: cada usuario puede ajustar la aplicación a sus propias necesidades (tamaño de fuente, contraste, movimiento, fuente para dislexia, etc.), y los administradores pueden establecer predeterminados de la organización que se aplican a cualquiera que no haya personalizado los suyos. La misma página maneja ambos — la sección de usuario está arriba, la sección de administrador abajo.
El módulo de accesibilidad es un módulo de funciones, así que debe estar activado en Módulos para que la página aparezca en la barra lateral.
Abre la página de accesibilidad
Haz clic en Accesibilidad en la barra lateral (o ábrela desde dentro de Configuración → Accesibilidad — la página se muestra idéntica desde ambos puntos de entrada). El formulario está dividido en cuatro secciones orientadas al usuario más una sección de administrador en la parte inferior.
Tarjeta de vista previa en vivo
La tarjeta en la parte superior de la página muestra texto, botones y enlaces de ejemplo usando tus preferencias pendientes actuales. A medida que activas conmutadores debajo, la vista previa se actualiza en tiempo real para que puedas ver el efecto antes de guardar. La interfaz real de la aplicación también se actualiza inmediatamente — los cambios pendientes se aplican al DOM a medida que los haces.
TIP
Si una preferencia hace que la aplicación sea ilegible, haz clic en Descartar en la cabecera de la página (que aparece tan pronto como tienes cambios sin guardar) para revertir. La preferencia se almacena en estado pendiente hasta que hagas clic en Guardar — así puedes experimentar con seguridad.
Tamaño visual
Escala de UI
Un selector de cuatro opciones (Predeterminado, Grande, Más grande, El más grande) que escala todo en la interfaz. Por defecto coincide con el zoom del navegador; súbelo si el 100% se siente pequeño.
La escala afecta tamaños de fuente, espaciado, alturas de botones y tamaños de íconos proporcionalmente — así el diseño no se rompe, simplemente se agranda.
Comodidad de lectura
Altura de línea
Tres opciones — Normal, Relajada, Holgada. Aumenta el espacio vertical entre líneas de texto. Útil para usuarios con dislexia o fatiga.
Espaciado de letras
Actívalo para agregar ~0.05em entre letras. Algunos usuarios con dislexia encuentran esto más fácil de leer.
Texto en negrita
Actívalo para hacer todo el texto del cuerpo semi-negrita. Ayuda a usuarios con baja visión. Evita combinarlo con alto contraste si hace que el texto se sienta abrumador.
Fuente para dislexia
Cambia la fuente del cuerpo a OpenDyslexic — una tipografía diseñada para lectores con dislexia, con bases pesadas y formas de letras desambiguadas.
Color y contraste
Alto contraste
Conmuta para cambiar a un esquema de colores de alto contraste — fondos negros, texto blanco, resaltados más brillantes. Útil con luz brillante o para usuarios con baja visión.
Modo daltónico
Un desplegable con opciones para protanopia (ciego al rojo), deuteranopia (ciego al verde) y tritanopia (ciego al azul). Cada opción aplica un filtro CSS a toda la aplicación que desplaza los matices a un rango que el modo daltónico elegido puede distinguir. Elige Ninguno para desactivar.
Movimiento y navegación
Movimiento reducido
Deshabilita animaciones y transiciones en toda la aplicación — transiciones de página, apertura de menús desplegables, deslizamientos de toast. Refleja la consulta de medios prefers-reduced-motion del navegador pero la sobrescribe explícitamente. Útil para usuarios con trastornos vestibulares.
Resaltar enlaces
Subraya cada enlace en la aplicación y usa un color más brillante. Ayuda a los usuarios que usan exploración periférica para navegar.
Foco mejorado
Reemplaza el anillo de foco predeterminado con uno más grueso y de mayor contraste. Visible en cada elemento interactivo. Esencial para usuarios de teclado.
Cursor grande
Hace el cursor del sistema más grande al pasar dentro de la aplicación. Funciona en navegadores basados en Chromium y Safari. Firefox no admite el tamaño personalizado del cursor, así que el conmutador no tiene efecto allí — el texto descriptivo lo nota.
Guardar preferencias de usuario
Haz clic en Guardar cambios en la barra de cabecera (o en la parte inferior del formulario). El estado pendiente se confirma en user_accessibility_preferences y la próxima vez que inicies sesión, se aplican las mismas preferencias.
Si cambias de opinión, haz clic en Descartar para revertir a lo último guardado en el servidor. El DOM vuelve a ese estado.
También puedes hacer clic en Restablecer a los predeterminados de la organización abajo para eliminar tus preferencias a nivel de usuario por completo — la próxima carga de página usa lo que el administrador haya establecido como predeterminado. Útil si has estado experimentando y quieres empezar de nuevo.
Predeterminados de la organización (solo administradores)
La sección de administrador aparece debajo de un separador. Estos son los predeterminados que se aplican a cualquier usuario que no haya establecido sus propias preferencias. Tienen efecto para nuevos usuarios en el primer inicio de sesión, y para usuarios existentes que han restablecido a los predeterminados.
El panel de predeterminados de la organización es más pequeño que el panel de usuario — solo se exponen los predeterminados más solicitados:
- Escala de UI
- Alto contraste
- Movimiento reducido
- Texto en negrita
Los predeterminados se guardan a medida que los activas (sin botón de guardar por separado — updateOrgDefault escribe inmediatamente en org_accessibility_defaults). Las preferencias propias de un usuario siempre anulan el predeterminado de la organización cuando se establecen.
WARNING
Cambiar un predeterminado de la organización no anula a los usuarios que ya han personalizado — mantienen sus propias preferencias. El predeterminado solo afecta a los usuarios que aún no han elegido nada, o que pulsan Restablecer a los predeterminados de la organización.
Cómo se aplican las preferencias
El hook useAccessibilityPrefs lee tres fuentes y las resuelve por orden de prioridad:
- Preferencias guardadas del usuario (
user_accessibility_preferences) - Predeterminados de la organización (
org_accessibility_defaults) - Predeterminados del sistema (valores razonables codificados)
La preferencia resuelta se aplica al DOM agregando clases al elemento <html> (a11y-scale-large, a11y-high-contrast, etc.) y estableciendo propiedades CSS personalizadas. Las clases utilitarias de Tailwind luego reaccionan a esas — data-[a11y=high-contrast]:bg-black y así sucesivamente.
Esto significa que las preferencias se cargan antes del primer renderizado — no hay parpadeo de contenido sin estilo incluso en un inicio de sesión nuevo.
Qué se guarda dónde
user_accessibility_preferences— una fila por usuario. Columnas para cada preferencia (ui_scale,line_height,letter_spacing, etc.). RLS limita el alcance aauth.uid().org_accessibility_defaults— una fila por organización. Columnas para el subconjunto de preferencias que tienen predeterminados a nivel de organización. RLS limita el alcance porcurrent_org_id().
Errores comunes
"Establecí alto contraste y ahora no puedo ver los selectores de color en Marca." Sí, esa es la concesión — el alto contraste anula los colores personalizados. Configura tu marca primero, luego activa el alto contraste.
"Cambié la fuente para dislexia pero mis PDFs de recibos siguen usando la predeterminada." Los PDFs se renderizan del lado del servidor y no recogen las preferencias de accesibilidad del usuario. Solo se afecta el renderizado en la aplicación.
"El movimiento reducido no deshabilita la animación del toast." Un pequeño puñado de micro-animaciones esenciales (el indicador de carga, el deslizamiento de la barra de cambios sin guardar) ignoran el movimiento reducido porque eliminarlas elimina retroalimentación útil. Todo lo demás respeta el conmutador.
"Mi predeterminado de organización para alto contraste no se aplicó a un colega." Ya han establecido su propia preferencia (incluso implícitamente — los predeterminados del primer inicio de sesión capturan los predeterminados de la organización en ese momento). Pueden pulsar Restablecer a los predeterminados de la organización para incorporar el nuevo predeterminado.