Article Transformez la compassion en action en évitant ces 8 erreurs de conception accessible

La conception accessible respecte le caractère unique de tous les individus, quels que soient leur âge et leurs capacités. Cela commence par reconnaître que tout le monde n'est pas comme vous.

Afin de mieux servir les différents utilisateurs, il est impératif de comprendre et d'empathie avec toutes sortes de personnes. Le respect des directives WCAG 2.0 AA rend le contenu accessible à un plus large éventail de personnes handicapées, y compris la cécité et les troubles de la vision, la surdité et la perte auditive, les troubles d'apprentissage, les limitations cognitives, les mouvements limités, les troubles de la parole ou la photosensibilité. Pour vous assurer que vous servez chaque utilisateur qui visite votre site Web, évitez ces huit erreurs de conception accessibles.

1. Pièges à clavier

Certaines personnes qui utilisent des technologies d'assistance s'appuient sur des actions visibles à l'écran. Une bonne conception garantit donc que tout le contenu lié à la navigation est visible. Veillez à ordonner les éléments de manière logique (du haut à gauche au bas à droite) pour aider les utilisateurs à comprendre le contenu et à faire des choix éclairés concernant la navigation.

Des astuces:

• Contenu principal : envisagez de fournir aux utilisateurs un moyen d'ignorer facilement la navigation de niveau supérieur pour accéder au contenu principal.
• Modèles d'interface utilisateur : suivez la sémantique des modèles courants tels que les attributs Toggle, Tabs, Tables, Modal Windows et ARIA.
• Utilisation du survol : ne masquez pas le texte ou les actions derrière un état de survol. Si un utilisateur au clavier uniquement ne peut pas voir qu'un contenu/boutons existe, il ne peut pas naviguer dans la page.

Bons liens de saut Exemple #1

Bons liens de saut Exemple #2

2. Contraste de couleur insuffisant

Un contraste de couleurs insuffisant affecte la capacité des personnes à recevoir des informations visuellement. Assurez-vous qu'il y a suffisamment de contraste entre le texte et son arrière-plan pour garantir la lisibilité du texte. Le rapport de contraste entre le texte et l'arrière-plan du texte doit être au minimum de 4,5 pour 1. Cependant, si votre texte fait au moins 24 pixels ou 19 pixels en gras, le minimum tombe à 3 pour 1.

Des astuces:

• Palettes de couleurs : faites attention aux couleurs primaires. De plus, gardez à l'esprit les exigences de contraste des couleurs lors du choix des couleurs.
• Ne vous fiez pas uniquement à la couleur : utilisez des combinaisons de forme, de couleur et de texte (pas seulement une seule) pour transmettre le sens et être cohérent. Fournissez au moins deux indicateurs afin que les personnes qui ne peuvent pas facilement distinguer les couleurs puissent toujours comprendre votre contenu.
• Exceptions : Texte, images de texte, images et logos qui ne sont pas nécessaires pour comprendre la signification du contenu ou qui sont de la pure « décoration ».

Exemple de contraste insuffisant

3. Texte dans les images

Évitez d'utiliser des images de texte destinées à être lues. Utilisez du texte réel stylisé avec CSS plutôt qu'une présentation de texte basée sur des images. Dans les situations où des images de texte doivent être utilisées, le texte alternatif doit contenir le même texte présenté dans l'image.

Des astuces:

• Diagrammes, graphiques, tableaux : utilisez du texte réel dans les visualisations de données. Si le texte réel n'est pas possible, une représentation textuelle des informations essentielles véhiculées par l'image est essentielle. Ex : description longue ou vue de liste.
• Exceptions : Logos, éléments de marque et graphiques qui ont de bonnes alternatives de texte descriptif.

Exemple de bon texte dans l'image

4. États de focus cachés

Les états de focus aident les utilisateurs à naviguer et à comprendre où ils se trouvent. Ne les cachez jamais. Les états de focus sont importants pour les utilisateurs de clavier. Cela les aide à comprendre où ils se trouvent sur une page. Pour tester votre site, essayez de parcourir votre page avec des tabulations et trouvez votre objectif.

Des astuces:

• États de focus : si vous supprimez les états de focus par défaut, assurez-vous de les remplacer par quelque chose qui fonctionne mieux que ce que votre navigateur propose.
• États d'entrée : pensez à ce qui arrive aux étiquettes lorsque vous vous concentrez à l'intérieur d'une entrée.
• Actions de la page : Définissez clairement les effets secondaires ciblés des actions.

États de focus cachés

Bons états de concentration

5. Structure hiérarchique déroutante

Créez des relations claires entre le contenu perceptible et celui qui peut être déterminé par programmation. Concevez des pages qui ont un sens sémantiquement afin que les développeurs puissent les traduire de la conception au code et qu'un lecteur d'écran puisse déterminer la séquence de lecture correcte.

Des astuces:

• Sémantique : incluez les champs et les étiquettes obligatoires dans les formulaires. Créez des tableaux avec des en-têtes de colonne.
• Regroupements logiques : regroupez les éléments associés avec suffisamment d'espace ou de couleurs d'arrière-plan. Présentez les informations de manière séquentielle, telles que des diagrammes de processus ou des instructions étape par étape.
• Divulgation progressive : Conception pour la manipulation directe. Présentez les bonnes choses au bon moment. Exercez une divulgation progressive.
• Orientation : créez des repères cohérents pour la navigation. Utilisez des en-têtes pour créer des repères clairs dans la page.
• Cohérence : présenter des choses qui sont identiques de la même manière.
• Différencier : différencier les différents types de contenu.

Mauvaise hiérarchie

Bonne hiérarchie

6. Charge cognitive excessive

