Liste de vérification WCAG

Cette liste de vérification est un ensemble de recommandations sur la manière dont les sites Web peuvent mieux répondre aux exigences WCAG 2. Elle ne remplace pas les spécifications WCAG 2.

Consultez les normes d’accessibilité WCAG 2.0

Index

  1. Contenu non textuel
    1. Images
    2. Boutons et liens
    3. Images décoratives
    4. Cadres et iFrames
    5. Blocs
  2. Audio, vidéo (pré-enregistré)
  3. Information et relations
    1. Balises HTML
    2. Tableaux
    3. ARIA
  4. Ordre séquentiel logique
  5. Caractéristiques sensorielles
  6. Utilisation de la couleur
  7. Contrôle du son
  8. Contraste (minimum)
  9. Redimensionnement du texte
  10. Texte sous forme d’image
  11. Clavier
  12. Délai, pause et arrêt
  13. Trois flashs
  14. Contourner des blocs
  15. Titre de page
  16. Parcours du focus
  17. Fonction du lien (contexte)
  18. Accès multiples
  19. Titres et étiquettes
  20. Visibilité du focus
  21. Localisation
  22. Langue
  23. Abréviations
  24. Au focus et à la saisie
  25. Navigation et identification cohérentes
  26. Identification des erreurs
  27. Libellés et instructions
  28. Prévention des erreurs
  29. Analyse syntaxique

Contenu non textuel

WCAG 1.1.1

Images

  • Toutes les images doivent avoir un texte alternatif court dans l’attribut alt (sauf si elles sont purement décoratives).
  • Si une alternative textuelle courte n’est pas suffisante pour décrire l’image (tableau, graphique, diagramme), fournissez une description longue dans le texte adjacent à l’image.

Boutons et liens

  • Si une image ou une icône est utilisée comme un bouton ou lien, l’image a une alternative textuelle suffisante pour décrire le but du bouton ou du lien.

Images décoratives

  • Les images décoratives, utilisées pour la mise en forme ou présentant du contenu déjà transmis dans le texte, ont un attribut alt="" vide ou sont intégrées en tant qu’images d’arrière plan CSS.

Cadres et iFrames

  • Les cadres et les iFRAMES ont des titres descriptifs.

Blocs

  • Minimisez le nombre de liens adjacents vers la même destination en combinant des images et du texte adjacent en un seul lien, plutôt que de créer un lien séparé pour chaque élément.

Retour vers l’index

Audio, vidéo (pré-enregistré)

WCAG 1.2.1, 1.2.2 et 1.2.3

Les vidéos et les enregistrements audio pré-enregistrés doivent avoir des sous-titres et/ou des transcriptions sauf lorsque le média est un média alternatif pour le texte.

  • Pour les vidéos pré-enregistrés (sans audio), fournir une alternative textuelle ou des descriptions audio qui fournissent les mêmes informations présentées.
  • Pour les vidéos pré-enregistrés (avec audio synchronisé), fournir des sous-titres.
  • Pour l’audio pré-enregistré (sans vidéo), fournissez une transcription descriptive qui inclut le dialogue et tout autre son significatif.

Retour vers l’index

Information et relations

WCAG 1.3.1

Balises HTML

  • Utilisez un titre H1 par page et organisez le reste de manière hiérarchique. Ne sautez pas les niveaux de titres (H2 à H4). Choisissez les titres en fonction du niveau approprié, et non en fonction de leur apparence.
  • Utilisez le balisage sémantique HTML pour désigner les titres, les listes, le texte mis en évidence, les citations, etc.
  • Évitez d’utiliser des balises div, span, etc. pour des liens ou boutons. Utilisez les balises de bouton de manière appropriée.
  • Évitez d’utiliser des caractères d’espacement à des fins de mise en page.

Tableaux

  • Évitez d’utiliser des tableaux pour la mise en page.
  • Réservez les tableaux pour les données tabulaires.
  • Utilisez les en-têtes de tableaux et les légendes de manière appropriée.

ARIA

  • Utilisez les régions et les étiquettes ARIA pour identifier les zones d’une page.

Retour vers l’index

Ordre séquentiel logique

WCAG 1.3.2

  • Assurez-vous que l’ordre des sources (code) présente le contenu de manière significative. Lorsque la page est affichée sans style, tout le contenu de la page doit apparaître dans un ordre significatif de lecture.

Retour vers l’index

Caractéristiques sensorielles

WCAG 1.3.3

  • N’identifiez pas le contenu en fonction de sa couleur, sa taille, sa forme, sa position, son son, ou d’autres caractéristiques sensorielles.
  • Ne transmettez pas d’informations uniquement par le biais d’icônes ou de symboles.

Retour vers l’index

Utilisation de la couleur

