Ajuster un composant pour qu’il réponde aux normes d’accessibilité

Ajuster un composant pour qu’il soit conforme aux Règles pour l’accessibilité des contenus Web (WCAG) 2.1. Lorsque vous modifiez un composant et Générateur de thèmes que vous voyez un symbole d’avertissement, cela indique que le composant ne respecte pas les directives en matière de contraste des couleurs.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

Lorsque vous modifiez un composant dans Générateur de thèmes, vous pouvez rencontrer un symbole d’avertissement ( ), qui indique que le composant n’est pas conforme aux Règles pour l’accessibilité des contenus Web (WCAG) 2.1 en matière de contraste des couleurs. 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 3:1. Ce rapport détermine les contrastes entre les couleurs d’écran plus claires et plus sombres et leur relation avec l’interface utilisateur. Le premier chiffre indique le niveau de couleurs vives et le deuxième chiffre indique le niveau relatif de couleurs sombres. Le seuil de 3:1 offre une visibilité optimale aux utilisateurs malvoyants. Pour plus d’informations, consultez le site W3C Recommendation pour les WCAG 2.1.

Le nombre total d’infractions en matière d’accessibilité est indiqué sur le badge numéroté rouge ( ) à côté du panneau de l’inspecteur d’accessibilité.

Procédure

1. À partir de la page Éditeur, accédez aux violations d’accessibilité de l’une des deux manières répertoriées dans le tableau suivant.

   Option	Description
   À partir de l’inspecteur d’accessibilité	Sélectionnez l’icône Inspecteur d’accessibilité ( ) pour afficher une liste de composants présentant des erreurs d’accessibilité. Un badge rouge affiche le nombre de problèmes d’accessibilité dans votre thème. Sélectionnez l’avertissement d’accessibilité Symbole permettant d’afficher une description de l’avertissement pour l’état du composant que vous souhaitez améliorer. Sélectionnez l’icône en forme de crayon (icône de en regard de l’état du composant que vous souhaitez améliorer. Remarque : La page Éditeur de composants s’affiche et le panneau de style configurable affiche les crochets modifiables disponibles pour le composant sélectionné.
   À partir du menu Styles des composants	Sélectionnez l’onglet Édition . Sélectionnez un composant qui affiche le symbole d’avertissement d’accessibilité. Dans le panneau de style configurable, sélectionnez le symbole d’avertissement d’accessibilité pour afficher une description de l’avertissement. Comme indiqué dans le message d’avertissement, vous pouvez sélectionner l’icône du crayon (icône pour améliorer le problème de contraste. Remarque : La page Éditeur de composants s’affiche et le panneau de style configurable affiche les crochets modifiables disponibles pour le composant sélectionné.

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

   

3. Sélectionnez le lien dans l’avertissement pour résoudre le problème de contraste.
   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 toutes vos modifications à la couleur d’origine.

   

4. 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 ne respecte pas le taux de contraste, le symbole d’avertissement devient vert dans le sélecteur de couleurs.