Une silhouette humaine noire court vers une forme humaine multicolore sur un écran.

L'importance de l'accessibilité des sites web

Lorsque de nombreuses personnes entendent le mot "accessibilité", elles pensent au texte "alt" et à pas grand-chose d'autre. En réalité, lors de la création d'un site web, l'accessibilité doit être prise en compte à chaque étape. Selon l'OMS (en 2023), on estime à 1,3 milliard le nombre de personnes souffrant d'un handicap, soit 1 personne sur 6. Cela signifie qu'une personne sur six qui visite votre site web pourrait avoir besoin de modifications d'accessibilité pour pouvoir lire ou comprendre votre site. 

Avis important :

À partir du 28 juin, l'EAA (European Accessibility Act) entrera en vigueur, ce qui signifie que la plupart des sites web (en particulier ceux qui vendent des biens ou des services) devront être légalement compatibles avec les normes d'accessibilité basées sur le WCAG 2.1 niveau AA. Pour plus d'informations, consultez le site Accès de plain-pied. 

Les niveaux d'accessibilité (WCAG)

WCAG est l'abréviation de Web Content Accessibility Guidelines (lignes directrices pour l'accessibilité des contenus web). Développées par le World Wide Web Consortium pour rendre le contenu numérique plus accessible aux personnes handicapées. 

  1. A (Basique) - Exigences minimales (par exemple, texte alt, navigation au clavier).
  2. AA (Standard) - Recommandé pour la plupart des sites web (par exemple, contraste des couleurs, clarté de la navigation)
  3. AAA (amélioré) - Le niveau le plus élevé, mais pas toujours pratique (par exemple, langue des signes, options de navigation multiples).

Pourquoi l'accessibilité est-elle importante ?

Imaginez que vous regardiez un site web et que vous ne puissiez pas le lire, parce que les couleurs sont mal assorties et que les mots ont l'air bizarres. Imaginez maintenant que vous soyez confronté aux mêmes problèmes à chaque fois que vous consultez un site web : cela vous empêcherait sérieusement d'utiliser l'internet. Le daltonisme touche environ 1 homme sur 12 (8%) et 1 femme sur 200. En outre, en Grande-Bretagne, environ 10% de la population est atteinte de dyslexie.

En veillant à ce que votre marque et votre site web présentent des couleurs très contrastées, vous faciliterez la lecture pour une bonne partie des visiteurs de votre site. 

En ce qui concerne le type et la taille des polices, il n'existe pas de lignes directrices claires en matière d'accessibilité. Toutefois, en règle générale, il convient de commencer par une police de 16 px ou plus pour le corps du texte. Essayez d'éviter les polices plus fantaisistes telles que les polices d'écriture comme Pacifico ou Homard (exemple ci-dessous) ou en italique car ils peuvent être plus difficiles à lire. 

Polices du Pacifique et du homard

Pour les handicaps tels que la dyslexie, vous pouvez également contribuer à optimiser votre site en écrivant à la voix active plutôt qu'à la voix passive et en gardant des phrases concises. Évitez également les longs paragraphes qui s'enchaînent et le "verbiage" inutile si vous pouvez vous en empêcher. Utilisez un texte foncé sur un fond qui n'est pas blanc, et séparez régulièrement le texte en utilisant des H2 et des H3 pour permettre aux utilisateurs de voir le contenu du texte sans avoir à le lire entièrement. Pour les daltoniens, évitez les couleurs telles que les verts, les roses et les rouges, car ce sont les couleurs les plus courantes qui posent problème.

LIRE  Choisir la bonne société de développement de sites web

L'importance du texte Alt

De nombreux spécialistes du marketing connaissent le texte ALT (texte alternatif) du point de vue du référencement, et peuvent utiliser l'espace pour insérer des mots clés afin d'améliorer l'indexation des pages par les robots des moteurs de recherche. Cependant, peu de gens prennent en compte le fait que le texte alternatif est là pour que les lecteurs de sites web et d'écrans puissent le lire et donner un contexte à la page. Cela permet aux personnes dont la vitesse d'Internet est faible et à celles qui ont du mal à interpréter les images de comprendre ce qu'elles contiennent, ce qui augmente l'accessibilité du site web. 

 

Meilleures pratiques en matière de texte Alt. 

La meilleure façon d'optimiser votre texte alt pour l'accessibilité (mais aussi pour le référencement) est de rédiger une description claire de l'image et d'y incorporer naturellement votre mot-clé. Pour les images décoratives qui n'ont pas besoin de mots-clés dans le texte alt, ne les laissez pas vides. Fournissez plutôt un "attribut nul" pour que les lecteurs d'écran sachent qu'ils doivent ignorer l'image.

Exemple d'attribut null :
<img src="”insertimagetitlehere.jpg”" alt="&quot;&quot;">

 

