Accessibilité

GCM a des préférences d'accessibilité empilées sur deux niveaux : chaque utilisateur peut régler l'application à ses propres besoins (taille de police, contraste, mouvement, police dyslexique, etc.), et les administrateurs peuvent définir des valeurs par défaut de l'organisation qui s'appliquent à toute personne qui n'a pas personnalisé les siennes. La même page gère les deux — la section utilisateur en haut, la section administrateur en bas.

Le module d'accessibilité est un module de fonctionnalité, il doit donc être activé dans Modules pour que la page apparaisse dans la barre latérale.

Ouvrir la page d'accessibilité

Cliquez sur Accessibilité dans la barre latérale (ou ouvrez-la depuis Paramètres → Accessibilité — la page s'affiche à l'identique depuis les deux points d'entrée). Le formulaire est divisé en quatre sections destinées à l'utilisateur, plus une section administrateur en bas.

Carte d'aperçu en direct

La carte en haut de la page affiche un texte d'exemple, des boutons et des liens en utilisant vos préférences actuelles en attente. À mesure que vous cochez les bascules en dessous, l'aperçu se met à jour en temps réel pour que vous puissiez voir l'effet avant de sauvegarder. L'habillage réel de l'application se met également à jour immédiatement — les modifications en attente s'appliquent au DOM au fur et à mesure que vous les faites.

TIP

Si une préférence rend l'application illisible, cliquez sur Annuler dans l'en-tête de page (qui apparaît dès que vous avez des modifications non enregistrées) pour revenir en arrière. La préférence est mise en tampon dans l'état en attente jusqu'à ce que vous cliquiez sur Sauvegarder — vous pouvez donc expérimenter en toute sécurité.

Taille visuelle

Échelle de l'interface

Un sélecteur à quatre options (Par défaut, Grand, Plus grand, Très grand) qui met à l'échelle tout dans l'interface. Par défaut, suit le zoom du navigateur ; augmentez-la si 100 % paraît petit.

L'échelle affecte les tailles de police, les marges intérieures, les hauteurs de boutons et les tailles d'icônes proportionnellement — la mise en page ne casse pas, elle grandit simplement.

Confort de lecture

Hauteur de ligne

Trois options — Normal, Détendu, Lâche. Augmente l'espace vertical entre les lignes de texte. Utile pour les utilisateurs dyslexiques ou fatigués.

Espacement des lettres

Activez pour ajouter ~0.05em entre les lettres. Certains utilisateurs dyslexiques trouvent cela plus facile à parcourir.

Texte en gras

Activez pour rendre tout le texte de corps semi-gras. Aide les utilisateurs malvoyants. Évitez de combiner avec un contraste élevé si cela rend le texte oppressant.

Police dyslexique

Bascule la police de corps vers OpenDyslexic — une typographie conçue pour les lecteurs dyslexiques, avec des bas alourdis et des formes de lettres désambiguïsées.

Couleur et contraste

Contraste élevé

Bascule vers un schéma de couleurs à contraste élevé — fonds noirs, texte blanc, surlignages plus brillants. Utile en pleine lumière ou pour les utilisateurs malvoyants.

Mode daltonien

Une liste déroulante avec des options pour la protanopie (cécité au rouge), la deutéranopie (cécité au vert) et la tritanopie (cécité au bleu). Chaque option applique un filtre CSS à toute l'application qui décale les teintes vers une gamme que le mode daltonien choisi peut distinguer. Choisissez Aucun pour désactiver.

Mouvement et navigation

Mouvement réduit

Désactive les animations et transitions dans toute l'application — transitions de page, ouvertures de menus déroulants, entrées de toast. Reflète la requête média prefers-reduced-motion du navigateur mais la surcharge explicitement. Utile pour les utilisateurs avec des troubles vestibulaires.

Mettre en évidence les liens

Souligne chaque lien dans l'application et utilise une couleur plus brillante. Aide les utilisateurs qui utilisent le balayage périphérique pour naviguer.

Focus amélioré

Remplace l'anneau de focus par défaut par un anneau plus épais et plus contrasté. Visible sur chaque élément interactif. Essentiel pour les utilisateurs au clavier.

Grand curseur

Agrandit le curseur système au survol à l'intérieur de l'application. Fonctionne sur les navigateurs basés sur Chromium et Safari. Firefox ne prend pas en charge le dimensionnement personnalisé du curseur, donc la bascule n'a aucun effet là-bas — le texte de description le mentionne.

Sauvegarder les préférences utilisateur

Cliquez sur Sauvegarder les modifications dans la barre d'en-tête (ou en bas du formulaire). L'état en attente est committé dans user_accessibility_preferences et la prochaine fois que vous vous connecterez, les mêmes préférences s'appliqueront.

Si vous changez d'avis, cliquez sur Annuler pour revenir à ce qui a été sauvegardé la dernière fois sur le serveur. Le DOM se met à jour à cet état.

Vous pouvez aussi cliquer sur Réinitialiser aux valeurs par défaut de l'organisation en bas pour supprimer entièrement vos préférences au niveau utilisateur — le chargement de page suivant utilise ce que l'administrateur a défini comme valeurs par défaut. Utile si vous avez expérimenté et que vous voulez repartir à zéro.

Valeurs par défaut de l'organisation (administrateurs uniquement)

La section administrateur apparaît sous un séparateur. Ce sont les valeurs par défaut qui s'appliquent à tout utilisateur qui n'a pas défini ses propres préférences. Elles prennent effet pour les nouveaux utilisateurs à la première connexion, et pour les utilisateurs existants qui ont réinitialisé aux valeurs par défaut.

Le panneau des valeurs par défaut de l'organisation est plus petit que le panneau utilisateur — seules les valeurs par défaut les plus demandées sont exposées :

• Échelle de l'interface
• Contraste élevé
• Mouvement réduit
• Texte en gras

Les valeurs par défaut sont sauvegardées au fur et à mesure que vous basculez (pas de bouton de sauvegarde séparé — updateOrgDefault écrit immédiatement dans org_accessibility_defaults). Les préférences propres d'un utilisateur surchargent toujours la valeur par défaut de l'organisation lorsqu'elles sont définies.

WARNING

Changer une valeur par défaut de l'organisation ne surcharge pas les utilisateurs qui ont déjà personnalisé — ils gardent leurs propres préférences. La valeur par défaut n'affecte que les utilisateurs qui n'ont encore rien choisi, ou qui ont cliqué sur Réinitialiser aux valeurs par défaut de l'organisation.

Comment les préférences sont appliquées

Le hook useAccessibilityPrefs lit trois sources et les résout dans l'ordre de priorité :

1. Préférences sauvegardées de l'utilisateur (user_accessibility_preferences)
2. Valeurs par défaut de l'organisation (org_accessibility_defaults)
3. Valeurs par défaut du système (valeurs saines codées en dur)

La préférence résolue est appliquée au DOM en ajoutant des classes à l'élément <html> (a11y-scale-large, a11y-high-contrast, etc.) et en définissant des propriétés CSS personnalisées. Les classes utilitaires Tailwind réagissent alors à celles-ci — data-[a11y=high-contrast]:bg-black et ainsi de suite.

Cela signifie que les préférences se chargent avant le premier rendu — il n'y a pas de flash de contenu non stylé même lors d'une connexion fraîche.

Ce qui est sauvegardé où

• user_accessibility_preferences — une ligne par utilisateur. Colonnes pour chaque préférence (ui_scale, line_height, letter_spacing, etc.). La RLS est scopée sur auth.uid().
• org_accessibility_defaults — une ligne par organisation. Colonnes pour le sous-ensemble de préférences qui ont des valeurs par défaut au niveau organisation. La RLS est scopée par current_org_id().

Pièges courants

« J'ai activé le contraste élevé et maintenant je ne vois plus les sélecteurs de couleur dans Image de marque. » Oui, c'est le compromis — le contraste élevé surcharge les couleurs personnalisées. Définissez votre image de marque d'abord, puis activez le contraste élevé.

« J'ai changé la police dyslexique mais mes PDF de reçus utilisent toujours la police par défaut. » Les PDF sont rendus côté serveur et ne reprennent pas les préférences d'accessibilité de l'utilisateur. Seul le rendu in-app est affecté.

« Le mouvement réduit ne désactive pas l'animation de toast. » Une petite poignée de micro-animations essentielles (le spinner de chargement, le glissement de la barre de modifications non enregistrées) ignorent le mouvement réduit parce que les retirer enlèverait du retour utile. Tout le reste respecte la bascule.

« Ma valeur par défaut d'organisation pour le contraste élevé ne s'est pas appliquée à un collègue. » Il a déjà défini sa propre préférence (même implicitement — la première connexion fige les valeurs par défaut de l'organisation à ce moment-là). Il peut cliquer sur Réinitialiser aux valeurs par défaut de l'organisation pour récupérer la nouvelle valeur par défaut.

Étapes suivantes

• Image de marque — choisir des couleurs compatibles avec le contraste élevé.
• Modules — l'accessibilité est un module de fonctionnalité ; activez-le ici d'abord.