Liste de contrôle d'évaluation

Cette liste de contrôle comprend un aperçu de la façon de couvrir tout ce qui est requis dans un audit d'accessibilité d'un projet ou d'un produit. Un audit doit couvrir le minimum de WCAG 2.0 AA :

  1. Perceptible
  2. ​Opérable
  3. Compréhensible
  4. ​Robuste

Cette liste de contrôle comprend également de nouveaux éléments de WCAG 2.1 AA. Consultez Comment respecter les WCAG (Référence rapide) pour plus de détails sur chaque élément.

Clavier

Navigation au clavier sans lecteur d'écran en cours d'exécution :

  • Style de mise au point visible sur le bureau avec clavier ( 2.4.7 Focus Visible )

    Un utilisateur voyant qui utilise uniquement le clavier peut-il voir où il se trouve actuellement sur la page ?

  • L'ordre de mise au point correspond à la disposition visuelle ( 1.3.2 Séquence significative )

    Un utilisateur voyant qui utilise uniquement le clavier peut-il se déplacer confortablement dans les éléments de la page dans un ordre prévisible ?

  • Pas de tabulations invisibles ( 2.4.3 Focus Order )

    Lorsque vous naviguez avec le curseur du clavier ou du lecteur d'écran, y a-t-il des points focalisables le long du chemin qui ne devraient pas être focalisables ?

  • Aucun changement soudain de contexte lorsqu'un contrôle reçoit le focus ( 3.2.1 On Focus )

    Lors de la navigation avec le curseur du clavier ou du lecteur d'écran, une fenêtre modale apparaît-elle ou le focus passe-t-il soudainement à autre chose lorsqu'un champ est mis au point ?

  • Les touches de raccourci à une seule lettre peuvent être remappées ou désactivées ( 2.1.4 Raccourcis des touches de caractères )

    Les raccourcis personnalisés peuvent faire des ravages pour les utilisateurs de dictée vocale et les utilisateurs de clavier uniquement qui activent accidentellement un raccourci et perdent leur place - frustrant !

Images

  • Tous les éléments img ont un attribut alt ( 1.1.1 Contenu non textuel )

    Sans alt présent, les lecteurs d'écran annoncent le nom et le chemin du fichier image.

  • Les images décoratives utilisent des valeurs vides pour les attributs alt ( 1.1.1 Contenu non textuel )

    L'image ajoute-t-elle de la valeur au contenu ? <img src="…" alt="">

  • Les images descriptives ont des alternatives textuelles appropriées ( 1.1.1 Contenu non textuel )

    Essayez de décrire ce qu'il y a dans l'image à quelqu'un qui a les yeux fermés, aidez-le à peindre une image dans son esprit.

  • Les images complexes (diagrammes, graphiques, cartes) ont une alternative textuelle distincte ( 1.1.1 Contenu non textuel )

    Y a-t-il un texte clair indiquant les points sur la carte ?

  • Pour les images avec du texte intégré, assurez-vous que la valeur alt est égale au texte intégré ( 1.1.1 Contenu non textuel )

    L'image du logo "Shopify" doit avoir une valeur alt de "Shopify".

SVG

  • les éléments svg ont focusable="false" lorsqu'un enfant d'un élément focusable (1.3.1 Infos et relations )

    Évite un bogue dans IE qui crée une annonce en double des éléments focalisables.

  • les éléments svg comportent aria-hidden="true" et role="presentation" lorsqu'ils sont décoratifs ( 4.1.2 Nom, Rôle, Valeur )

    Peut parfois créer des tabulations masquées lors de la navigation avec le curseur du lecteur d'écran.

  • svg qui comportent des éléments d' use avec un espace blanc entre les balises svg et use ( 2.1.2 No Keyboard Trap )

    Actuellement un bogue dans Safari 10 qui empêche la navigation par Tab .

  • Les éléments img avec une source svg incluent l' attribut role="img" ( 4.1.2 Nom, Rôle, Valeur )

    Aide à transmettre correctement la sémantique des images pour VoiceOver/Safari sur iOS.

