La checklist WCAG essentielle pour l’accessibilité des sites web

Malgré les avantages de l’accessibilité numérique, de nombreuses organisations peinent encore à répondre aux exigences minimales d’accessibilité. D’après une analyse de plus de 400 000 pages web d’entreprise sur 15 000 sites, nous avons constaté que :

38 % des images ne sont pas accessibles aux personnes malvoyantes.
80 % des pages comportent des liens qui ne sont pas clairs pour les personnes ayant des déficiences visuelles ou cognitives.
35 % des formulaires n’ont pas de libellés clairs.

Ce sont ces problèmes — parmi des dizaines d’autres — qui font que seulement 3 % d’internet est accessible aux personnes en situation de handicap.

Le World Wide Web Consortium (W3C) a créé les Règles pour l’accessibilité des contenus Web (WCAG) pour aider les organisations à améliorer l’accessibilité pour les personnes en situation de handicap. WCAG est une norme internationale partagée que les entreprises doivent suivre pour respecter les standards d’accessibilité. Les directives contiennent 86 critères de succès qui, une fois remplis, augmentent l’accessibilité et l’utilisabilité sur les plateformes numériques, y compris les sites web, appareils mobiles, documents numériques et autres interfaces utilisateur.

Ci-dessous, nous avons rassemblé une checklist détaillée des critères de succès WCAG pour garantir que vos produits numériques respectent les normes de conformité en matière d’accessibilité web.

Checklist WCAG

Nous avons créé une checklist complète pour vous aider à répondre aux exigences d’accessibilité WCAG. Ne soyez pas submergé par le nombre de critères de succès — ils sont nombreux, mais il est possible de les atteindre avec les bons outils (le vérificateur d’accessibilité web gratuit d’AudioEye est un excellent point de départ).

Nous recommandons de commencer par les critères de succès du niveau A avant de passer aux niveaux supérieurs. Vous pouvez également envisager de traiter d’abord les corrections les plus simples tout en élaborant un plan pour les problèmes plus complexes.

Checklist WCAG Niveau A

Critères de succès	Description	Complété
Contenu non textuel	Tout contenu non textuel (c’est-à-dire images, boutons image et zones sensibles d’images) dispose d’un texte alternatif approprié.
Audio seul et vidéo seule	Des transcriptions descriptives et précises sont fournies pour les contenus uniquement audio ou uniquement vidéo.
Sous-titres	Des sous-titres sont fournis pour les vidéos préenregistrées ou en direct (par exemple, YouTube).
Informations et relations	Les titres utilisent la bonne structure sémantique. Les tableaux sont liés aux bons en-têtes et incluent des légendes si nécessaire. Les libellés de texte sont associés aux bons champs de formulaire.
Séquence significative	L’ordre de navigation suit l’ordre du code ; la navigation est claire et intuitive.
Caractéristiques sensorielles	Les instructions ne dépendent pas de la position visuelle, de la forme ou de la taille (par exemple, ‘Les instructions sont à droite’ ou ‘Cliquez sur le bouton carré pour continuer’).
Utilisation de la couleur	La couleur seule n’est pas utilisée pour transmettre une information, ni pour distinguer les liens du texte environnant sauf si le contraste de couleur est approprié.
Contrôle audio	Les utilisateurs peuvent mettre en pause, arrêter, modifier le volume ou couper le son du contenu audio qui se lance automatiquement sur une page pendant plus de trois secondes.
Clavier	Les éléments web peuvent facilement être partagés via un clavier et incluent des raccourcis clavier spécifiques à la page.
Pas de piège clavier	Le focus clavier et les raccourcis ne sont pas bloqués ou piégés sur des éléments de page.
Raccourcis clavier de caractères	Les utilisateurs doivent pouvoir désactiver les commandes clavier et les remplacer par des touches non imprimables, telles que Ctrl, Alt, etc.
Minuterie ajustable	Les pages avec des limites de temps permettent aux utilisateurs d’ajuster, désactiver ou prolonger la limite de temps.
Pause, arrêt, masquage	Les contenus qui bougent, clignotent, défilent ou se mettent à jour automatiquement pendant plus de cinq secondes peuvent être mis en pause, arrêtés ou masqués par les utilisateurs.
Trois flashs ou moins	Le contenu de la page ne clignote pas plus de trois fois par seconde.
Contourner les blocs	Les utilisateurs peuvent passer la navigation ou d’autres éléments répétés sur les pages web.
Titres de page	La page web possède un titre de page descriptif et informatif.
Ordre de focus	L’ordre des liens est clair et suit une logique intuitive.
But du lien	Les utilisateurs peuvent comprendre la finalité du lien grâce au texte seul. Les liens avec un texte similaire qui redirigent vers des emplacements différents sont facilement distinguables.
Gestes du pointeur	Les actions utilisateur peuvent être réalisées avec un seul geste du pointeur.
Annulation du pointeur	L’activation involontaire des contrôles est évitée en n’utilisant pas l’activation ‘onmousedown’.
Activation par mouvement	Les fonctionnalités déclenchées par un mouvement de l’utilisateur ou du dispositif peuvent être désactivées, et une fonctionnalité similaire est accessible via des contrôles standards comme des boutons.
Identification des erreurs	Les erreurs de validation ou de saisie de formulaire sont clairement identifiées et l’accès à l’erreur est rapidement fourni.

