Le guide complet sur l’accessibilité web, l’art de rendre un site web utilisable par vraiment tout le monde

Améliorer l’accessibilité de votre site web vous permettra de toucher un public plus large, d’augmenter le trafic et les conversions sur votre site. Il faut toujours être conscient qu’entre 15% et 20% de la population souffrent d’un handicap, d’une forme ou d’une autre : handicap visuel, auditif, moteur… Ne pas travailler sur l’accessibilité web de son site, c’est se priver de millions de visiteurs potentiels.

Dans ce guide complet, nous abordons en détail toutes les problématiques relatives à l’accessibilité web : pourquoi est-elle importante ? Quelles sont les principales recommandations et les principaux standards en matière d’accessibilité web ? Comment évaluer si votre site web est accessible ? Quel process mettre en place concrètement pour améliorer l’accessibilité de votre site web ?

Pourquoi vous devez optimiser l’accessibilité de votre site web ?

L’accessibilité web désigne l’ensemble des techniques et bonnes pratiques ayant pour objectif de rendre un site internet accessible à tous – et en particulier aux personnes « handicapées » au sens large du terme :  personnes âgées, handicapés physiques ou mentaux, personnes malentendantes, malvoyantes… Un site internet designé, développé et rédigé avec l’accessibilité web en tête offre à tous un accès égal au site, à l’offre et au contenu qu’il propose.

Rendre son site facile d’accès a deux principaux avantages. Cela permet :

• De garantir un accès égal pour tout le monde à votre site Internet.
• D’élargir l’audience de votre site. Les personnes souffrantes d’un handicap ont une plus grande propension à faire leurs achats sur internet. Si vous avez un site e-commerce, améliorer l’accessibilité de votre site vous permettra de faire venir à vous de nouveaux acheteurs.

Les différents handicaps à prendre en compte pour améliorer l’accessibilité web

Il existe différents types de handicaps : visuels, auditifs, moteurs ou même mentaux. Ces différents types de handicaps doivent être pris en compte si vous souhaitez optimiser l’accessibilité web de votre site.

#1 Le handicap visuel

Le handicap visuel est à prendre au sens large. Il concerne aussi bien les personnes souffrant d’une cécité totale, celles ayant une mauvaise vision (myopie, presbytie) ou bien encore les personnes souffrant de daltonisme. On estime que près de 10% de la population souffre de troubles légers ou très importants de la vision (même en portant des lunettes). D’où l’importance de prendre en compte ce handicap, en veillant par exemple à faire en sorte que le choix des couleurs pour un produit soit facile même pour un daltonien.

Sur l’optimisation des sites web à destination des personnes ayant des difficultés à distinguer les couleurs. L’auteur de cet article liste plusieurs outils permettant d’améliorer l’accessibilité web du site pour les personnes ayant des problèmes de vue :

• Check My Colours : vous renseignez une URL de votre site, et l’outil vous envoie un feedback listant les éléments à améliorer.
• Color Oracle : cet outil permet de montrer ce que voit une personne ayant des difficultés à différencier les couleurs. Vous pouvez aussi utiliser le plugin Chrome I Want To See Like The Color Blind.
• WebAIM Contrast Checker : permet de mesurer la qualité du contraste entre deux couleurs de votre site.

#2 Le handicap auditif

Selon l’INSEE, 11% de la population française souffre de problèmes d’audition (du handicap léger à la surdité totale). Pour rendre votre site web plus accessible pour ces personnes, il faut que vous fournissiez des sous-titres ou des transcriptions de tous vos contenus multimédia, et des transcriptions de tous vos contenus audio.

Les sous-titres sur YouTube :

#3 Le handicap moteur

Dans le contexte de l’accessibilité web, le handicap moteur fait par exemple référence à l’incapacité d’utiliser la souris, au manque de réactivité ou à tout autre handicap limitant les mouvements. Le handicap moteur est une catégorie regroupant une grande variété de handicaps : atteintes à la moelle épinière, arthrite, paralysie cérébrale, maladie de Parkinso, etc. Inutile de préciser que beaucoup de personnes sont concernées par une forme ou une autre de handicap moteur.

Les solutions pour faciliter l’accessibilité de votre site à ce public sont multiples, en raison même de la multiplicité des formes de handicap moteur. WebAim propose un tableau de synthèse des principales solutions en fonction du type de handicap moteur :

#4 Le handicap cognitif

Le handicap cognitif est lui aussi marqué par la diversité et peut prendre des formes très variées, des troubles de la mémoire, aux difficultés de concentration en passant par les difficultés d’apprentissage. Cette diversité peut être réduite à trois catégorie : les problèmes de concentration, de mémoire et de compréhension (visuelle, linguistique ou mathématique). Pour faciliter l’accès de votre site aux personnes victimes de handicap cognitif, vous devez travailler autant sur le design, sur la structure que sur les contenus.

