AnySurfer - Accueil
vous êtes ici
  1. Accueil
  2. Documentation
  3. Standards et lois
  4. Checklist WCAG 2.1 de WebAIM

Checklist WCAG 2.1 de WebAIM

Dernière mise à jour le

Les Web Content Accessibility Guidelines (WCAG) sont intimidantes. Vous souhaitez peut-être un aperçu plus concis. La checklist WCAG 2 de WebAIM répond à ce besoin. C'est pour cela que nous vous en proposons la traduction.

Il y a toujours plusieurs techniques pour satisfaire un critère WCAG. WebAIM recommande certaines techniques, et en simplifie la formulation.

Si vous souhaitez approfondir vos connaissances sur WCAG, nous vous recommandons la lecture de How to Meet WCAG 2 (Quick Reference.

Perceptible
Le contenu web est mis à disposition des sens - vue, ouïe, et/ou toucher.

Règle 1.1 : Équivalents textuels
Fournir une alternative textuelle pour tout contenu non textuel

Critère de succès Recommandations de WebAIM
1.1.1 Contenu non textuel
(Niveau A)
  • Toutes les images, boutons de formulaires de type image, et zones cliquables dans une image ont un texte alternatif équivalent.
  • Les images qui ne sont pas porteuses d'information, qui sont décoratives, ou qui contiennent du contenu également donné sous forme de texte, reçoivent un texte alternatif null (alt="") ou sont implémentées comme images d'arrière-plan en css. Toutes les images qui sont des liens ont un texte alternatif descriptif.
  • Des équivalents textuels sont fournis pour les images complexes, dans le contexte ou dans une page séparée vers laquelle un lien est fourni.
  • Les boutons de formulaire ont un attribut value descriptif.
  • Les champs de formulaire sont associés à des étiquettes .
  • Les contenus multimédia intégrés sont identifiés par un texte accessible.
  • Les cadres (frames et iframes) disposent d'un titre approprié.

Règle 1.2 : Média temporel
Proposer des versions de remplacement aux médias temporels

NOTE : Si le fragment audio ou la vidéo est désigné comme une alternative à du contenu web (par exemple une version audio ou en langue des signes d'une page web), alors le contenu web en question sert d'alternative.

Critères de succès Recommandations de WebAIM
1.2.1 Contenus seulement audio ou vidéo (pré-enregistrés)
(Niveau A)
  • Une retranscription textuelle complète (contenant toutes les informations sonores pertinentes) est fournie pour tous les fragments audio pré-enregistrés.
  • Un texte ou une audiodescription est fourni pour tout contenu pré-enregistré seulement vidéo (sans son), sauf si la vidéo est décorative.
1.2.2 Sous-titres (pré-enregistrés)
(Niveau A)
  • Des sous-titres synchronisés sont fournis pour les vidéos pré-enregistrées (vidéos YouTube, etc.)
1.2.3 Audio-description ou version de remplacement pour un média temporel (pré-enregistré)
(Niveau A)
  • Une retranscription textuelle descriptive OU une audio-description est fournie pour une vidéo pré-enregistrée.
    NOTE : nécessaire seulement si l'information visuelle n'est pas disponible dans la piste audio.
1.2.4 Sous-titres (en direct)
(Niveau AA)
  • Des sous-titres synchronisés sont fournis pour tout contenu audio en direct (diffusions audio, webcasts, vidéoconférences, etc.)
1.2.5 Audio-description (pré-enregistrée)
(Niveau AA)
  • Une audio-description est fournie pour tout contenu vidéo
    NOTE : Seulement nécessaire si la vidéo transmet de l'information de manière visuelle sans que cette information soit présente dans la piste audio.
  • Bien que ce ne soit pas requis au niveau AA, pour une accessibilité optimale, Webaim recommande de fournir une retranscription descriptive en remplacement ou en complément de l'audiodescription.
1.2.6 Langue des signes (pré-enregistrée)
(Niveau AAA)
  • Une vidéo en langue des signes est fournie pour tout contenu audio.
1.2.7 Audio-description étendue (pré-enregistrée)
(Niveau AAA)
  • Lorsqu'il n'est pas possible d'ajouter une audio-description à une vidéo à cause du timing (pas suffisamment de blancs dans la piste audio), une version alternative de la vidéo contenant des pauses permettant l'audiodescription, est fournie.
1.2.8 Version de remplacement pour un média temporel (pré-enregistrée)
(Niveau AAA)
  • Une retranscription textuelle descriptive est fournie pour tout média temporel pré-enregistré qui contient une piste vidéo. Pour une accessibilité optimale, Webaim recommande de fournir une transcription pour tout contenu multimédia.
1.2.9 Seulement audio (en direct)
(Niveau AAA)
  • Une retranscription textuelle descriptive (par exemple le script de l'audio en direct) est fournie pour tout contenu en direct qui a une piste audio.

Règle 1.3 : Adaptable
Créer un contenu qui peut être présenté de différentes manières sans perdre de l'information ou de la structure (par exemple mise en page simplifiée)

Critères de succès Recommandations de WebAIM
1.3.1 Information et relations
(Niveau A)
  • Des balises sémantiques sont utilisées pour indiquer les titres ( <h1></h1>), régions/landmarks, listes ( <ul></ul>, <ol></ol>, et <dl></dl> ), texte mis en évidence ou de nature particulière ( <strong></strong> , <abbr></abbr> , <blockquote></blockquote> , par exemple), etc. Les balises sémantiques sont utilisées de manière appropriée.
  • Les tableaux sont utilisés pour les données tabulaires et les cellules de données dont associées à leurs en-têtes. Les légendes (caption) des tableaux, si elles sont présentes, sont associées à leur tableau.
  • Les étiquettes sont associées aux champs de formulaire correspondants. Les champs de formulaire liés sont regroupés en utilisant fieldset/legend. ARIA peut être utilisé pour fournir des étiquettes quand le HTML standard ne suffit pas.
1.3.2 Ordre séquentiel logique
(Niveau A)
1.3.3 Caractéristiques sensorielles
(Niveau A)
  • Les instructions ne se basent pas sur la forme, la taille ou le positionnement visuel (par exemple "cliquez le carré pour continuer" ou "les instructions se trouvent dans la colonne de droite").
  • Les instructions ne dépendent pas d'un son (par exemple "Vous pouvez continuer quand vous entendez un bip.").
1.3.4 Orientation
(WCAG 2.1 Niveau AA)
  • L'orientation du contenu Web n'est pas limitée uniquement au portrait ou au paysage, à moins qu'une orientation spécifique ne soit nécessaire.
1.3.5 Identifier la finalité de la saisie
(WCAG 2.1 Niveau AA)
1.3.6 Identifier le but
(WCAG 2.1 Niveau AAA)
  • Des régions HTML5 ou rôles ARIA de type landmark sont utilisés pour identifier les régions de page.
  • ARIA est utilisé, quand c'est approprié, pour améliorer la sémantique du HTML afin de mieux identifier la fonction des composants d’interface.

Règle 1.4 : Distinguable
Faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant l'avant-plan de l'arrière-plan

Critères de succès Recommandations de WebAIM
1.4.1 Utilisation de la couleur
(Niveau A)
  • La couleur n'est pas utilisée comme la seule façon de véhiculer de l'information ou de distinguer un élément visuel.
  • La couleur n'est pas utilisée comme la seule façon de distinguer un lien du texte qui l'entoure, sauf si le contraste entre la couleur du lien et du texte est au moins égal à 3:1 et une autre manière de différencier (par exemple soulignement) le lien est utilisée lorsque le lien est survolé par le curseur ou reçoit le focus.
1.4.2 Contrôle du son
(Niveau A)
  • Un mécanisme est disponible pour mettre en pause, arrêter ou pour contrôler le volume du son qui démarre automatiquement sur une page pendant plus de 3 secondes,
1.4.3 Contraste (minimum)
(Niveau AA)
  • Le texte et les images de texte ont un rapport de contraste d'au moins 4.5:1.
  • Le texte de grande taille - au moins 18 points (typiquement 24px) ou 14 points en gras (typiquement 18,66 px) - a un rapport de contraste d'au moins 3:1
1.4.4 Redimensionnement du texte
(Niveau AA)
  • La page est lisible et fonctionnelle quand la page est zoomée à 200%.
    NOTE : 1.4.10 ci-dessous introduit un critère plus sévère pour l'agrandissement du contenu.
1.4.5 Texte sous forme d'image
(Niveau AA)
  • S'il est possible d'obtenir la même présentation visuelle en utilisant du texte seul, ce texte n'est pas présenté sous forme d'image.
1.4.6 Contraste (amélioré)
(Niveau AAA)
  • Le texte et le texte sous forme d'image ont un rapport de contraste d'au moins 7:1.
  • Le texte de grande taille - au moins 18 points (typiquement 24px) ou 14 points en gras (typiquement 18,66 px) - a un rapport de contraste d'au moins 4.5:1
1.4.7 Arrière-plan sonore de faible volume ou absent
(Niveau AAA)
  • Un contenu audio qui contient principalement de la parole n'a pas ou peu de bruit de fond de manière à ce que la parole puisse être distinguée facilement.
1.4.8 Présentation visuelle
(Niveau AAA)
  • Les blocs de texte qui font plus d'une phrase :
    • Ne sont pas plus larges que 80 caractères.
    • Ne sont pas justifiés (alignés simultanément à droite et à gauche).
    • Ont suffisamment d'espace entre les lignes (au moins 1/2 la hauteur du texte) et entre les paragraphes (au moins 1,5 fois l'interligne).
    • Ont des couleurs de texte et d'arrière-plan spécifiées. Ce couleurs peuvent être appliquées à des éléments spécifiques ou à toute la page en utilisant CSS (et seront donc héritées par tous les autres éléments).
    • Ne requièrent pas de défilement horizontal quand la taille du texte est doublée.
1.4.9 Texte sous forme d'image (sans exception)
(Niveau AAA)
  • Le texte sous forme d'image est uniquement décoratif (l'image ne véhicule aucune information) OU l'image ne peut pas être présentée sous forme de texte seul.
1.4.10 Redistribution
(WCAG 2.1 Niveau AA)
  • Il n'y a pas de perte de contenu ou de fonctionnalité et le défilement horizontal est évité lorsque le contenu est présenté sur une largeur de 320 pixels.
    • Cela nécessite un design responsive pour la plupart des sites Web. Il est préférable de tester cette option en réglant la fenêtre du navigateur sur 1280 pixels de large et en effectuant un zoom sur le contenu de la page jusqu'à 400%.
  • Il existe une exception pour le contenu nécessitant un défilement horizontal, tel que des tableaux de données, des images complexes (telles que des cartes et des graphiques), des barres de menus, etc.
1.4.11 Contraste des éléments non textuel
(WCAG 2.1 Niveau AA)
  • Il y a un contraste d'au moins 3:1 pour différencier les objets graphiques (tels que les icônes ou composants de graphiques ou diagrammes) et les composants d'interface adaptés par l'auteur (boutons, champs de formulaire et indicateurs de focus/contour).
  • Les différents états (focus, survol, actif, etc.) des composants d'interface adaptés par l'auteur doivent présenter un contraste de 3:1.
1.4.12 Espacement du texte
(WCAG 2.1 Niveau AA)
  • Aucune perte de contenu ou de fonctionnalité ne se produit lorsque l'utilisateur adapte la hauteur/l'espacement de la ligne de texte à 1,5 fois la taille de la police, l'espacement des paragraphes à 2 fois la taille de la police, l'espacement entre les mots à 0,16 fois la taille de la police et l'espacement entre les lettres à 0,12 fois la taille de la police.
  • Le meilleure manière de permettre cela est de ne pas définir la hauteur des éléments contenant du texte en pixels.
1.4.13 Contenu au survol ou au focus
(WCAG 2.1 Niveau AA)
  • Lorsque du contenu supplémentaire est présenté au survol du pointeur ou focus du clavier :
    • Le contenu nouvellement affiché peut être masqué (généralement via la touche ESC) sans déplacer le pointeur ou le focus du clavier, à moins que le contenu ne présente une erreur de saisie ou ne gêne pas ou ne perturbe pas le contenu d'une autre page.
    • Le pointeur peut être déplacé vers le nouveau contenu sans que celui-ci ne disparaisse.
    • Le nouveau contenu doit rester visible jusqu'à ce que le pointeur ou le focus du clavier s'éloigne de l'élément qui a déclenché l'affichage, que le nouveau contenu soit fermé ou que le nouveau contenu ne soit plus pertinent.

Utilisable
Les composants de l'interface utilisateur, les formulaires et la navigation sont utilisables

Règle 2.1 : Accessibilité au clavier
Rendre toutes les fonctionnalités accessibles au clavier

Critères de succès Recommandations de WebAIM
2.1.1 Clavier
(Niveau A)
  • Toutes les fonctionnalités d'une page sont utilisables à l'aide du clavier, sauf si la fonctionnalité ne peut pas être accomplie d'aucune manière connue en utilisant un clavier (par exemple dessiner à main levée).
  • Les raccourcis clavier et clés d'accès (les clés d'accès devraient typiquement être évitées) n'entrent pas en conflit avec les raccourcis existants des navigateurs ou des lecteurs d'écran.
