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 n’est pas conforme aux directives de contraste des couleurs.

Avant de commencer

Rôle requis : ui_builder_admin

Pour en savoir plus sur les rôles granulaires, reportez-vous à la section Granular admin roles.

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 de recommandation du W3C pour 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 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 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 l’éditeur de composants pour obtenir plus d’informations sur la résolution du problème.

   

3. Sélectionnez l’un des liens dans l’avertissement pour résoudre le problème de contraste.
   Le sélecteur de couleurs s’ouvre.

   Remarque :

   Vous pouvez sélectionner le curseur Masquer les choix inaccessibles dans le sélecteur de couleurs pour limiter les choix de couleurs aux couleurs identifiées comme accessibles, conformément aux directives WCAG (Web Content Accessibility Guidelines).
4. Facultatif : Sélectionnez le symbole d’annulation pour rétablir la couleur d’origine de vos modifications, si nécessaire.

   

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