Les bonnes pratiques pour améliorer l’accessibilité de votre site web (WCAG 2.0)

Les WCAG 2.0 (Web Content Accessibilité Guidelines 2.0) est un ensemble de recommandations destinées à améliorer l’accessibilité des sites web. Les WCAG 2.0 est devenu un standard, même si paradoxalement le projet a été critiqué pour sa complexité ! Vous trouverez à cette adresse une résumé de toutes les recommandations et techniques, classées par catégorie.

Les WCAG 2.0 s’articule autour de 4 piliers : la perception (perceivable), l’utilisabilité (operable), la compréhension (understandable) et la compatibilité (robust). Un site accessible est un site facile à percevoir (à lire), à utiliser, à comprendre et compatible avec les technologies actuelles et futures.

Voici les 12 principales recommandations :

• Perception #1 : proposer des équivalents textuels à tout contenu non textuel.
• Perception #2 : proposer des sous-titres ou des versions de remplacement pour tous vos contenus multimédias.
• Perception #3 : rendre vos contenus adaptables. Par exemple, proposer une version audio des contenus, donner la possibilité de modifier la taille de la police…
• Perception #4 : jouer sur les contrastes pour permettre de bien distinguer les différents contenus (visuels, audios…) de votre site.
• Utilisabilité #1 : faire en sorte de rendre les fonctionnalités accessibles au clavier (raccourcis).
• Utilisabilité #2 : laisser le temps à l’internaute de lire ou utiliser le contenu qui lui est présenté.
• Utilisabilité #3 : ne pas utiliser de contenu susceptible de provoquer des crises convulsives.
• Utilisabilité #4 : aider l’utilisateur à naviguer dans les pages et contenus et à se localiser sur votre site (moteur de recherche, menu, fil d’ariane..).
• Compréhension #1 : rendre vos contenus textuels lisibles et compréhensibles.
• Compréhension #2 : faire en sorte que vos contenus apparaissent et fonctionnent de manière prévisible.
• Compréhension #3 : aider l’internaute à éviter et à corriger les erreurs.
• Compatibilité #1 : optimiser votre site afin qu’il soit compatible avec les technologies actuelles et futures.

Pour chacune de ces recommandations, WCAG 2.0 propose des critères et des bonnes pratiques. Il existe d’autres ensembles de recommandations, plus spécifiques et donc plus secondaires, comme par exemple les UAAG (User Agent Accessibility Guidelines) ou les ATAG (Authoring Tool Accessibility Guidelines).

Évaluer le niveau d’accessibilité web de votre site internet

On considère qu’un site est correctement accessible dès lors qu’il remplit les critères Level A et Level AA des WCAG 2.0. Il y a trois manières d’évaluer le niveau d’accessibilité actuel de votre site internet : utiliser des outils, demander l’avis d’experts, faire de l’user testing.

#1 Utiliser des outils d’analyse de l’accessibilité web

Les outils permettent d’évaluer des dizaines et des dizaines de pages en un temps record. Mais généralement, ils ne détectent que certains problèmes d’accessibilité. Citons notamment deux des meilleurs outils disponibles :

• Wave
• Accessibilité Developer Tools (plugin Chrome).

Voici le résultat de l’analyse de la page d’accueil de La Fabrique du Net par Wave :

#2 Demander l’avis d’experts en l’accessibilité web

Contrairement aux outils, les experts en accessibilité web sont capables d’identifier pratiquement tous les problèmes d’accessibilité de votre site internet. En revanche, le process est à l’évidence beaucoup plus long et chronophage. Pour les sites très gros, ce mode d’évaluation est difficilement praticable.

La plupart des experts se basent sur la méthodologie WCAG-EM (Website Accessibility Conformance Evaluation Methodology), qui reste une référence pour l’évaluation structurée de l’accessibilité web :

• La définition du périmètre d’évaluation. Que s’agit-il d’évaluer ? Quels sont les objectifs de l’évaluation (atteindre le level A, AA, AAA…) ?
• L’exploration du site. Quelles sont les pages clés ? Quelles sont les fonctionnalités clés ? Quels sont les différents types de contenus proposés ? Quelles sont les technologies requises ?
• La sélection d’un échantillon représentatif. S’il n’est pas possible d’évaluer chaque page, l’expert sélectionne un échantillon de pages représentatives.
• L’audit de l’échantillon. Il s’agit de s’assurer que les critères d’accessibilité sont remplis et d’identifier les problèmes. Cette étape suppose une très bonne connaissance des recommandations WCAG.
• Le rapport d’audit, qui aggrége les conclusions de l’audit et calcule un score global d’accessibilité.

Si vous n’avez pas les moyens de faire appel à un expert, vous pouvez suivre vous-même la méthodologie étape par étape en vous aidant de cette interface.

