Ajuster les composants pour respecter les normes d’accessibilité
Lorsque vous modifiez des composants dans Générateur de thèmes, vous pouvez rencontrer un symbole d’erreur ( 
) qui indique que les composants ne sont pas conformes aux WCAG 2.1 en matière de contraste des couleurs.
Avant de commencer
Rôle requis : administrateur
Pourquoi et quand exécuter cette tâche
Le rapport de contraste WCAG 2,1 qui Générateur de thèmes cible les variables de contenu et d’interface utilisateur est de 4:5:1. Ce rapport détermine les contrastes entre les couleurs d’écran les plus claires et les plus sombres et leur relation avec l’interface utilisateur. Pour ceux qui ne sont pas familiers avec le rapport de contraste, le premier chiffre indique le niveau de couleurs vives et le second indique le niveau relatif de couleurs sombres. Le seuil 4:5:1 offre une visibilité optimale aux utilisateurs malvoyants. Pour plus d’informations, consultez le site de la Recommandation W3C pour les WCAG 2.1.
Le nombre total d’infractions à l’accessibilité par composant est indiqué sur la page du panneau d’édition.
Procédure
-
Dans l’onglet Styles de composant , sélectionnez un composant que vous utilisez et qui affiche le symbole d’avertissement d’accessibilité.
Le panneau de style configurable affiche les hooks modifiables disponibles pour le composant sélectionné. -
Vous pouvez sélectionner l’icône pour afficher une description de l’avertissement.
Figure 1. Avertissement relatif à l’accessibilité -
Comme indiqué dans le message d’avertissement, vous pouvez sélectionner l’icône du crayon pour améliorer le problème de contraste.
Figure 2. Éditeur de composants -
Sélectionnez le symbole d’avertissement d’accessibilité dans le panneau de style configurable pour obtenir plus d’informations sur la résolution du problème.
-
Sélectionnez l’un des liens dans l’avertissement pour corriger la couleur de remplissage de l’arrière-plan ou la couleur de l’icône.
Remarque :Une fois que vous avez enregistré les modifications apportées à l’un des crochets de couleur, un symbole d’annulation apparaît. Sélectionnez le symbole d’annulation pour rétablir la couleur d’origine de toutes vos modifications.