Contrôle des codes

Mondial

  • Attribut Page lang défini sur l' élément html ( 3.1.1 Langue de la page )

    Permet de s'assurer que les lecteurs d'écran prononcent le contenu dans le bon dialecte.

  • Texte unique de l'élément de title de la page ( 2.4.2 Titre de la page )

    Ce contenu est souvent la première information annoncée, rassurant l'utilisateur quant à l'endroit où il se trouve actuellement.

  • Zoom de la fenêtre non désactivé ( 1.4.4 Redimensionner le texte )

    Ne faites pas ceci : <meta name="viewport" content="… maximum-scale=1.0, user-scalable=no" />

  • Le lien de saut est disponible et visible lorsqu'il est sélectionné ( 2.4.1 Blocages de contournement )

    Fournit un accès rapide au contenu de la page, en sautant le contenu répété tel que l'en- header ou les éléments de nav .

  • Éléments repères disponibles, le cas échéant ( 4.1.2 Nom, Rôle, Valeur )

    Utilisez header pour le contenu de l'en-tête, nav pour la navigation, main pour le contenu principal, etc. Aide à créer un accès à la navigation rapide.

  • Flux de contenu linéaire ; aucune valeur d'attribut tabindex utilisée autre que 0 ou -1 et aucun attribut de autofocus au point automatique ( 2.4.3 Ordre de mise au point)

    Leurs valeurs tabindex positives sont-elles utilisées ? Qu'en est-il de autofocus ? Ceux-ci prennent le pouvoir de l'utilisateur.

  • Les événements JavaScript ne reposent pas sur keydown() ( 2.5.2 Pointer Cancellation )

    Utilisez keyup() afin de permettre aux utilisateurs "d'annuler" l'événement en faisant glisser/mouse loin du contrôle.

Rubriques

  • En-têtes pour les en-têtes, dans l'ordre ( 2.4.6 En-têtes ou Libellés )

    N'utilisez pas les en-têtes uniquement pour la conception, mais plutôt une structure de contour/contenu logiquement ordonnée.

Listes

  • Listes pour les listes, ol , ul et dl utilisées de manière appropriée (1.3.1 Infos et relations )

    Existe-t-il une section d'éléments de contenu associés affichés dans a grille ou des éléments frères ?

  • ul , ol elements with list-style: none inclut l'attribut role="list" (1.3.1 Info and Relationships )

    Aide à transmettre correctement la sémantique de la liste pour VoiceOver/Safari.

Les contrôles

  • a pour les liens (1.3.1 Infos et relations )

    Utilisez des liens pour la navigation ; charger une nouvelle page ou déplacer le focus du clavier d'un élément à un autre.

  • button pour les boutons (1.3.1 Infos et relations )

    Utilisez les boutons pour soumettre des données ou effectuer une action à l'écran qui ne modifie pas le focus du clavier.

  • Le but du lien est clair et compréhensible ( 2.4.4 But du lien )

    Est-il clair et compréhensible à quoi sert le lien ou où l'utilisateur atterrira-t-il en activant le lien à partir de son nom accessible ?

  • Les liens qui s'ouvrent dans une nouvelle fenêtre ou les sites externes sont indiqués par une icône et un texte alternatif approprié ( alt On Input )

    Aide à la fois les lecteurs d'écran et les utilisateurs voyants au clavier à savoir que cela sera le résultat de l'activation de l'élément.

  • S'il y a du texte .visually-hidden ou un attribut aria-label appliqué, assurez-vous que le texte visible est la première partie de l'étiquette masquée ( 2.5.3 Label in Name )

    Sinon, les utilisateurs de dictée vocale auront des difficultés à appeler les noms des commandes à l'écran.

  • Si plusieurs éléments à l'écran effectuent la même action, assurez-vous qu'ils partagent le même nom ( 3.2.4 Identification cohérente )

    Par exemple, les cartes avec plusieurs liens (image, titre et "en savoir plus") peuvent aller vers la même destination mais avoir des noms différents - il est préférable de les regrouper en un seul élément d'action pouvant être ciblé.