Vous souhaitez proposer votre site web en plusieurs langues ? Nous vous invitons à lire notre article « La traduction du site web : coût, choix prestataires et organisation du projet« .

#3 Faire de l’user testing

Vous pouvez enfin faire appel à des testeurs, via des plateformes comme User Testing par exemple. Le principe est simple : la plateforme vous met en relation avec des testeurs correspondant à votre cible, ceux-ci testent votre site en donnant leur avis en live en se concentrant sur les éléments que vous souhaitez évaluer (en l’occurrence l’accessibilité de votre site). Les test sont filmés par webcam. Ce type d’évaluation permet de connaître l’avis d’internautes plus ou moins ciblés sur l’accessibilité de votre site. Seul inconvénient : les testeurs ne sont pas des professionnels.

Nous vous recommandons d’utiliser plusieurs modes d’évaluation, plutôt qu’un seul. Pour évaluer l’accessibilité web de votre site, nous ne saurons trop vous conseiller la lecture de cet article de Access42 (en français).

Réaliser les corrections sur votre site pour en améliorer l’accessibilité

Prioriser les corrections en fonction de leur importance

Si vous gérez un gros site, vous ne pourrez pas implémenter toutes les corrections en même temps. Vous devez définir des priorités. Typiquement, vous devez prioriser :

• Les pages/éléments du tunnel de conversion : les formulaires, la recherche sur le site, le processus de commande…
• Les contenus clés et ceux qui sont les plus consultés.
• Les problèmes d’accessibilité remontés par vos internautes / clients.
• Les nouveaux contenus et fonctionnalités que vous intégrez sur votre site.

Vous pouvez affiner vos règles de priorisation en vous focalisant d’abord :

• Sur les problèmes faciles, rapides et peu coûteux à corriger.
• Sur les problèmes qui ont le plus d’impact sur l’accessibilité de votre site. En particulier ceux liés à la navigation sur votre site, à la page d’accueil ou au processus d’achat  (= les problèmes qui correspondent au Level A du référentiel WCAG 2.0).

Il est plus facile d’optimiser l’accessibilité web lorsque l’on est encore dans la phase de développement du site web. Mais la plupart du temps, ce n’est pas le cas. Dans ce cas, il peut être pertinent de revoir entièrement le design (dans le cadre d’une refonte) plutôt que de réparer un à un les problèmes…

Créer un design dans une optique d’accessibilité web

Voici les principales recommandations de W3C concernant le design d’un site web :

• Proposer un contraste suffisant entre l’arrière-plan et le premier plan.
• Ne pas se reposer uniquement sur les couleurs pour véhiculer une information, même si ces couleurs ont une forte signification (le vert et le rouge par exemple).
• S’assurer que les éléments interactifs sont facile à identifier.
• Proposer des options de navigation claires.
• S’assurer que les champs des formulaires intègrent les labels/icônes associés (par exemple la croix lorsqu’un champ a mal été complété ou n’a pas été complété).
• Utiliser des titres et des espaces pour lier les contenus associés.
• Créer des éléments de design s’adaptant aux différentes tailles d’écran.
• Permettre à l’utilisateur de contrôler les éléments qui se déclenchent automatiquement.

Rédiger dans une optique d’accessibilité web

Voici cette fois les recommandations de W3C concernant l’aspects rédactionnel :

• Créer une balise Title unique pour chaque page, et informative.
• Utiliser des titres et des sous-titres à vos contenus pour faciliter la compréhension du sens et de la structure.
• Intégrer des liens web qui ont du sens.
• Renseigner la balise alt pour vos images.
• Créer des transcriptions ou des sous-titres pour vos éléments multimedia.
• Fournir des instructions claires.
• Rédiger des contenus clairs et concis.

Les cours dispensés par le CXL Institute par exemple sont accessibles en trois formats : vidéo, audio, texte.

Cet exemple est l’occasion de rappeler que l’accessibilité web bénéficie même aux personnes qui n’ont pas de handicap. Imaginez une personne qui souhaite suivre les cours pendant sa séance de gym : elle pourra le faire en choisissant le format audio.

Développer le site dans une optique d’accessibilité web

Voici, pour finir, les recommandations de W3C concernant l’aspect développement web :

• S’assurer que chaque champ de formulaire dispose d’un label clair et accessible, et que les icônes utilisées sont accompagnées de textes alternatifs pertinents.
• Intégrer des balises alt pour les images.
• Identifier le langage utilisé sur la page et les changements de langage.
• Utiliser un balisage sémantique HTML5 approprié (header, nav, main, footer, etc.) pour structurer vos pages, et compléter avec des données structurées (Schema.org) si pertinent.
• Aider les utilisateurs à éviter ou à corriger les erreurs.
• Refléter l’ordre de lecture dans l’ordre du code.
• Écrire du code qui s’adapte aux technologies utilisées par les internautes.
• Faire en sorte que les éléments interactifs non-standards soient facilement compréhensibles.
• Faire en sorte que tous les éléments interactifs soient accessibles au clavier.
• Éviter d’utiliser les CAPTCHA traditionnels ; privilégier des alternatives accessibles comme les CAPTCHA invisibles ou les solutions basées sur la logique simple, ou encore l’authentification multifactorielle.

