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.
Publié le 14 nov. 2024
web-accessibilite-banniere.webp

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.

computer screen ratio

Contraste de couleurs insuffisant

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.

Comment observer le problème de contraste et le corriger ?

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 :

  • Un contraste minimum de 4,5:1 est recommandé pour les textes de taille normale.
  • Un contraste de 3:1 pour les textes en gras ou de grande taille.

Testez la lisibilité de votre contenu sur divers écrans (ordinateur, smartphone, tablette) et dans différentes conditions d’éclairage.

website blog image

Texte alternatif des images manquant

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.

Détecter les balises alt manquantes et les corriger

Il existe 2 méthodes d’identification des images sans texte alternatif :

  • Pour observer les balises alt sur des pages identifiées, vous pouvez utiliser des outils d’audit d’accessibilité telle que l’extension chrome WAVE.
  • Pour détecter les balises alt manquantes d’un site web entier, nous vous invitons à utiliser un outils de crawl tels que Screaming Frog.

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="").

Demandez votre pré-audit UX-UI

Votre site respecte t-il les règles d'accessibilité ? Obtenez un diagnostic et identifiez vos pistes d'optimisation UX UI.

accessibilité liée aux boutons site internet

Accessibilité des éléments interactifs : formulaires, liens et boutons

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.

Détecter et corriger les éléments sans étiquette ou intitulé descriptif

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.

hierarchie des titres accessibilité web

Structure et hiérarchie de contenu

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.

Détecter les problèmes de hiérarchie de contenu et les résoudre

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.

  • <h1> pour le titre principal de la page (utilisé une seule fois par page),
  • <h2> pour les sous-titres principaux,
  • <h3> pour les sous-sections, etc.
Vous avez un projet de création de site web ? Obtenez un devis gratuitement

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.

clavier accessibilite

Contenus non adaptés aux raccourcis clavier

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.

Comment détecter les contenus non adaptés aux raccourcis clavier et les résoudre

  • Parcourez votre site avec le clavier en utilisant uniquement la touche Tab et la touche Entrée pour vérifier que tous les éléments interactifs sont accessibles et fonctionnels. Les éléments doivent apparaître dans un ordre logique et être clairement identifiables par un focus visible (une surbrillance).
  • Ajoutez un style de focus clair pour tous les éléments interactifs (par exemple, en CSS, :focus { outline: 2px solid #000; }). Cela permet aux utilisateurs de suivre visuellement leur progression sur la page.
  • Assurez-vous que les utilisateurs peuvent sortir facilement de chaque élément interactif, comme un menu déroulant ou une boîte de dialogue (pop-up), en appuyant sur Échap ou Tab.
  • Évitez également les éléments qui capturent le focus, comme des carrousels ou des fenêtres modales sans moyen de les fermer au clavier.
  • Pour contrôler l’ordre de navigation, l’attribut tabindex peut être utilisé, en gardant cependant une organisation naturelle. Les attributs ARIA (comme aria-expanded ou aria-controls) peuvent indiquer aux lecteurs d’écran l’état ou la fonctionnalité des éléments.

Découvrez nos autres articles de blog

Éco-conception Web chez Inforca : Vers un Développement Web Durable

Nous intégrons l'éco-conception dans nos projets pour réduire l'impact environnemental tout en optimisant l'accessibilité.
Voir plus

Comment anticiper l’arrivée de Google SGE ?

Découvrez Google Search Generative Experience et ses impacts sur le moteur de recherche avant son lancement en France
Voir plus