les tables

  • table pour les données tabulaires (1.3.1 Infos et relations )

    Ce contenu ressemble -t-il à un tableau ? Utilisez table .

  • th pour les en-têtes (avec les attributs de scope appropriés) ( 4.1.1 Parsing )

    scope="col" pour les en-têtes de colonne, scope="row" pour les en-têtes de ligne.

Formes

  • Tous les champs du formulaire comportent une label ( 3.2.2 On Input )

    Soit via aria-label , élément .visuallyhidden , étiquette flottante ou étiquette visible (recommandé).

  • ensemble de fieldset avec legend utilisée le cas échéant (1.3.1 Infos et relations )

    L' label fournit-elle suffisamment de contexte pour qu'elle ait un sens par elle-même ?

  • Les champs utilisent l' autocomplete de saisie semi-automatique ( 1.3.5 Identifier le but de l'entrée )

    Aidez les gens à remplir des champs de formulaire en utilisant les données stockées dans leur navigateur.

  • Les erreurs s'affichent dans la liste des liens au-dessus du form ( 3.3.1 Identification des erreurs )

    Pour les formulaires volumineux avec de nombreuses inputs , déplacez le focus vers l'en-tête de la liste d'erreurs, en établissant un lien vers chaque input dans un état d'erreur.

  • Texte d'erreur inclus dans l' label ou via aria-describedby dedicatedby ( 3.3.1 Identification d'erreur )

    Envelopper le texte input et d'erreur dans l' label permet de fournir une grande cible de clic/tactile et d'annoncer l'erreur de mise au focus .

  • L'état d'erreur n'est pas communiqué visuellement uniquement par la couleur ( 1.4.1 Utilisation de la couleur )

    Les utilisateurs daltoniens peuvent ne pas voir l'état d'erreur si la couleur est le seul indicateur.

  • Mettez à jour le title avec le mot "Erreur" (1.3.1 Infos et relations )

    Le contenu du title est souvent le premier morceau de contenu annoncé ; cela aide avec le contexte actuel.

  • La soumission de données juridiques ou financières doit inclure un examen ( 3.3.4 Prévention des erreurs (juridiques, financières, données) )

    Les gens doivent pouvoir donner un avis final avant de soumettre des données. Spécifiquement pour les données juridiques ou financières (sensibles). Par exemple, la page d'examen des commandes de Checkout.

  • Les notifications, les messages d'erreur, les messages de réussite, les toasts, etc. sont annoncés à haute voix ( 4.1.3 Messages d'état )

    Les informations critiques doivent être annoncées par les lecteurs d'écran via aria-live ou un conteneur de role équivalent, sinon les personnes qui ne peuvent pas voir l'écran risquent de manquer ces informations.

Validation

Médias

  • Le média ne se lit pas automatiquement ( 1.4.2 Contrôle audio )

    Peut être distrayant, perturbateur ou inattendu.

  • Les contrôles sont balisés de manière appropriée (1.3.1 Infos et relations )

    Cochez pour assurer l'état "bascule" pour les boutons et input de plage pour les curseurs.

  • Les médias peuvent être mis en pause sur Space ( clavier 2.1.1 )

    Autoriser une fonction de pause globale sur tout contrôle vidéo ou conteneur de contenu associé.

Vidéo

  • Des sous-titres sont disponibles ( 1.2.2 Sous-titres )

    Si quelqu'un ne peut pas entendre la vidéo, peut-il quand même obtenir ce dont il a besoin ?

  • Des descriptions audio sont disponibles ( 1.2.5 Description audio )

    Si quelqu'un ne peut pas voir la vidéo, peut-il quand même obtenir ce dont il a besoin pour comprendre le contenu ?

l'audio

  • La transcription est disponible ( 1.1.1 Contenu non textuel )

    Si quelqu'un ne peut pas entendre l'audio, fournissez une alternative de transcription complète.

  • La lecture audio automatique peut être interrompue ( 1.4.2 Contrôle audio )

    Autoriser l'utilisateur à mettre en pause la lecture audio automatique.