La meilleure pratique consiste à rédiger un texte alt pour les images importantes, dans la mesure du possible. Par exemple, si votre mot-clé est "Macbook", vous voulez l'écrire dans le texte alt, mais il faut aussi que le texte alt ait un sens. Vous ne devez pas non plus écrire de texte superflu, votre texte alt ne doit pas expliquer qu'il s'agit d'une image (par exemple, la photo contient l'image contient).

 

Le texte alt de cette image doit être le suivant : "Personne portant un pull jaune et des bracelets dorés : "Une personne portant un pull jaune et des bracelets en or est assise à un bureau et tape sur un Macbook.

 

Des femmes portant un pull jaune tapent sur un ordinateur portable assis à un bureau.

Applications et compléments : 

Police ouverte pour la dyslexie

Certaines personnes dyslexiques utilisent l'extension Dyslexie ouverte de changer la police de leur navigateur pour une police spécialement conçue pour les personnes dyslexiques. En testant la compatibilité de votre site web avec cette extension et en l'élaborant dans cette optique, vous pouvez vous assurer que votre site web est aussi adapté aux personnes dyslexiques et accessible que possible. 

un exemple de la police d'accessibilité au site web "open dyslexic".

Colourblindly et Colourcontrast.CC.

Daltonien est une autre extension Chrome qui, cette fois, simule l'apparence de votre site web pour les personnes atteintes de différents types de daltonisme. En cliquant sur les différents types de daltonisme, vous pouvez voir comment votre site web est perçu en temps réel. Cette extension, associée à Couleurcontraste.cc est la combinaison parfaite pour s'assurer que votre site web et votre image de marque est aussi accessible que possible. 

LIRE  Quand refaire son site web : 7 signes de la nécessité d'une mise à jour

une image de la page d'accueil du site web de l'indicateur de contraste des couleurs - texte noir sur fond jaune

 

une image de l'interface de l'application daltonienne

 

 

Texte Alt AI :

Si vous avez du mal à rédiger un texte alt, il existe des outils d'intelligence artificielle qui peuvent vous aider. Alttext.AI "lit" l'image et génère une légende appropriée. N'oubliez pas de revérifier ce texte et d'ajouter votre mot-clé (de manière aussi transparente que possible) à des fins de référencement. 

 

Autres moyens de garantir l'accessibilité du site web.

  • Faire en sorte que les éléments interactifs soient faciles à repérer - Il s'agit notamment de veiller à ce que les liens soient d'une couleur différente et soulignés, et à ce que les boutons se détachent facilement de l'arrière-plan. Utilisez des outils tels que Colourcontrast.cc pour vérifier l'accessibilité des couleurs et vous assurer qu'elles sont compatibles. Évitez les combinaisons de couleurs comme le gris et le jaune ou le rose et le rouge.

 

  • Veillez à ce que votre site soit accessible au clavier - Certains handicaps, comme la dystrophie musculaire, peuvent rendre difficile l'utilisation d'une souris ou d'un trackpad, de sorte que les utilisateurs se fient à la navigation au clavier. S'assurer que votre site web peut être navigué à l'aide d'un clavier ou d'autres dispositifs d'accessibilité est un élément important à prendre en compte lors de la création de votre site web. En utilisant la touche de tabulation, vous devriez pouvoir accéder à chaque élément de la page web sur lequel vous pouvez mettre l'accent.
    • Les éléments qui doivent être ciblés comprennent (mais ne sont en aucun cas limités à) : Appel à l'action Boutons, Résumés, et Contrôles audio et vidéo.

 

  • Conception pour une utilisation mobile - Certaines personnes éprouvent des difficultés à utiliser un ordinateur portable et s'appuient donc sur des téléphones portables ou des appareils à écran tactile tels que les iPads pour naviguer sur les sites web. Veiller à ce que votre site web soit conçu de manière réactive et optimisé pour les mobiles est un excellent moyen de le rendre plus accessible. D'autant plus que près de 9 personnes sur 10 accèdent aujourd'hui à l'internet via un appareil mobile. 

 

  • Texte d'ancrage descriptif. Également connu sous le nom de texte de lien, le texte d'ancrage est un texte cliquable qui renvoie à un autre endroit (généralement un autre site ou une autre page). En veillant à ce qu'il soit descriptif et clair, on fournit un contexte aux utilisateurs, en particulier à ceux qui utilisent des lecteurs d'écran ou dont la vitesse d'Internet est faible et qui ne peuvent pas cliquer sur le lien. 

Aller de l'avant et optimiser !

Vous disposez désormais de tous les outils et de toutes les informations nécessaires pour vous rendre compte de l'importance de l'accessibilité des sites web. quand la conception de votre site webLa prise en compte de la manière dont tous les utilisateurs peuvent interagir avec votre site web peut également améliorer la navigabilité de votre site, augmenter la durée de la session et réduire le temps de rebond, ce qui constitue un avantage sur tous les plans. En matière d'accessibilité, la perfection est presque impossible. Toutefois, cela ne signifie pas qu'il est acceptable de s'avouer vaincu au premier obstacle. Optimisez votre site autant que possible, tenez compte de tous les éléments susmentionnés et tenez-vous au courant des nouveaux moyens d'optimiser l'accessibilité de votre site.