Correction des problèmes de visibilité de la mise au point pour la conformité ADA et découvrir l’outil de test PowerMapper / blogs / perficient

Assurer une visibilité claire claire est essentielle pour l’accessibilité; Parfois, les utilisateurs contre visuellement et les navigateurs de clavier ont du mal à interagir avec le contenu Web. Ce blog explore les moyens pratiques de résoudre les problèmes de visibilité sur la concentration et d’améliorer l’expérience utilisateur.

Aperçu de la conformité ADA

La conformité ADA garantit que les sites Web sont accessibles aux personnes handicapées, promouvant l’inclusivité et l’équité. En suivant les directives WCAG 2.0 et le VERSER Principes (perceptibles, opérables, compréhensibles, robustes), les sites Web peuvent être rendus accessibles. Cela aide les entreprises à éviter que les problèmes juridiques améliorent l’expérience utilisateur, augmentent l’engagement et motive des actions comme les achats. De plus, les sites Web conformes à l’ADA améliorent le référencement, ce qui les rend cruciaux pour créer des sites Web réussis et conviviaux.

1. Perceptible

Rendre le contenu accessible à tous les sens (texte, images, vidéos) avec des alternatives telles que des légendes, des transcriptions ou des descriptions pour ceux qui ne peuvent pas voir ou entendre. Utilisez des attributs comme Aria-Babel, Alt et Track.

Exemple

2. Opérable

Assurer une navigation et une interaction faciles avec le contenu via le clavier, les contrôles de synchronisation, la gestion de la mise au point et une structure claire (titres, en-têtes, étiquettes).

Exemple

Le code de navigation navigable partagé dans le HTML ci-dessus se concentre sur les éléments de la liste de navigation lorsque la touche onglet est enfoncée.

3. Compréhensible

Pour une meilleure convivialité, utilisez un langage clair, étiquetez les liens pour former des champs et maintenez une navigation cohérente avec le HTML sémantique, les titres et les listes. Fournissez une capture d’écran de code pour plus de clarté.

Exemple

4. Robuste

Assurez-vous que votre site fonctionne bien avec les technologies d’assistance afin que tous les utilisateurs obtiennent le même contenu, qu’ils le lisent ou utilisent un lecteur d’écran (NVDA).

Problèmes et solutions liés à la mise au point du clavier

Pourquoi la mise au point du clavier est importante

La conformité ADA garantit que les sites Web sont accessibles à tous les utilisateurs, y compris ceux qui comptent sur des lecteurs de navigation de clavier ou d’écran. Un problème courant qui affecte l’accessibilité est la visibilité des indicateurs de mise au point (contours ou frontières) lorsque les utilisateurs naviguent à travers des éléments interactifs tels que des liens, des boutons, des listes déroulantes et des commandes de plage.

Le problème

Les styles CSS qui obscurcissent les anneaux de mise au point peuvent rendre difficile pour les utilisateurs de clavier uniquement d’identifier l’élément ciblé. Ce problème se pose souvent dans des navigateurs comme Chrome, Firefox et Internet Explorer, entraînant des difficultés de confusion et de navigation.

Le but

Assurez-vous que l’indicateur de mise au point sur les éléments interactifs (par exemple, les liens, les boutons et les listes déroulants) est clair et visible et répond aux directives d’accessibilité pour le contraste et la taille.

Pourquoi c’est crucial

Un indicateur de mise au point visible est nécessaire pour les utilisateurs qui ne peuvent pas utiliser une souris, les aidant à naviguer efficacement sur un site Web. Un contraste suffisant rend également l’anneau de mise au point visible pour les utilisateurs ayant des déficiences visuelles, assurant l’inclusivité pour tous.

Solutions pour surmonter les problèmes de contour

Les navigateurs fournissent automatiquement des indicateurs de mise au point pour les éléments interactifs, mais de nombreux développeurs les suppriment en utilisant le : Focus {Outline: Aucun; } Règle CSS. Ceci n’est recommandé que si vous le remplacez par un style de mise au point personnalisé. Les indicateurs de mise au point par défaut peuvent s’affronter avec la palette de couleurs et devenir difficiles à voir. Pour améliorer l’accessibilité, les indicateurs de mise au point doivent répondre à trois critères: le contraste des couleurs, la surface (taille) et la visibilité.

Indicateurs de mise au point sont des marqueurs visuels qui montrent quel élément est focalisé, ce qui est particulièrement utile pour la navigation au clavier. Le : Focus-visible La pseudo-classe ne peut appliquer les styles de mise au point que lorsque le clavier est utilisé.

Assurez-vous que l’anneau de mise au point a:

