Ajuster les composants pour répondre aux 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 pour le contraste des couleurs.

Avant de commencer

Rôle requis : admin

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 foncées 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 des 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 WCAG 2.1.

Le nombre total de violations d’accessibilité par composant est indiqué sur la page du panneau de modification.

Procédure

1. 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 crochets modifiables disponibles pour le composant sélectionné.

   

2. Vous pouvez sélectionner l’icône pour afficher une description de l’avertissement.

   Figure 1. Avertissement relatif à l’accessibilité

   

3. Comme indiqué dans le message d’avertissement, vous pouvez sélectionner l’icône en forme de crayon pour améliorer le problème de contraste.

   Figure 2. Éditeur de composants

   

4. 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.

   

5. 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.

   

6. Lorsque vous avez terminé vos modifications et que le symbole d’avertissement d’accessibilité n’est plus visible, sélectionnez Enregistrer les modifications.
   Par exemple, une fois que vous avez sélectionné une couleur qui passe la violation du rapport de contraste, le panneau d’avertissement devient vert dans le sélecteur de couleurs.