Checklist WCAG Niveau AA

Critères de succès	Description	Complété
Sous-titres	Les médias en direct avec audio comportent des sous-titres synchronisés.
Audiodescription	Les utilisateurs ont accès à des audiodescriptions pour les vidéos non en direct.
Orientation	L’orientation de la page web n’est pas limitée au portrait ou au paysage ; les utilisateurs peuvent l’ajuster selon leurs besoins.
Identifier la finalité de la saisie	Les champs qui collectent certaines informations utilisateur disposent d’un attribut ‘autocomplete’ défini.
Contraste	Le texte et les images ont un ratio de contraste d’au moins 4,5:1. Les grands textes ont un ratio d’au moins 3:1.
Redimensionner le texte	Les éléments de la page restent lisibles et fonctionnels lorsqu’ils sont zoomés à 200 %.
Images de texte	Si une représentation visuelle peut être transmise uniquement par du texte, une image seule n’est pas utilisée pour présenter ce texte.
Reflow	La fonctionnalité n’est pas perdue lorsque le contenu est présenté sur une largeur de 320 pixels. Le défilement horizontal est évité autant que possible.
Contraste non textuel (minimum)	Un ratio de contraste minimum de 3:1 est assuré pour différents objets, tels que les icônes, graphiques ou diagrammes.
Espacement du texte	Le contenu ou la fonctionnalité n’est pas perdu lorsque les utilisateurs ajustent l’espacement des paragraphes.
Contenu au survol ou au focus	Le contenu présenté au survol ou au focus peut être fermé sans déplacer le clavier ou le pointeur.
Plusieurs moyens	Les utilisateurs disposent de plusieurs moyens pour trouver d’autres pages web sur un site.
Titres et libellés	Les titres et libellés de page sont informatifs et ne sont pas dupliqués sauf nécessité absolue.
Focus visible	Un indicateur visible est présent pour les éléments de page lorsqu’ils reçoivent le focus clavier.
Focus non masqué	Les éléments ayant le focus clavier sont entièrement visibles.
Déplacement par glissement	Les actions nécessitant un glissement du pointeur peuvent aussi être réalisées avec un seul pointeur.
Taille de la cible	Les tailles de pointeur sont d’au moins 24 par 24 pixels sauf indication contraire.
Langue des parties/page	La langue des pages est facilement identifiable via l’attribut ‘lang’.
Navigation cohérente	Les éléments répétés sur une page web (par exemple, une barre de recherche) sont étiquetés de façon cohérente sur l’ensemble des pages.
Suggestion d’erreur	Lorsqu’une erreur est détectée, des suggestions sont fournies pour la corriger de manière rapide et accessible.
Prévention des erreurs	Si un utilisateur modifie ou supprime des données financières, juridiques ou de test, l’action peut être annulée, confirmée ou vérifiée si nécessaire.
Authentification excessive	Aucune fonction cognitive n’est requise lors des processus d’authentification sauf si elle peut être réalisée d’une autre manière, contournée ou si l’identification du contenu non textuel est fournie par l’utilisateur (ex. : image fournie par l’utilisateur).
Messages d’état	Les messages d’état sont annoncés aux lecteurs d’écran via une région live ou des alertes ARIA.