• Au moins 2px d’épaisseur autour de l’élément.
• Un rapport de contraste de 3: 1 entre les états focalisés et non focalisés.

Utilisez des outils comme le Vérificateur de contraste de couleur pour vérifier le contraste des couleurs.

Solution 1

Ajoutez un contour plus épais autour du bouton sur la mise au point du clavier, en passant la couleur du blanc au noir. C’est ce qu’on appelle la zone d’indication de mise au point, où l’indicateur de mise au point et la zone contrastée sont les mêmes. Le rapport de contraste ici est de 21: 1, qui dépasse les 3: 1 requis, répondant aux critères standard pour la visibilité de la mise au point.

*:focus-visible {
    outline: 2px solid #000;
}

Solution 2

Lorsque le bouton reçoit une mise au point du clavier, ajoutez un contour noir séparé. Cela crée une zone contrastée, ce qui fait que l’indicateur de mise au point se démarque davantage. Utilisez la propriété Outline-Offset pour ajouter de l’espace autour de l’élément.

*:focus-visible {
   outline: 2px solid #000;
   outline-offset: 2px;
}

Solution 3

Si le bouton change sa couleur de fond du bleu au noir lorsqu’il est concentré, la zone d’arrière-plan entière devient une zone contrastée. Le rapport de contraste des couleurs entre les états focalisés et non focalisés est de 4,68.

Vous pouvez choisir l’une de ces solutions en fonction des exigences d’indication de mise au point de votre projet. Testez-le avec un lecteur d’écran ou un outil d’accessibilité recommandé.

Note: L’épaisseur du contour peut être ajustée au-delà de 2px tant qu’elle répond aux critères d’indication de mise au point.

Outils recommandés pour les tests d’accessibilité

• Outils automatisés: Lighthouse (Chrome Devtools), vague, hache.
• Lecteurs d’écran: NVDA, mâchoires ou voix off.
• Vérificateurs de contraste de couleur: Vérificateur de contraste Webaim.
• Test du clavier: Naviguez sur votre site en utilisant uniquement le clavier

De nombreux développeurs utilisent des outils comme Lighthouse (Chrome Devtools), Wave et AX pour les tests d’accessibilité. Un nouvel outil sur le marché des tests d’accessibilité est le Powermapper Outil.

Vous pouvez en savoir plus sur Powermapper ci-dessous:

Outil d’accessibilité PowerMapper

Powermapper est un outil de test d’accessibilité qui vérifie les liens cassés, les erreurs d’orthographe, la compatibilité du navigateur, les problèmes de référencement, les normes Web et la conformité WCAG. Les problèmes d’accessibilité et d’utilisabilité ont un impact significatif sur l’expérience utilisateur, tandis que les problèmes de référencement peuvent nuire à la clientèle d’une entreprise et le rendre peu professionnel.

PowerMapper est un outil payant, et certaines organisations l’utilisent se conformer au Loi sur les Américains avec les handicaps (ADA). Le Ada est un droit civil qui garantit l’inclusivité pour tous les individus, en particulier ceux qui handicapés, dans la vie publique.

L’outil propose un essai gratuit de 30 jours, une version téléchargeable et une option Web pour scanner des sites Web et des pages pour les tests d’accessibilité.

Comment scanner une page en utilisant l’essai PowerMapper

1. Entrez le lien suivant dans la barre d’adresse de votre navigateur: https://www.powermapper.com/products/sortsite/try/
2. Une fenêtre s’ouvrira, similaire à celle ci-dessous
3. Dans la case de saisie «Essayez en ligne», entrez l’URL de la page que vous souhaitez scanner, puis cliquez sur le bouton «Scan Site Web»
4. Après quelques secondes de numérisation, un rapport de problèmes sera affiché, similaire à la capture d’écran ci-dessous
5. Après avoir cliqué sur un problème spécifique, il met en évidence le code HTML pertinent et fournit un lien de référence pour résoudre le problème
6. La capture d’écran ci-dessous montre un problème de visibilité au foyer.
7. De cette façon, vous pouvez consulter les problèmes de visibilité sur votre site Web. S’il est trouvé, réparez-les en utilisant les solutions de visibilité ci-dessus et sauvez le site.

Conclusion

En améliorant la visibilité de la concentration, en maintenant un ordre de concentration logique et en testant avec des outils d’assistance, les développeurs créent une expérience plus inclusive et conviviale. L’accessibilité profite à tous, ce qui fait du Web un meilleur endroit pour tous les utilisateurs.

Quelles mesures avez-vous prises pour améliorer l’accessibilité de la visibilité sur la concentration sur vos sites Web? Partagez vos réflexions dans les commentaires ci-dessous!