WCAG 1.4.1

  • Lorsque la couleur des mots, des arrières-plans ou d’autres contenus est utilisée pour transmettre des informations, incluez également les informations dans le texte.
  • Les liens doivent toujours être facilement identifiables par des moyens non colorés, y compris les états par défaut et de survol. La façon la plus simple et la plus conventionnelle de signifier des liens est le soulignement.
  • Les champs obligatoires et les champs avec des erreurs doivent inclure un moyen sans couleur pour les identifier.

Retour vers l’index

Contrôle du son

WCAG 1.4.2

  • Ne pas avoir d’audio qui joue automatiquement sur la page.
  • Lorsque vous fournissez de l’audio, fournissez également un moyen simple de désactiver l’audio et de régler le volume.

Retour vers l’index

Contraste (minimum)

WCAG 1.4.3

  • Le texte (y compris les images de texte) a un rapport de contraste d’au moins 4,5:1.
  • Pour le texte et les images d’au moins 24 pixels et normal ou 19 pixels et gras, utilisez un rapport de contraste d’au moins 3:1.

Retour vers l’index

Redimensionnement du texte

WCAG 1.4.4

  • Assurez-vous qu’il n’y a aucune perte de contenu ou de fonctionnalité lorsque le texte est redimensionné.
  • Définissez les textes et les conteneurs de texte en unités relatives (pourcentage, ems, rems) plutôt qu’en pixels.

Retour vers l’index

Texte sous forme d’image

WCAG 1.4.5

  • Évitez les images de texte, sauf dans le cas de logos.

Retour vers l’index

Clavier

WCAG 2.1.1 et 2.1.2

  • Toutes les fonctionnalités doivent être disponibles sur un clavier, à moins que la fonctionnalité ne puisse pas être fournie par un clavier seul.
  • Évitez de vous fier exclusivement aux événements pilotés par des pointeurs tels que onmouseover, pour fournir des fonctionnalités lors de la création de scripts.
  • En général, évitez d’utiliser des scripts pour supprimer le focus d’un élément jusqu’à ce que l’utilisateur déplace le focus manuellement.
  • Évitez d’implémenter des touches personnalisées. Lorsque des touches et autres raccourcis clavier sont mis en œuvre, ils ne doivent pas interférer avec les raccourcis existants fournis par le navigateur et les technologies d’assistance.
  • Assurez-vous que le focus du clavier n’est jamais piégé sur un élément sans qu’il y ait un moyen évident de déplacer le focus hors de l’élément.
  • Assurez-vous que l’utilisateur peut déplacer le focus vers et depuis tous les éléments focalisables à l’aide d’un clavier uniquement.

Retour vers l’index

Délai, pause et arrêt

WCAG 2.2.1 et 2.2.2

  • Ne pas exiger de limite de temps pour accomplir les tâches à moins que cela ne soit absolument nécessaire.
  • Les éléments de la page ne doivent pas automatiquement se déplacer, clignoter, défiler ou se mettre à jour, y compris les carrousels.
  • Si le contenu se déplace, clignote, défile ou se met automatiquement à jour, fournissez un moyen de mettre en pause, d’arrêter ou de masquer le déplacement, le clignotement, le défilement ou la mise à jour.

Retour vers l’index

Trois flashs

WCAG 2.3.1, 2.3.2

  • Ne fournissez aucun contenu qui clignote plus de trois fois par période d’une seconde.
  • Une page Web doit être exempte de tout élément qui flashe plus de trois fois dans n’importe quel intervalle d’une seconde.

Retour vers l’index

Contourner des blocs

WCAG 2.4.1

  • Fournissez un lien pour passer au contenu principal en tant que premier lien focalisable dans la page.

Retour vers l’index

Titre de page

WCAG 2.4.2

  • Assurez-vous que chaque page Web comporte une balise de titre descriptive, informative et unique.

Retour vers l’index

Parcours du focus

WCAG 2.4.3

  • Créez un ordre de tabulation logique via des liens, des contrôles de formulaire et des objets interactifs.
  • Évitez d’utiliser des valeurs tabindex supérieure à 0.
  • Lorsque vous déclenchez des boîtes de dialogue et des menus, assurez-vous que ces éléments suivent leur déclenchement dans l’ordre de mise au point de manière intuitive. Lorsque le contenu est rejeté ou supprimé, remettez l’accent sur le déclencheur.

Retour vers l’index

Fonction du lien (contexte)

WCAG 2.4.4

  • L’objectif de chaque lien peut être déterminé à partir du texte du lien seul, ou à partir du texte du lien et du paragraphe, de l’élément de liste ou de la cellule de tableau qui le contient, ou du texte du lien et de l’attribut de titre.
  • Si le texte visible à lui seul ne suffit pas à transmettre une signification, utilisez des techniques avancées pour fournir une signification supplémentaire, telles que les attributs ARIA, le texte du lecteur d’écran uniquement ou l’attribut title.

