Accessibilité WCAG de niveau A
Les règles énumérées ci-dessous correspondent uniquement au niveau A (LEVEL A). Ce premier niveau d'accessibilité est requis pour tout site Web.
PRINCIPE 1 : PERCEPTIBLE
Objectif : L'information et les composants de l'interface utilisateur doivent être facilement compréhensible.1.1 Les équivalents textuels (proposer des équivalents textuels à tout contenu quelque soit la forme)
- Règle 1.1.1- Contenu non textuel
- Toutes les images, les boutons de formulaires en image et les zones des images map doivent avoir une alternative textuelle appropriée et équivalente.
- Toutes les images liens ont une alternative textuelle décrivant la fonction du lien.
- Les boutons de formulaires ont une description donnée par l’attribut value.
- Les champs inputs ont des labels texte associés ou, si les labels ne peuvent pas être utilisés, ils ont une description par un attribut title.
- Le multimédia embarquéest identifié par un texte accessible.
- ...
1.2 Média temporel (proposer des versions de remplacement aux médias temporels)
- Règle 1.2.1 - Contenu seulement audio ou vidéo (préenregistré)
- Une transcription textuelle descriptive est donnée pour les enregistrements audios sur le Web en différé
- Une description textuelle ou audio est donnée pour les vidéos sans son
- Règle 1.2.2 - Sous-titres (préenregistré)
- Des sous-titres synchronisés sont donnés pour les vidéos sur le Web en différé
- Règle 1.2.3 - Audiodescription ou version de remplacement pour un média temporel (préenregistré)
- Une transcription textuelle OU une Audiodescription dans une piste audio est donnée pour les vidéos sur le Web en différé.
1.3 Adaptable (créer un contenu qui puisse être présenté de différentes manières sans perte d'information ni de structure)
- Règle 1.3.1 - Information et relations
- Le code sémantique est utilisé pour les titres de paragraphes (h1), les listes (ul, ol et dl), les textes dont le sens est souligné ou les textes spécifiques (par exemples, strong, code, abbr, blockquote), etc. Le code sémantique doit être utilisé de manière appropriée.
- Les tableaux sont utilisés pour identifier les tableaux de données.
- Les labels textes sont associés aux champs de formulaires input.
- Les champs de formulaires sont groupés en zones d’information commune avec un fieldset/legend.
- Règle 1.3.2 - Ordre séquentiel logique
- L’ordre de navigation et de lecture (déterminé par l’ordre du code) est logique et intuitif.
- Règle 1.3.3 - Caractéristiques sensorielles
- Les instructions ne sont pas données uniquement selon la forme, la taille ou la position visuelle (par exemple, « Cliquez sur l’icône carrée pour continuer » ou « Les instructions sont dans la colonne toute à droite »).
- Les instructions ne sont pas données uniquement de manière sonore (par exemple, « Un bip vous informe que vous pouvez continuer »).
1.4 Distinguable
- Règle 1.4.1 - Utilisation de la couleur
- La couleur n’est pas le seul moyen utilisé pour véhiculer de l’information ou des éléments distinguables visuellement.
- La couleur n’est pas le seul moyen utilisé pour distinguer un lien du texte qui l’entoure sauf si le contraste de luminosité entre le lien et le texte qui l’entoure est au moins de 3:1 et qu’un moyen supplémentaire est donné quand la souris passe dessus ou quand il reçoit le focus clavier (par exemple, le lien devient souligné)
- 1.4.2 Contrôle du son
- Un mécanisme est donné pour stopper, mettre en pause ou ajuster le volume pour un son qui démarre automatiquement sur une page et dure plus de 3 secondes.
PRINCIPE 2 : UTILISABLE
Objectif :Les composants de l'interface utilisateur et de navigation doivent être utilisables simplement.2.1 Accessibilité au clavier (rendre toutes les fonctionnalités accessibles au clavier)
- Règle 2.1.1 - Clavier
- Toutes les fonctionnalités de la page sont utilisables au clavier, sauf si une fonctionnalité ne peut pas être actionnée au clavier par toutes les méthodes connues (par exemple, dessiner à main levée).
- Les touches de raccourci pour une page spécifique et les raccourcis clavier (les raccourcis clavier devraient être évités) ne rentrent pas en conflit avec un navigateur existant et avec les raccourcis d’un lecteur d’écran.
- Règle 2.1.2 - Pas de piège au clavier
- Le focus clavier n’est jamais bloqué ou piégé dans un élément de la page.
- L’utilisateur peut naviguer vers et à partir de n’importe quel élément navigable de la page en utilisant seulement le clavier.
2.2 Délai suffisant (laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu)
- Règle 2.2.1 - Réglage du délai
- Si une page ou une application a un temps limite, l’utilisateur a la possibilité de la fermer, de modifier ou d’étendre ce temps limite.
- Règle 2.2.2 - Mettre en pause, arrêter, masquer
- Les mouvements automatiques, les clignotements ou le contenu scrollable qui ne durent pas plus que 3 secondes peuvent être mis en pause, stoppés ou cachés par l’utilisateur.
- Les contenus qui se mettent à jour automatiquement peuvent être mis en pause, stoppés ou cachés par l’utilisateur ou l’utilisateur peut manuellement contrôler les déclenchements des mises à jour.
2.3 Crises (ne pas concevoir de contenu susceptible de provoquer des crises)
- Règle 2.3.1 - Pas plus de trois flashs ou sous le seuil critique
- Aucun contenu dans une page ne doit flasher plus que 3 fois par seconde à moins que le contenu qui flashe soit suffisamment petit et que les flashs soient d’un contraste faible et ne contiennent pas trop de rouge
2.4 Navigable (fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site)
- Règle 2.4.1 - Contourner des blocs
- Un lien est donné pour passer la navigation et d’autres éléments de la page qui se répètent sur toutes les pages Web.
- Si une page a une structure correcte de titres de paragraphes, elle peut être considérée comme une technique suffisante à la place du lien « Aller au contenu principal ».
- Si une page a des cadres et qu’ils ont des titres appropriés, c’est une technique suffisante pour passer individuellement chaque cadre.
- Règle 2.4.2 - Titre de page
- La page Web a un titre de page descriptif et informatif.
- Règle 2.4.3 - Parcours du focus
- L’ordre de navigation entre les liens, les champs de formulaires, etc. est logique et intuitif.
- Règle 2.4.4 - Fonction du lien
- La destination de chaque lien peut être déterminée soit par le lien texte seul, soit à partir du lien texte et de son contexte.
- Les liens (ou les boutons image des formulaires) avec le même texte qui pointent vers des directions différentes sont distinguables par la lecture.
PRINCIPE 3 : COMPRÉHENSIBLE
Objectif : Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles par tous.3.1 Lisible (rendre le contenu textuel lisible et compréhensible)
- Règle 3.1.1 - Langue de la page
- La langue de la page est identifiée en utilisant l’attribut HTML lang.
3.2 Prévisible (faire en sorte que les pages apparaissent et fonctionnent de manière prévisible)
- Règle 3.2.1 - Au focus
- Quand un élément d’une page reçoit le focus, cela ne doit pas créer un changement radical dans la page comme l’ouverture d’une nouvelle fenêtre, un changement supplémentaire au focus clavier ou tout changement qui pourrait créer de la confusion ou désorienter l’utilisateur.
3.3 Assistance à la saisie (aider l'utilisateur à éviter et à corriger les erreurs de saisie)
- Règle 3.3.1 - Identification des erreurs :
- Si une erreur de saisie est détectée automatiquement, l'élément en erreur est identifié et l'erreur est décrite à l'utilisateur sous forme de texte.
- Règle 3.3.2 - Étiquettes ou instructions :
- Quand un utilisateur entre une information ou interagit avec un contrôle, cela ne doit pas créer un changement radical dans la page comme l’ouverture d’une nouvelle fenêtre, un changement supplémentaire au focus clavier ou tout changement qui pourrait créer de la confusion ou désorienter l’utilisateur à moins que l’utilisateur ne soit informé de ce changement avant.
PRINCIPE 4 : ROBUSTE
Objectif : Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance.4.1 Optimiser la compatibilité (avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance)
- Règle 4.1.1 - Analyse syntaxique
- Les erreurs HTML/XHTML significatives en validation/analyse syntaxique sont évitées. Utilisez le validateur W3C
- Règle 4.1.2 - Nom, rôle et valeur
- Le codage est utilisé d’une manière à faciliter l’accessibilité. Cela inclut de respecter les spécifications HTML/XHTML et d’utiliser des formulaires, des labels de champs, des titres de cadres, etc. de manière appropriée.
Note sur les critères d'évaluation : pour chaque règle nous devons vérifier si les conditions sont vraies ou fausses. Une liste de ces critères se trouve sur le site du W3C dans le document nommé : Techniques for WCAG 2.0. Si une seule de ces conditions n'est pas vraie alors il n'est pas possible d'obtenir une validation d'accessibilité.
Note : cette article est donnée au titre informatif sur l'aide à l’implémentation des Web Content Accessibility Guidelines de niveau A (LEVEL A), il ne s'agit pas d'un document officiel du W3C.