Apparence

  • Contraste élevé Windows sur ordinateur, inversion des couleurs sur mobile ( 1.4.1 Utilisation de la couleur )

    Vérifiez les icônes, les bordures, les liens, les champs de formulaire et le texte ; le contenu est-il toujours visible ? Pouvez-vous distinguer les éléments de leur arrière-plan ?

  • Augmenter la taille du texte sur le bureau à 200% ( 1.4.4 Redimensionner le texte )

    L'augmentation du zoom du texte entraîne-t-elle un chevauchement de contenu ? Le contenu est-il toujours lisible ?

  • Augmenter l'espacement du texte sur le bureau ( 1.4.12 : Espacement du texte )

    L'augmentation de l'espacement du texte entraîne-t-elle un chevauchement de contenu ? Le contenu est-il toujours lisible ? ( Bookmarklet )

  • Proximité ( 1.3.3 Caractéristiques sensorielles )

    Utilisez le test de la paille pour vous assurer que les personnes qui dépendent du logiciel de zoom d'écran peuvent toujours découvrir facilement tout le contenu.

  • La couleur n'est pas le seul indicateur utilisé pour transmettre des informations ( 1.4.1 Utilisation de la couleur )

    Si tout était en niveaux de gris, pourriez-vous toujours voir où se trouvent les liens parmi le contenu du corps ?

  • Couleurs trop vives ( 1.4.1 Utilisation de la couleur )

    Les personnes autistes peuvent avoir des difficultés avec les couleurs vives.

  • La mise en page est simple et cohérente ( 1.4.10 Reflow )

    Une mise en page trop complexe peut être déroutante à utiliser et à suivre

Animation

Contraste des couleurs

  • Texte et icônes de taille normale ( 1.4.3 Contraste )

    AA nécessite un rapport de contraste de 4.5:1 .

  • Texte et icônes de grande taille ( 1.4.3 Contraste )

    AA nécessite un rapport de contraste de 3.0:1 .

  • Icônes ( 1.4.11 Contraste sans texte )

    AA nécessite un rapport de contraste de 3.0:1 .

  • Bordures des éléments d'entrée (saisie de texte, boutons radio, cases à cocher…) ( 1.4.11 Contraste non textuel )

    AA nécessite un rapport de contraste de 3.0:1 .

  • Texte intégré ou superposé sur les images/vidéos ( 1.4.3 Contraste )

    Le texte est-il toujours lisible dans toutes les images et scènes/cadres vidéo ?

  • Personnalisé ::selection couleurs de sélection ( 1.4.3 Contraste )

    La sélection de texte peut se produire par accident. Peut-il encore être lu ?

Voir Contraste des couleurs pour plus de détails.

Contenu

  • Rédigé en langage simple et sans figures de style ( 3.1.2 Langue des parties )

    Recommandé pour écrire du contenu à un niveau de lecture de 8e année

  • le contenu des éléments button , a et label est unique et descriptif (1.3.1 Infos et relations )

    "Cliquez ici" et "En savoir plus" ne sont tout simplement pas utiles, en particulier lorsque vous naviguez uniquement avec des boutons ou des liens.

  • Le texte est aligné à gauche pour les régions de gauche à droite et aligné à droite pour les régions de droite à gauche ( 1.4.12 Espacement du texte )

    Un texte centré ou justifié peut être difficile à lire pour les personnes dyslexiques

  • Au moins deux méthodes sont mises à disposition pour naviguer et localiser le contenu ( 2.4.5 Multiple Ways )

    Les exemples comprennent; navigation primaire/secondaire/tertiaire, mécanisme de recherche, plan du site, fil d'Ariane, etc.

