Accessibilité web, comment savoir si mon site répond aux normes ?

Accueil
>
Articles
>
Accessibilité web, comment savoir si mon site répond aux normes ?

Aujourd’hui, l'accessibilité numérique est un enjeu majeur des sites internet. L’accessibilité d’un site est le fait de permettre à tous les utilisateurs de naviguer sur celui-ci. Cette notion ne se limite pas seulement aux personnes en situation de handicap ou déficience visuelle. Cette notion s’étend aux personnes ayant une faible connexion internet, celles utilisant des navigateurs datés ou encore celles ayant une capacité limitée à utiliser une souris de navigation.

Les moteurs de recherche prennent également ce sujet en compte lors du référencement des sites. Avoir une bonne accessibilité numérique est donc également un point important pour obtenir un bon référencement naturel.

Cet article présentera les principaux points relatifs à l’accessibilité numérique de votre site internet ainsi que des conseils pour l’auditer.

I. Définition de l’accessibilité numérique

L'accessibilité numérique, ou accessibilité web, est la capacité pour toutes les personnes, indépendamment de leur handicap, de leur âge, de leur situation géographique ou de leurs compétences techniques, à naviguer sur des sites web ou documents numériques.

Cela implique de prendre en compte les besoins des utilisateurs ayant des limitations visuelles, auditives, motrices, cognitives ou autres, afin de leur permettre de naviguer et d'interagir avec les contenus numériques de manière efficace et autonome.

L’inclusivité d’un contenu numérique tient également compte des limitations matérielles de l’utilisateur. Un site ou document doit être navigable correctement même avec un faible débit internet et sur n’importe quel type de support.

L'accessibilité numérique vise ainsi à garantir l'égalité d'accès à l'information et aux services en ligne pour tous les utilisateurs.

II. Les éléments à vérifier

1. Vérifier le niveau des contrastes colorimétriques

Il est important d'avoir des contrastes conséquents sur un site web pour garantir une lisibilité optimale du contenu pour tous les utilisateurs. Cela concerne particulièrement les personnes ayant une déficience visuelle ou une perception des couleurs altérée.

Un contraste de couleur important entre le texte et l'arrière-plan facilite la lecture. Si les contrastes sont insuffisants, le texte peut devenir illisible pour certains utilisateurs.

Par exemple, un texte blanc sur un fond jaune peut être difficile à lire pour les personnes ayant une déficience visuelle. Pour mettre en valeur un texte ou élément blanc, il est donc recommandé d'utiliser des couleurs de fond plus foncées pour améliorer la lisibilité.

contrast examples

2. Vérifier que la taille de police soit ajustable

Pour faciliter la lecture du texte sur un site internet, les navigateurs (Chrome, Firefox, Edge…) offrent des options permettant de modifier la taille de la police par défaut.

Un site accessible prendra donc en compte les choix des utilisateurs pour afficher le contenu en conséquence. Toutefois, pour que cette option soit effective, le site doit lui-même être construit de manière à pouvoir s’adapter.

Dans les faits, les tailles des polices et des éléments visuels devront être exprimés en REM et non en pixel. En effet, nous avons l’habitude d’utiliser une valeur en pixel pour la taille des polices : nous retrouverons traditionnellement une taille d’environ 12 pixels sur un document Word, par exemple.  

Le défaut de passer par des pixels est qu’il s’agit d’une valeur absolue. Ainsi, si un texte est écrit en 12 pixels, même si l’utilisateur modifie ses paramètres pour un affichage plus grand, la taille du texte restera identique.

A l’inverse, l’unité REM utilise l’option de l’utilisateur comme valeur d’origine. Ainsi, si l’internaute modifie ses paramètres d’affichage, la taille du texte s’accordera en fonction.

L’utilisation des unités de mesures appropriées pour la taille de police des contenus d’un site internet est donc primordiale pour garantir et optimiser son accessibilité.

3. Proposer du texte alternatif sur les images et vidéos

Pour pallier des difficultés visuelles, la principale solution est d’avoir un lecteur d’écran. Ces logiciels « lisent » un site internet pour retransmettre auditivement son contenu. Il reste néanmoins difficile pour ces outils de retranscrire fidèlement des images.

C’est pourquoi il est aujourd’hui primordial d’ajouter des textes alternatifs aux images d’un site internet. Ce texte alternatif sera lu par le logiciel à la place de l’image, il s’agit donc ici de décrire fidèlement ce que l’image représente.

Par ailleurs, le texte alternatif est également affiché à la place de l’image si celle-ci ne se charge pas. Cette méthode permet donc à des appareils moins modernes ou bénéficiant d’une moins bonne connexion internet d’afficher les informations essentielles en attendant que l’image s’affiche.

De plus, tout contenu multimédia auditif, comme une vidéo ou un podcast audio, nécessitera des sous-titres pour permettre aux personnes souffrantes de troubles auditifs d’avoir un accès complet à l’information.

image including an alt text describing the image

4. Site navigable avec le clavier