Beaucoup des personnes qui ont un handicap utilisent leur clavier pour naviguer sur les sites web. Faites en sorte qu’il soit possible d’utiliser votre site avoir besoin d’une souris.

Les 5 éléments à prendre en compte pour faciliter l’accessibilité de votre site web

Voici 5 éléments que vous devez prendre en compte pour faciliter l’accessibilité de votre site web ainsi que quelques questions que vous devez systématiquement vous poser pour ne pas créer de problèmes en matière d’accessibilité web.

Le contenu est hiérarchisé et clair

• Est-ce que le titre décrit bien et de manière concise le contenu de la page ?
• Est-ce que le titre permet de bien distinguer la page en question des autres pages du site ?
• Est-ce que chaque page a au moins un titre ?
• Est-ce que la hiérarchie titre / sous-titres a un sens / permet de mieux comprendre le sens de la page ?
• Y a-t-il une cohérence entre les sections définies dans le balisage sémantique et les titres / sous-titres de l’article ?

Les textes sont adaptés à la vue de chacun

• Est-ce que le contenu textuel est suffisamment présent et lisible par rapport aux autres éléments visuels ?
• Est-ce que vous avez intégré une fonctionnalité permet de faire varier la taille du texte ? Si oui, est-ce qu’elle fonctionne bien ? Il faut que les rapports de taille entre le titre, les sous-titres et corps de texte se maintiennent avec le changement de dimension.
• Est-ce que lorsque l’on agrandit la taille des textes, certaines parties disparaissent, sont tronquées ou se chevauchent ?

L’utilisation du keyboard est optimisée et privilégiée

• Est-ce que tous les boutons et formulaires sont facilement visibles et utilisables avec le clavier ?
• Est-ce qu’il faut faire du scrolling horizontal pour lire la fin des phrases ?
• Est-ce que tous les éléments sont accessibles via la touche « tab » ?
• Est-ce qu’il est possible de quitter tous les éléments avec la touche « tab » ?
• Est-ce qu’il est facile d’identifier les éléments sélectionnés avec la touche « tab » ?
• Est-ce qu’il est possible de naviguer sur le site sans avoir besoin d’utiliser la souris ?
• Est-ce que les liens des images sont activables avec la touche « Entrer » ?

Les formulaires et les champs sont facilement accessibles

• Est-ce qu’il est possible de se déplacer dans le formulaire et de cliquer sur les boutons (bouton « valider » par exemple) avec le clavier ?
• Est-ce que les icônes du formulaire sont correctement positionnées ?
• Est-ce que les champs obligatoires sont clairement indiqués (pas uniquement par un jeu de couleurs) ?
• Les instructions sont-elles bien intégrées en haut du formulaire ?
• Est-ce que les erreurs de complétion du formulaire sont-elles faciles à repérer (via une croix rouge par exemple) ?

Les éléments multimédis sont sous-titrés et contrôlables à distance

• Est-ce que les lecteurs de média (audio, vidéo…) peuvent être contrôlés avec le clavier ?
• Y-a-t-il la fonction autoplay ? Si oui, il faut que l’utilisateur puisse stopper le média au bout de 3 secondes (en mettant en pause, en stoppant le contenu ou en éteignant le son).
• Avez-vous rédigé vous-même les sous-titres ? Les sous-titres automatiques sont rarement satisfaisants…
• Est-ce que les sous-titres sont synchronisés avec la bande-son ?
• Dans vos contenus multimédias, la personne qui parle est-elle facilement identifiable ? A-t-elle été bien présentée ?
• Est-ce que les bruits significatifs ou les éléments de contexte importants ont-ils été intégrés dans les sous-titres (une porte qui claque, un rire…) ?

Conclusion

En guise de conclusion, nous aimerions encore une fois rappeler que l’accessibilité web n’est pas seulement bénéfique pour les personnes souffrant d’un handicap (visuel, auditif, moteur…), mais bénéficie à tout le monde. Travailler sur l’accessibilité web permet d’optimiser l’expérience utilisateur global de votre site web.

Nous vous conseillons, pour cette raison, de bien prendre le temps de consulter les recommandations WCAG 2.1 ou 2.2 et d’évaluer le niveau d’accessibilité de votre site. Ce sera forcément profitable. Vous ne perdrez clairement pas votre temps.