Communiquez clairement des informations faciles à comprendre. Concevez les informations de manière à ce qu'elles soient faciles à consommer pour les personnes atteintes d'un trouble déficitaire de l'attention avec hyperactivité (TDAH) et d'autisme ou de troubles du spectre autistique.

Des astuces:

• Soyez concis : utilisez des phrases courtes et des repères visuels pour séparer les informations. Ex : répertorier les groupes à l'aide de chiffres ou de puces.
• Minimisez la charge cognitive : créez un récit qui présente les informations au bon endroit et au bon moment. Évitez de présenter des paragraphes denses d'informations qui peuvent être divisés. Évitez les longues mesures de ligne.

7. Hyperliens indifférenciés

Les liens sont l'un des éléments les plus courants sur le Web et sont souvent essentiels pour naviguer sur les sites Web. Les liens doivent ressembler à des liens, et rien d'autre ne devrait le faire. Les utilisateurs peuvent être frustrés s'ils essaient de cliquer sur des phrases textuelles ou des graphiques qui ressemblent à des liens mais qui n'en sont pas. Les liens doivent avoir un sens hors contexte.

Des astuces:

• Soyez précis : utilisez des mots descriptifs pour les boutons au lieu d'une terminologie vague afin que le résultat soit prévisible.
• Liens non soulignés : le texte du lien doit avoir un rapport de contraste de 3:1 par rapport au texte non lié environnant.
• Ne vous fiez pas uniquement à la couleur : le lien doit présenter un "indicateur sans couleur" à la fois au survol de la souris et au clavier. Ex : ombres portées, échelle, transitions/transformations, changements de couleur ou soulignement.

Mauvais hyperliens

De bons hyperliens

8. Typographie illisible

La plupart des informations sur les sites Web sont communiquées sous forme de texte, de sorte que le type doit être lisible et lisible. Cela aide les personnes malvoyantes à distinguer facilement les personnages. Cela peut réduire la fatigue de la lecture pour une personne ayant un trouble d'apprentissage. Utilisez une typographie propre et simple avec un bon espacement. Appliquez un crénage et une interligne confortables pour vous assurer que le texte est facile à lire.

Des astuces

• Donnez le contrôle aux utilisateurs : n'empêchez pas les utilisateurs de personnaliser leur propre expérience de lecture en modifiant la taille du corps du texte pour une taille de police plus petite. Pour ce faire, définissez la taille de la police sur 100 % et utilisez des tailles relatives pour établir une hiérarchie entre les titres. Le texte doit toujours être lisible à 200 %.
• Réduisez les soulignements, les italiques et les majuscules : ces formes de lettres sont plus difficiles à reconnaître et à lire.
• Aligner le texte au format long sur la gauche : créez des mises en page cohérentes avec des tracés linéaires que l'œil peut suivre.

Zoomer à 100 %

Redimensionnez votre texte. Vérifiez que votre ou vos pages sont accessibles et utilisables pour les utilisateurs malvoyants et malvoyants. Redimensionnez le texte et assurez-vous que tout fonctionne sur la page. Répétez l'opération jusqu'à atteindre un zoom de 200 %. Cela semble simple ? Il est.

Étapes pour vérifier votre typographie :

1. Ouvrez votre navigateur et redimensionnez le texte à 200 %. Cliquez sur Afficher, sélectionnez Zoom, puis cliquez sur Zoom avant (Ctrl/Cmd ++) pour agrandir la taille du texte.
2. Jetez un œil à la réaction du contenu à l'écran. Tout le contenu de la page doit toujours être lisible et aucune fonctionnalité ne doit être perdue.
3. Vérifiez si les interactions fonctionnent toujours, si le texte se chevauche, si le texte important a été tronqué ou si le texte a été coupé.

Zoomer à 200%

Des astuces:

1. Ouvrez votre navigateur et redimensionnez le texte à 200 %. Cliquez sur Afficher, sélectionnez Zoom, puis cliquez sur Zoom avant (Ctrl/Cmd ++) pour agrandir la taille du texte.
2. Jetez un œil à la réaction du contenu à l'écran. Tout le contenu de la page doit toujours être lisible et aucune fonctionnalité ne doit être perdue.
3. Vérifiez si les interactions fonctionnent toujours, si le texte se chevauche, si le texte important a été tronqué ou si le texte a été coupé.

Ressources

Environ une personne sur huit aux États-Unis a un handicap. Si la définition est élargie pour inclure ceux qui sont modérément altérés, ce nombre passe à près d'un sur cinq.

Le fait de ne pas accueillir un public aussi large limite l'impact positif qu'un site Web peut avoir sur votre entreprise, sans parler de la capacité de votre marque à trouver un écho auprès des gens et à inspirer confiance. Construire un site Web accessible qui peut être utilisé dans autant de navigateurs et par autant de personnes que possible peut aider votre entreprise, mais c'est aussi tout simplement la bonne chose à faire. Nous avons donc rassemblé quelques autres ressources sur le sujet.

• Découvrez pourquoi il est important pour les entreprises de tenir compte de l'accessibilité du Web (et d'éviter une poursuite en justice).
• Écoutez le podcast Solving for B° sur l'importance de l'accessibilité du Web.

Contraste des couleurs

• Vérificateur de contraste Web AIM
• Contrôleur de contraste coloriable

Structure

• Rubriques Carte Chrome Extension
• Bibliothèque de modèles de projet A11Y

Crédits

• Projet A11Y
• w3.org - WCAG 2.0
• w3.org - Normes et aperçu
• Usabilité.org
• Recherche sur l'accessibilité chez IBM
• Musées Carnegie de PittsburghDisney.com bonne hiérarchie