Checklist WCAG Niveau AAA

Critères de succès	Description	Complété
Langue des signes	Une interprétation en langue des signes est fournie pour les médias avec audio.
Audiodescription étendue	Lorsque la vidéo originale ne comporte pas suffisamment de pauses et n’est pas optimisée pour l’audiodescription, une vidéo distincte avec des pauses suffisantes et des audiodescriptions est fournie.
Alternative média	Les médias préenregistrés incluent une transcription descriptive.
Audio seul	Un texte descriptif est fourni pour les contenus en direct contenant de l’audio.
Identifier la finalité	ARIA est utilisé pour enrichir la sémantique HTML, permettant aux utilisateurs de mieux comprendre la finalité des éléments d’interface.
Contraste	Les images et le texte ont un ratio de contraste de 7:1.
Audio de fond faible ou absent	Le contenu audio comporte peu ou pas de bruit de fond, ce qui garantit une distinction facile.
Présentation visuelle	Les blocs de texte de plus d’une phrase : font moins de 80 caractères de large, ne sont pas justifiés, ont un espacement de ligne adéquat, des couleurs de fond et de texte appropriées, et ne nécessitent pas de défilement horizontal si la taille est doublée.
Images de texte	Le texte dans une image n’est utilisé que pour la décoration ou si l’information ne peut pas être présentée uniquement par du texte.
Clavier	Toutes les fonctionnalités sont accessibles via le clavier.
Aucune contrainte de temps	Il n’y a pas de limite ou de contrainte de temps pour le contenu ou les fonctionnalités de la page.
Interruptions	Les interruptions telles que les alertes ou mises à jour peuvent être reportées par l’utilisateur.
Rauthentification	Les utilisateurs peuvent se réauthentifier sur une page et poursuivre leurs activités sans perdre de données.
Délais d’expiration	Les utilisateurs sont suffisamment avertis des délais d’expiration pouvant entraîner une perte de données (sauf si les données peuvent être conservées pendant plusieurs heures d’inactivité).
Trois flashs	Aucun contenu de page ne clignote trois fois par seconde.
Animations lors des interactions	Les animations et mouvements non essentiels peuvent être désactivés par les utilisateurs.
Emplacement	Une page web faisant partie d’une séquence de pages est indiquée comme telle via un fil d’Ariane ou une indication des étapes de la séquence.
But du lien	Les utilisateurs peuvent distinguer la finalité de chaque lien grâce au texte du lien seul.
Titres de section	Les sections de contenu sont désignées à l’aide d’en-têtes.
Focus non masqué (amélioré)	Les éléments ayant le focus clavier sont entièrement visibles.
Apparence du focus	Lorsque des indicateurs ou arrière-plans personnalisés sont utilisés, il existe un contraste d’au moins 3:1 entre les états focus/non focus, et la zone est au moins aussi grande que celle d’un périmètre de 2 pixels d’épaisseur autour de l’élément.
Taille de la cible	Les cibles cliquables mesurent 44 par 44 pixels sauf si une taille alternative est prévue.
Mécanismes d’entrée simultanés	Le contenu n’est pas limité à un seul type d’entrée (par exemple, uniquement clavier ou uniquement tactile) et prend en charge des entrées alternatives.
Mots inhabituels	Les mots inconnus ou ambigus sont définis via un index, une liste de définitions ou une autre méthode appropriée.
Abréviations	Les abréviations inconnues sont développées et définies lors de leur première utilisation.
Niveau de lecture	Des alternatives plus compréhensibles sont fournies pour les contenus avancés (généralement pour les contenus au-dessus d’un niveau de lecture de 3ème).
Prononciation	Des guides de prononciation sont fournis pour les mots essentiels à la compréhension de la page.
Changement sur demande	Les changements importants (par exemple, ouverture de fenêtres pop-up ou changement de focus clavier) sont initiés par l’utilisateur et peuvent être désactivés si souhaité.
Aide	Des instructions ou des indices sont fournis aux utilisateurs qui ont besoin d’aide pour accomplir des tâches.
Prévention des erreurs	Les utilisateurs peuvent annuler, vérifier ou confirmer les soumissions après l’envoi d’informations.
Authentification accessible (améliorée)	Aucun test de fonction cognitive n’est requis à aucune étape du processus d’authentification sauf si le test peut être contourné ou réalisé avec l’aide d’un autre mécanisme.