Utiliser le clavier pour naviguer sur un site peut être plus rapide et plus efficace pour certaines personnes. Cela inclut les personnes malvoyantes qui utilisent des lecteurs d'écran pour naviguer sur le web.  

Si la structure du site est correctement agencée, utiliser la touche tab permet de naviguer entre les liens ciblables : boutons, champs d’un formulaire, redirections… Vous pouvez ainsi vous connecter à votre compte sans utiliser votre souris.

Lorsqu’un élément est ciblé, il est généralement encadré en bleu, paramètre par défaut des navigateurs. Il est possible de modifier cette couleur. Il est donc primordial de définir une couleur qui contraste suffisamment avec le reste du site pour ne pas perdre en lisibilité.

Pour assurer une bonne compréhension, il est recommandé de nommer ses liens de manière explicite. En effet, un lecteur d’écran énoncera le texte contenu dans un lien. Ainsi, on préférera « découvrez notre guide sur l’accessibilité sur le web ! », car le lecteur d’écran annoncera clairement le contenu du lien.

En revanche, dans le cas d’une mauvaise pratique comme « pour découvrir notre guide sur l’accessibilité sur le web, cliquez ici ! », l’utilisateur aura comme information « cliquez ici », ce qui est nettement moins clair.

5. Bonnes pratiques mobiles

Pour qu’un site soit accessible, il est indispensable que sa version pour mobile soit aussi navigable et bien structurée que sa version pour ordinateur. Pour cela, il doit être « responsive », c’est-à-dire s’adapter à la taille de l’écran disponible.

Sur mobile, il est important de conserver une zone cliquable suffisamment grande. Un bouton doit par exemple avoir une dimension minimale de 48 pixels sur 48 pixels.

Pour conserver la meilleure lisibilité possible, il est d’usage de simplifier la navigation sur mobile. On retrouvera donc des menus sous forme de listes déroulantes, des icônes intuitives et un nombre minimal de niveaux de navigation pour faciliter la recherche d'informations.

Enfin, il est important de s’assurer que la police soit suffisamment grande, car la réduction de la taille de l’écran peut entraîner une diminution de la taille des textes. Il est donc recommandé d’avoir une police de minimum 16 pixels, soit 1 REM.

III. Comment vérifier si son site est accessible

Google Lighthouse

Pour auditer l’accessibilité de votre site, il existe de nombreux outils de notation. Pour assurer une cohérence avec votre référencement naturel, nous vous recommandons d’utiliser Google Lighthouse, qui note la performance de votre site selon 4 critères :

  • Performance
  • Accessibilité
  • Bonnes pratiques
  • SEO

La note d’accessibilité, notée sur 100, vous donnera des recommandations et affichera les erreurs présentes sur votre site. Vous pourrez ainsi les corriger pour assurer une navigation fluide pour tous les utilisateurs.

Google lighthouse's Accessibility note

IV. Questions fréquentes

Qu’est-ce que l’accessibilité numérique ?

L’accessibilité numérique, ou accessibilité web, comprend l’ensemble des règles et bonnes mesures à appliquer à un contenu numérique pour le rendre compréhensible par tout utilisateur. Ces règles imposent des tailles, des contrastes et des structures pour assurer la simplicité d’utilisation pour tous.

A qui est destinée l’accessibilité numérique ?

L’accessibilité numérique touche une globalité d’individus. Elle prend en compte les handicaps visuels, auditifs, moteurs et cognitifs. L’accessibilité touche également les limitations matérielles, comme une faible connexion internet ou un système d’exploitation plus ancien. L’accessibilité numérique a pour objectif de rendre le contenu numérique le plus inclusif possible.

Est-ce que mon site est accessible ?

Pour déterminer si votre site est accessible, nous vous recommandons d’auditer votre site avec des outils comme Google Lighthouse, qui révèleront vos erreurs si votre site en contient. Vous aurez également les recommandations nécessaires pour corriger ces erreurs.

Comment créer un site accessible ?

Pour créer un site accessible, il faut respecter les normes en termes de contrastes, tailles de polices et structure des contenus. Il faut également optimiser la version mobile. Pour s’assurer d’un bon résultat, nous vous recommandons de passer par une agence web qui porte une forte attention à l’accessibilité. Attention aux prestataires qui utilisent des modèles préexistants, le temps gagné à la réalisation du site peut en faire pâtir l’accessibilité.

Partager cet article :
Nous poser une question ou nous faire une recommandation :
Ecrire à AFALENCE

Nos autres articles sont sur le Blog AFALENCE

Nos derniers articles :

Consultant SEO : Missions, évolutions, salaire en 2024

Tout ce que vous devez savoir sur le rôle et les tâches du consultant SEO
SEO
Rédigé par
Henri
le
27/3/2024

Créer une animation de transition de page fluide

Créez une animation de A à Z : apprenez l'usage des masques et animations page par page dans ce guide étape par étape.
Figma
Rédigé par
Henri
le
4/3/2024