Mobile/Tactile

  • Permet n'importe quelle orientation ( 1.3.4 Orientation )

    Le site autorise-t-il uniquement l'orientation portrait sur un appareil portable ?

  • Pas de défilement horizontal ( 1.4.10 Reflow )

    Exiger que quelqu'un fasse défiler horizontalement peut être difficile pour certains, irritant pour tous.

  • Les commandes et les icônes de lien peuvent être activées facilement ( 2.5.5 Taille cible )

    Non requis pour tous les éléments cliquables, mais bon pour s'assurer que des éléments tels que les commandes de menu hamburger, les icônes sociales, les visionneuses de galerie et d'autres commandes tactiles sont utilisables.

  • Espace suffisant entre les éléments cliquables afin de fournir une zone de défilement ( 2.4.1 Blocs de contournement )

    Certaines personnes qui souffrent de tremblements des mains ont beaucoup de mal à faire défiler les éléments cliquables qui présentent un espacement nul.

  • Toute fonctionnalité basée sur les gestes a une méthode facultative ne nécessitant aucun geste ( 2.5.1 Gestes du pointeur )

    Il peut être difficile ou douloureux pour certaines personnes d'utiliser des gestes tels que le balayage ou la saisie à plusieurs doigts. Assurez-vous de fournir une alternative, comme un seul button qui remplit la même fonction.

Composants dynamiques

  • Les composants dynamiques tels que les carrousels , la recherche prédictive , les fenêtres modales , les onglets , etc. sont balisés en conséquence, fournissent un contexte approprié et incluent les fonctionnalités de clavier attendues.

    Reportez-vous au guide WAI-ARIA Authoring Practices pour plus de détails.

  • Tout contenu apparaissant au survol ou au focus doit être révocable, survolable et persistant ( 1.4.13 Contenu au survol ou au focus )

    Pensez aux info-bulles ou à tout ce qui apparaît au survol ; peut-il être rejeté via Esc ? Est-ce que cela persiste pour les utilisateurs de zoom de passer la souris et de lire le contenu ?

  • Avertissements d'expiration de session ( 2.2.1 Timing Adjustable ))

    Y a-t-il un délai d'attente pour l'activité en cours ? Informez les gens à l'avance et avec un préavis significatif avant la fin du temps imparti. (Ne pas avoir de délai d'attente est préférable.)

Technologie d'assistance et outils de test

Vous trouverez ci-dessous divers éléments de technologie d'assistance à tester lors d'un audit.

Clavier

Le clavier est la technologie d'assistance la plus élémentaire. Utilisez la touche Tab pour passer d'un élément à l'autre.

Surveiller:

  • Indicateur de mise au point - savez-vous où se trouve actuellement le curseur ?
  • Ordre de mise au point - les éléments sont-ils dans un ordre de haut en bas, de gauche à droite ?

Plus de détails peuvent être trouvés sur l'article sur les meilleures pratiques d'accessibilité du clavier .

Lecteurs d'écran

Utilisez les versions les plus récentes des systèmes d'exploitation, des navigateurs et des lecteurs d'écran pendant l'évaluation.

Bureau

Mobile

Tests automatisés

Exécutez des outils de test d'accessibilité automatisés en dernier recours afin de détecter les éléments qui auraient pu être manqués lors des tests manuels.

Zoom

Zoom texte uniquement

Il existe certaines extensions de navigateur Chrome que vous pouvez utiliser pour tester le zoom texte uniquement, mais il est recommandé d'utiliser la fonctionnalité de zoom texte intégrée avec Firefox . Voici comment y parvenir :

  1. Charger le site Web en question avec Firefox
  2. Assurez-vous que le zoom du texte est activé en allant dans "Affichage", sélectionnez "Zoom" et sélectionnez "Zoomer le texte uniquement"
  3. Ajustez la taille du texte à 200% à l'aide des touches Cmd / Ctrl et + , et visualisez le contenu de la page

Consultez la publication Text Zoom pour plus de détails.

Essai de paille

Utilisez le Straw Test pour simuler une interface très zoomée afin de révéler les problèmes de proximité .

Activation vocale

Il existe deux méthodes principales/populaires à tester avec un logiciel de dictée vocale :

Outils de tests automatisés

Exécutez chacun des éléments suivants pour garantir un résultat de test solide, car chaque outil possède son propre ensemble de méthodes de test. Les résultats peuvent varier.