Conformité WCAG et lois sur l’accessibilité numérique

Tout le monde a le droit d’accéder et d’utiliser le contenu en ligne — suivre les critères de succès ci-dessus vous permet de créer un environnement accessible et fonctionnel pour tous. Cependant, l’accessibilité numérique est aussi une obligation légale dans le monde entier. La plupart des lois internationales sur l’accessibilité utilisent les WCAG comme référence, notamment :

Americans with Disabilities Act (ADA) : La ADA interdit la discrimination à l’encontre des personnes en situation de handicap dans les espaces publics, y compris sur internet. Le non-respect de l’ADA (ce qui inclut la création d’un site conforme ADA) peut entraîner des poursuites judiciaires. Pour se conformer à l’ADA, il faut répondre aux exigences du WCAG 2.1 Niveau AA.
European Accessibility Act (EAA) : Similaire à l’ADA, la EAA exige que toutes les organisations du secteur public de l’Union européenne (UE) proposent des produits et services accessibles. À noter : l’EAA met l’accent sur les principes POUR plutôt que sur les WCAG ; cependant, suivre les principes WCAG vous place dans une position favorable pour répondre aux principes POUR.

AudioEye : vous aider à atteindre la conformité WCAG facilement

Rendre votre site accessible n’a pas à être une tâche insurmontable. La checklist ci-dessus vous donne une base solide, mais avec autant de critères de succès WCAG — et certains détails très techniques — il peut être difficile d’identifier et de corriger chaque problème par vous-même.

C’est là qu’intervient AudioEye. Notre approche en trois volets combine une automatisation puissante, de l’IA assistée par l’humain et des tests pendant le développement pour simplifier le chemin vers l’accessibilité. De plus, avec AudioEye Assurance, vous bénéficiez d’un niveau de protection 400 % supérieur aux approches basées uniquement sur l’automatisation ou le conseil. Grâce à notre approche globale, vous bénéficiez d’une conformité leader du secteur avec les lois sur l’accessibilité et la tranquillité d’esprit de savoir que votre contenu numérique est protégé.

Que vous fassiez vos premiers pas vers la conformité WCAG ou que vous cherchiez à aller plus loin dans l’accessibilité de votre site, AudioEye vous apporte les outils, l’expertise et le soutien continu dont vous avez besoin pour bâtir une expérience numérique accessible — et la maintenir sur le long terme.

Prêt à commencer ? Utilisez notre Vérificateur d’accessibilité de site web gratuit pour voir à quel point votre contenu existant est accessible.

Vous souhaitez voir AudioEye en action ? Planifiez une démo dès aujourd’hui.

Foire aux questions

Quelles sont les différentes versions de WCAG ?

Quels sont les différents niveaux WCAG ?

Quelle est la dernière version de WCAG ?

Quand WCAG 3.0 sera-t-elle publiée ?

Quels sont les quatre principes de WCAG ?

Quelles sont les conséquences du non-respect des WCAG ?

Partager l'article