2.1.2 Pas de piège au clavier
(Niveau A)
  • Le focus du clavier n'est jamais bloqué à l'intérieur d'un élément de la page. L'utilisateur peut déplacer le focus à l'intérieur de tout élément navigable de la page et en ressortir en n'utilisant que le clavier.
2.1.3 Clavier (Pas d'exception)
(Niveau AAA)
  • Toute la fonctionnalité de la page est disponible en utilisant le clavier.
2.1.4 Raccourcis clavier utilisant des caractères
(WCAG 2.1 Niveau A)
  • Si un raccourci clavier utilise des lettre imprimables, l'utilisateur doit pouvoir désactiver le raccourci, changer la lettre attribuée par une touche non imprimable (Ctrl, Alt, etc.) ou le raccourci ne peut être actif que lorsque le composant d'interface associé ou le bouton a le focus.

Règle 2.2 : Délai suffisant
Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu

Critères de succès Recommandations de WebAIM
2.2.1 Réglage du délai
(Niveau A)
  • Si une page ou une application a une limite de temps, l'utilisateur peut supprimer, ajuster ou rallonger cette limite de temps. Ceci n'est pas requis pour les événements en temps réel (par exemple une enchère), ou si la limite de temps est de plus de 20 heures.
2.2.2 Mettre en pause, arrêter, masquer
(Niveau A)
  • Tout contenu en mouvement, clignotant ou défilant (comme un caroussel, ou un animation) pendant plus de 5 secondes peut être mis en pause, arrêté ou masqué par l'utilisateur.
  • Le contenu qui est mis à jour automatiquement (par exemple un fil info qui se met à jour de manière dynamique, des messages de chat) peut être mis en pause, arrêté ou masqué par l'utilisateur, ou l'utilisateur peut contrôler manuellement quand les mises à jour ont lieu.
2.2.3 Pas de délai d'exécution
(Niveau AAA)
  • Le contenu ou la fonctionnalité n'a pas de limites ou de contraintes de temps.
2.2.4 Interruptions
(Niveau AAA)
  • Les interruptions (alertes, mises à jour d'une page, etc.) peuvent être postposées ou supprimées par l'utilisateur.
2.2.5 Nouvelle authentification
(Niveau AAA)
  • Si une session authentifiée expire, l'utilisateur peut poursuivre son activité sans perte de données après une nouvelle authentification.
2.2.6 Délais d'expiration
(WCAG 2.1 Niveau AAA)
  • Les utilisateurs doivent être avertis de la durée de leur inactivité pouvant entraîner une perte de données, à moins que les données ne soient conservées pendant plus de 20 heures d'inactivité de l'utilisateur.

Règle 2.3 : Crises et réactions physiques
Ne pas concevoir de contenu susceptible de provoquer des crises ou réactions physiques

Critères de succès Recommandations de WebAIM
2.3.1 Pas plus de trois flashs ou sous le seuil critique
(Niveau A)
2.3.2 Trois flashs
(Niveau AAA)
  • Aucun contenu de la page ne flashe plus de trois fois par seconde
2.3.3 Animation résultant d'interactions
(WCAG 2.1 Niveau AAA)
  • L'utilisateur peut arrêter une animation et des mouvements non essentiels résultant de l'interaction de l'utilisateur.

Règle 2.4 : Navigable
Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site

Critères de succès Recommandations de WebAIM
2.4.1 Contourner des blocs
(Niveau A)
  • Un lien est fourni pour éviter la navigation et les autres éléments qui sont répétés sur toutes les pages.
  • Une structure de titres suffisante et/ou une identification des régions/landmarks de la page peut aussi être considéré comme une technique suffisante. Webaim recommande néanmoins l'utilisation d'un lien d'évitement pour le bénéfice des personnes voyantes qui naviguent au clavier, parce que la navigation au moyen des titres ou des régions n'est pas encore supportée dans la plupart des navigateurs.
2.4.2 Titre de page
(Niveau A)
  • La page web a un titre de page informatif et descriptif.
2.4.3 Parcours du focus
(Niveau A)
  • L'ordre de tabulation des liens, éléments de formulaire etc. est logique et intuitif.
2.4.4 Fonction du lien (selon le contexte)
(Niveau A)
  • La fonction de chaque lien (ou bouton de formulaire de type image ou zone cliquable d'une image) peut être déterminée à partir du texte du lien seul, ou bien à partir du texte du lien et de son contexte (par exemple le paragraphe, l'élément de liste, la cellule de tableau contenant le lien ou l'en-tête de la cellule de tableau).
  • Les liens (ou les boutons graphiques) qui ont le même texte mais qui ont des destinations différentes peuvent facilement se distinguer les uns des autres.
2.4.5 Accès multiples
(Niveau AA)
  • Il existe plusieurs manières de trouver d'autres pages sur le site - au moins deux des manières suivantes: une liste de pages liées, une table des matières, un plan du site, une fonction de recherche, ou une liste de toutes les pages disponibles.
2.4.6 En-têtes et étiquettes
(Niveau AA)
  • Les titres de page et les étiquettes des composants de formulaire et composants interactifs sont informatifs. Évitez de dupliquer les titres (par exemple "Plus de détails") ou étiquettes (par exemple "Prénom") sauf si la structure permet suffisamment de les différencier.
2.4.7 Visibilité du focus
(Niveau AA)
  • Il est possible de distinguer visuellement sur quel élément se trouve le focus du clavier (en d'autres mots quand vous parcourez une page avec la touche TAB vous voyez où vous êtes).
2.4.8 Localisation
(Niveau AAA)
  • Si une page web fait partie d'une séquence de pages ou se trouve dans une structure de site complexe, une indication de la localisation de la page actuelle est fournie, par exemple par l'intermédiaire d'un fil d’Ariane ou en spécifiant l'étape en cours (par exemple "étape 2 de 5 - adresse de livraison").
2.4.9 Fonction du lien (lien uniquement)
(Niveau AAA)
  • La fonction de chaque lien (ou bouton de formulaire de type image ou zone cliquable d'une image) peut être déterminée à partir du texte du lien seul
  • Il n'y a pas de liens (ou boutons de formulaires graphiques) avec le même intitulé qui ont des destinations différentes.
2.4.10 En-têtes de section
(Niveau AAA)
  • En plus d'indiquer la structure générale du document, les sections de contenu individuelles sont désignées en utilisant des en-têtes lorsque c'est approprié.

Règle 2.5 : Modalités d'entrée
Faciliter l'utilisation des fonctionnalités par les utilisateurs avec d'autres méthodes de saisie que le clavier

Critères de succès Recommandations de WebAIM
2.5.1 Gestes pour le contrôle du pointeur
(WCAG 2.1 Niveau A)
  • Si les mouvements multipoints (pinch) ou basés sur les chemins (balayage ou glissement à travers l'écran) ne sont pas essentiels à la fonctionnalité, la fonctionnalité peut également être effectuée avec une activation en un point (par exemple, l'ajout d'un bouton).
2.5.2 Annulation de l'action du pointeur
(WCAG 2.1 Niveau A)
  • Pour éviter une activation indésirable des composants d'interfaces, évitez d'utiliser des événement non indispensables (par exemple, onmousedown) lorsque vous cliquez, que vous appuyez ou que vous appuyez longuement sur l'écran. Utilisez onclick, onmouseup ou similaire à la place. Si onmouseup (ou similaire) est utilisé, vous devez fournir un mécanisme pour annuler l'action.
2.5.3 Étiquette dans le nom
(WCAG 2.1 Niveau A)
  • Si un composant d'interface (lien, bouton, etc.) présente du texte (ou des images de texte), le nom accessible (étiquette, texte alternatif, étiquette aria, etc.) pour ce composant doit contenir le texte visible.
2.5.4 Activation par le mouvement
(WCAG 2.1 Niveau A)
  • Les fonctionnalités activées en déplaçant le périphérique (par exemple en secouant ou en tournant l'appareil mobile horizontalement) ou par le déplacement de l'utilisateur (comme le fait de basculer vers une caméra) peuvent être désactivées et une fonctionnalité équivalente est fournie via des éléments d'interface standards tels que des boutons.
2.5.5 Taille de la cible
(WCAG 2.1 Niveau AAA)
  • La taille des zones cliquables est d'au moins 44 sur 44 pixels à moins qu'une cible alternative de cette taille soit fournie, que la la zone soit intégrée (par exemple un lien dans une phrase), que la zone n'ait pas été modifiée par l'auteur (par exemple une case à cocher standard) ou la zone n'est pas essentielle pour la fonctionnalité.
2.5.6 Mécanismes d'entrée concurrentes
(WCAG 2.1 Niveau AAA)
  • Le contenu ne limite pas la saisie à une modalité spécifique, telle que la saisie tactile ou le clavier uniquement, mais doit prendre en charge d'autres méthodes de saisie (par exemple, utiliser un clavier sur un appareil mobile).

Compréhensible
L'information et l'utilisation de l'interface sont compréhensibles

Règle 3.1 : Lisible
Faire en sorte que le texte soit lisible et compréhensible

Critères de succès Recommandations de WebAIM
3.1.1 Langue de la page
(Niveau A)
  • La langue de la page est indiquée au moyen de l'attribut lang ( <html lang="fr"></html> , par exemple).
3.1.2 Langue d'un passage
(Niveau AA)
  • Quand un contenu est dans une autre langue que la langue de la page, la langue de ce contenu est indiquée en utilisant l'attribut lang (par exemple <blockquote lang="es"></blockquote> ).
3.1.3 Mots rares
(Niveau AAA)
  • Les mots qui pourraient être ambigus, inconnus, ou utilisés d'une manière spécifique, sont définis dans le texte adjacent, dans une liste de définitions, un glossaire ou d'une autre manière appropriée.
3.1.4 Abréviations
(Niveau AAA)
  • Le sens d'une abréviation est fourni la première fois qu'une abréviation est utilisée, en ajoutant sa forme complète ou en en donnant sa définition, en utilisant l'élément <abbr></abbr> , ou en ajoutant un lien vers une définition ou un glossaire.
    NOTE : WCAG 2.0 ne fait pas d’exception pour les abréviations communément utilisées (par exemple "HTML" devra être donné sous sa forme complète sur un site de web design).
3.1.5 Niveau de lecture
(Niveau AAA)
  • Une alternative plus compréhensible est fournie pour tout contenu dont le niveau est trop avancé que pour pouvoir être lu par une personne ayant suivi environ 9 années d'enseignement (fin du premier cycle secondaire).
3.1.6 Prononciation
(Niveau AAA)
  • Si la prononciation d'un mot est vitale pour comprendre le sens de ce mot, la prononciation est donnée juste après le mot ou par l'intermédiaire d'un lien ou glossaire.

Règle 3.2 : Prévisible
Ffaire en sorte que les pages apparaissent et fonctionnent de manière prévisible

Critères de succès Recommandations de WebAIM
3.2.1 Au focus
(Niveau A)
  • Quand un élément de la page reçoit le focus, cela ne résulte pas dans un changement substantiel de la page, l'apparition d'une fenêtre pop-up, une modification supplémentaire du focus ou tout autre changement qui pourrait désorienter ou perturber l'utilisateur.
3.2.2 À la saisie
(Niveau A)
  • Quand l'utilisateur saisit une information ou interagit avec un composant, cela ne résulte pas dans un changement substantiel de la page, l'apparition d'une fenêtre pop-up, une modification supplémentaire du focus ou tout autre changement qui pourrait désorienter ou perturber l'utilisateur, sauf si l'utilisateur est prévenu à l'avance.
3.2.3 Navigation cohérente
(Niveau AA)
  • Les liens de navigation qui sont répétés sur plusieurs pages se présentent dans le même ordre sur les différentes pages du site.
3.2.4 Identification cohérente
(Niveau AA)
  • Les éléments qui ont la même fonctionnalité sur différentes pages du site sont présentés de manière cohérente. Par exemple un champ de recherche en haut de toutes les pages devrait toujours avoir le même label.
3.2.5 Changement à la demande
(Niveau AAA)
  • Un changement substantiel de la page, l'apparition d'une fenêtre pop-up, une modification inattendue du focus ou tout autre changement qui pourrait désorienter ou perturber l'utilisateur doit être initié par l'utilisateur. Ou bien l'utilisateur peut choisir de désactiver ce type de changement.

Règle 3.3 : Assistance à la saisie
Aider l'utilisateur à éviter et à corriger les erreurs de saisie

Critères de succès Recommandations de WebAIM
3.3.1 Identification des erreurs
(Niveau A)
  • Pour les champs de formulaire obligatoires ou ceux qui requièrent un format, une valeur ou une longueur spécifiques, cette information est fournie à l'intérieur du label du champ.
  • Si elles sont présentes, les erreurs de validation du formulaire sont présentées de manière efficace, intuitive et accessible. L'erreur est clairement identifiée, un accès rapide vers l'élément à corriger est fourni et l'utilisateur peut facilement corriger l'erreur et soumettre à nouveau le formulaire.
3.3.2 Étiquettes ou instructions
(Niveau A)
  • Les éléments interactifs obligatoires disposent d'informations suffisantes, sous forme d'instructions, d'exemples, d'étiquettes bien positionnées et ou d'éléments fieldset et legend.
3.3.3 Suggestion après une erreur
(Niveau AA)
  • Si une erreur de saisie est détectée (que ce soit par une validation côté client ou côté serveur), prévoyez une suggestion pour corriger l'erreur au bon moment et de manière accessible.
3.3.4 Prévention des erreurs (juridiques, financières, de données)
(Niveau AA)
  • Si l'utilisateur peut changer ou effacer des données légales, financières ou de test, ces actions peuvent être annulées, vérifiées ou confirmées.
3.3.5 Aide
(Niveau AAA)
  • Donnez des instructions et des indices pour aider au remplissage et à la soumission du formulaire.
3.3.6 Prévention des erreurs (toutes)
(Niveau AAA)
  • Si l'utilisateur peut soumettre de l'information, la soumission est réversible, vérifiée ou confirmée.

Robuste
Le contenu peut être utilisé de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance.

Règle 4.1 : Compatible
Optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance

Critères de succès Recommandations de WebAIM
4.1.1 Analyse syntaxique
(Niveau A)
  • Les erreurs significatives de validation/syntaxe HTML/XHTML sont évitées. Vérifiez en utilisant http://validator.w3.org/
4.1.2 Nom, rôle, valeur
(Niveau A)
  • Le balisage est utilisé de manière à faciliter l'accessibilité. Cela signifie entre autres de suivre la spécification HTML/XHTML et d'utiliser les formulaires, étiquettes de formulaires, titres de cadres etc. de manière appropriée.
  • ARIA est utilisé pour améliorer l'accessibilité quand le HTML ne suffit pas.
4.1.3 Messages d'état
(WCAG 2.1 Niveau AA)
  • Si un message d'état important est présenté et que le focus n'est pas placé sur ce message, le message doit être annoncé aux utilisateurs du lecteur d'écran. Cela se fait généralement via une alerte ARIA ou aria-live.

Commentaires

Soyez le premier à commenter