Retour vers l’index

Accès multiples

WCAG 2.4.5

Chaque site Web doit inclure au moins deux des éléments suivants :

  • une liste de pages connexes,
  • une table des matières,
  • un plan du site,
  • une recherche ou
  • la liste de toutes les pages.

Retour vers l’index

Titres et étiquettes

WCAG 2.4.6

  • Assurez-vous que sur chaque page, les en-têtes, les étiquettes de régions et les libellés de formulaires sont uniques à moins que la structure ne fournisse une différenciation adéquate entre eux.

Retour vers l’index

Visibilité du focus

WCAG 2.4.7

  • Fournissez des styles de focus au clavier très visibles et assurez-vous qu’un élément visible a le focus à tout moment lors de l’utilisation d’un clavier.
  • Ne vous fiez pas aux styles focus par défaut du navigateur.

Retour vers l’index

Localisation

WCAG 2.4.8

  • L’utilisateur dispose d’informations pour se situer dans un ensemble de pages Web.

Retour vers l’index

Langue

WCAG 3.1.1 et 3.1.2

  • Fournissez un attribut lang sur l’élément HTML de la page.
  • Si une partie de la page est dans une langue différente, utilisez l’attribut lang sur cette partie.

Retour vers l’index

Abréviations

WCAG 3.1.4

  • Un mécanisme est disponible pour identifier la forme complète ou la signification d’une abréviation.

Retour vers l’index

Au focus et à la saisie

WCAG 3.2.1 et 3.2.2

  • Lorsque le focus change, la page ne doit pas entraîner de modification du contenu de la page, générer une nouvelle fenêtre de navigateur, soumettre un formulaire, modifier davantage le focus ou provoquer tout autre changement qui désoriente l’utilisateur.
  • Lorsque l’utilisateur saisit des informations ou interagit avec un contrôle, la page ne doit pas entraîner de modification du contenu de la page, générer un nouvelle fenêtre de navigation, soumettre un formulaire, modifier davantage le focus ou provoquer tout autre changement qui désoriente l’utilisateur. Si une entrée provoque un tel changement, l’utilisateur doit en être informé à l’avance.

Retour vers l’index

WCAG 3.2.3 et 3.2.4

  • Lorsque les composant sont répétés sur une page, ils doivent apparaître dans le même ordre relatif par rapport aux autres composants répétés sur chaque page où ils apparaissent.
  • Lorsqu’un menu de navigation est présenté sur plusieurs pages, les liens doivent apparaître dans le même ordre sur chaque page.
  • Lorsque les composants ont la même fonctionnalité sur plusieurs pages, ils doivent être identifiés de manière cohérente sur chaque page.

Retour vers l’index

Identification des erreurs

WCAG 3.3.1

  • Facilitez la découverte, l’identification et la correction des erreurs.
  • Identifiez les erreurs en utilisant aria-invalid.
  • Indiquez par programmation les champs obligatoires à l’aide des attributs required ou aria-required. Indiquez également visuellement les champs obligatoires dans les instructions ou les libellés du formulaire. N’indiquez pas les champs obligatoires pour le CSS seul.

Retour vers l’index

Libellés et instructions

WCAG 3.3.2

  • Utilisez des libellés descriptifs pour les champs d’entrées.
  • Positionnez visuellement les libellés de manière cohérente, ce qui facilite l’association des libellés aux contrôles de formulaire.
  • N’utilisez pas le texte d’espace réservé à la place d’un libellé.
  • Fournissez des instructions textuelles au début d’un formulaire ou d’un ensemble de champs qui décrivent l’entrée nécessaire.

Retour vers l’index

Prévention des erreurs

WCAG 3.3.3 et 3.3.4

  • Si une erreur de saisie est détectée et si des suggestions de correction sont connues, fournissez des suggestions pour corriger la soumission.
  • Fournir des moyens simples de confirmer, de corriger ou d’annuler une action de l’utilisateur lorsqu’une erreur entraînerait de graves conséquences dans le monde réel (par exemple, soumettre des données financières, conclure un accord juridique, soumettre des données de test ou effectuer une transaction).

Retour vers l’index

Analyse syntaxique

WCAG 4.1.1 et 4.1.2

  • Validez toutes les pages HTML et évitez les erreurs importantes.
  • Évitez de créer des composants personnalisés lorsque des éléments HTMl existent déjà. Par exemple, utilisez les balises button de manière appropriée.
  • Lors de la création d’un composant interactif personnalisé, consultez le document ARIA Authoring Practices.
  • Utilisez les étiquettes, les descriptions, les rôles, les états et les propriétés ARIA pour exposer des informations sur le composant.

Retour vers l’index

.