5 erreurs d'accessibilité qui affectent 90% des sites web
Les erreurs d’accessibilité privent une partie des internautes d’accéder à certains éléments du web. Découvrez nos solutions.
En 2023, une étude de WebAIM a révélé que près de 97 % des sites les plus populaires présentaient au moins une erreur d’accessibilité, ce qui illustre le manque de conformité aux normes en vigueur. En France, la conformité au Référentiel Général d’Accessibilité pour les Administrations (RGAA), qui découle de la Loi N° 2005-102, impose aux sites publics de respecter les exigences fixées par le World Wide Web Consortium (W3C), et spécifiées dans les Web Content Accessibility Guidelines (WCAG).
Cependant, de nombreux développeurs et concepteurs omettent ces normes d’accessibilité, croyant, à tort, que ces ajustements n’apportent que peu de bénéfices. Pourtant, en intégrant l’accessibilité dès la conception, ils optimisent aussi l’expérience utilisateur et améliorent la portée de leur site. Dans cet article, nous aborderons les 5 erreurs d’accessibilité les plus courantes et nous vous fournirons des solutions concrètes pour rendre votre site web plus accessible à tous.
Un contraste de couleurs insuffisant est l’une des erreurs d’accessibilité les plus répandues et représente un obstacle pour les utilisateurs ayant des troubles visuels (déficience visuelle, daltonisme).
En effet, lorsque la couleur du texte est trop proche de celle de l’arrière-plan, le contenu devient difficile à lire, voire illisible pour certains utilisateurs.
Pour vérifier le contraste de vos typographies, vous pouvez utiliser des outils en ligne qui permettent de vérifier le rapport de contraste entre la couleur du texte et celle de l’arrière-plan.
Nous vous conseillons l’outil en ligne Color Contrast Checker. De nombreux éditeurs de design, comme Figma et Adobe XD, proposent des plugins (comme Stark) pour vérifier le contraste dans les maquettes.
Si le contraste est faible, il est conseillé de modifier les couleurs pour atteindre les ratios recommandés :
Testez la lisibilité de votre contenu sur divers écrans (ordinateur, smartphone, tablette) et dans différentes conditions d’éclairage.
Le texte alternatif (ou « alt ») est un attribut qui sert à rendre les images accessibles aux aveugles ou malvoyants utilisant des lecteurs d’écran. Lorsqu'il est bien renseigné, il fournit une brève description de l’image.
En l'absence de texte alternatif, ces utilisateurs n’ont aucun moyen de comprendre ce que représente une image. Cela peut nuire à leur expérience de navigation et leur accès à l’information.
Il existe 2 méthodes d’identification des images sans texte alternatif :
L'écriture des textes alternatifs ne doit pas être hasardeuse. Pour chaque image informative, rédigez un attribut alt avec une description concise de ce qu'elle représente. Par exemple, pour une image d’une réunion d’équipe, un texte alternatif tel que "Réunion d'équipe autour d'une table".
Si une image est uniquement décorative et n’apporte aucune information supplémentaire, l’attribut alt doit être présent mais vide (alt="").
Votre site respecte t-il les règles d'accessibilité ? Obtenez un diagnostic et identifiez vos pistes d'optimisation UX UI.
Les champs de formulaire, liens et boutons sont des éléments interactifs clés d’un site web. Chacun d’entre eux nécessite des étiquettes ou descriptions pour être accessible à tous les utilisateurs.
Lorsqu’un champ de formulaire est dépourvu d’étiquette, ou lorsqu’un lien ou un bouton n’a pas d’intitulé descriptif, les utilisateurs de lecteurs d’écran peuvent se retrouver bloqués, sans comprendre la fonction ou la destination de ces éléments.
Les extensions de navigateur comme WAVE ou axe DevTools peuvent analyser vos pages web et signaler les champs, liens et boutons ayant des étiquettes ou des intitulés manquants. L'outil de crawl Screaming Frog peut aussi être configuré pour identifier certains éléments interactifs sans texte ou attributs ARIA.
Pour associer chaque champ à une étiquette, utilisez l’élément <label> pour chaque champ en associant l'attribut for du label à l’attribut id du champ correspondant. Par exemple :
<label for="nom">Nom</label> <input type="text" id="nom" name="nom">
Pour les formulaires nécessitant des étiquettes invisibles (comme une barre de recherche avec une icône de loupe), ajoutez un attribut aria-label pour fournir une étiquette accessible sans afficher de texte visible. Exemple :
<input type="search" aria-label="Recherche" placeholder="Entrez un mot clé">
Chaque lien et bouton doit comporter un texte décrivant sa fonction ou destination. Par exemple, au lieu d’un lien « En savoir plus », préférez « En savoir plus sur nos services ». Pour les éléments interactifs représentés uniquement par des icônes (comme des boutons de réseaux sociaux), ajoutez un attribut aria-label décrivant leur fonction.
Les placeholders, bien qu’acceptés par certains outils d’accessibilité, ne constituent pas une étiquette suffisante. Ils disparaissent dès que l’utilisateur commence à saisir des informations, créant ainsi de la confusion, surtout dans les formulaires complexes. Utilisez toujours une étiquette persistante pour chaque champ.
Une structure de contenu avec une hiérarchie de titres claire améliore l’accessibilité pour les utilisateurs de lecteurs d’écran et ceux qui naviguent avec le clavier.
Lorsqu’un site présente des balises de titres désorganisées, la navigation et la compréhension des informations sur la page entraîne une perte de repères (par exemple, un <h2> utilisé avant un <h1>). Cela nuit à l’expérience utilisateur et d'une façon plus globale au référencement naturel.
Des extensions de navigateurs telles que Website SEO Checker ou Web Developer permettent d’identifier les erreurs de structure dans vos balises de titres. Ces outils signalent les titres manquants, l’ordre incorrect des niveaux de titres et les balises de titres mal utilisées. Si vous souhaitez obtenir une analyse globale sur toutes les URL d’un site, nous vous conseillons d’utiliser le crawler Screaming Frog.
Les balises de titres s’utilisent de manière logique. Le contenu doit être organisé en respectant une hiérarchie ordonnée.
Demandez dès maintenant un devis personnalisé pour la création de votre site internet et obtenez une estimation détaillée des coûts.
La navigation au clavier permet aux utilisateurs de se déplacer sur un site en utilisant la touche Tab pour atteindre les éléments interactifs (liens, boutons, formulaires) et la touche Entrée pour activer ces éléments.
Certains utilisateurs ne peuvent pas utiliser de souris et naviguent à l’aide du clavier. Si un élément n'est pas accessible au clavier, il devient difficile, voire impossible, pour certains utilisateurs de l’utiliser.
