|
|
Vous êtes ici : Accueil » Documents » WCAG 2.0 pour le HTML
Traductions
Les traductions de ce document sont disponibles en :
Important !
Les informations sur cette page ne sont pas les WCAG 2.0. Il s’agit d’une simple liste de contrôle qui présente des recommandations pour la mise en œuvre des principes et des techniques HTML pour respecter les WCAG 2.0. La formulation utilisée ici est sensiblement différente de celle utilisée dans la version officielle des WCAG 2.0 afin de rendre plus facile leur mise en œuvre et la vérification des pages Web (Note : consulter aussi la version en français agréée par le W3C des WCAG 2.0 comme annoncée par Ideose le 28 juin 2009).
Recommandations pour utiliser cette liste :
- Cette liste ne peut pas être utilisée pour vérifier la conformité avec les WCAG 2.0. Vous devez utiliser la documentation officielle des WCAG 2.0 pour déterminer le niveau de conformité ou de non conformité.
- Cette liste ne devrait pas être référencée dans les règlements. Bien que ce soit une ressource utile pour la mise en œuvre technique des WCAG 2.0 pour le contenu HTML, ce n’est pas une liste à mettre dans les règlements. La documentation officielle des WCAG 2.0 décrit beaucoup mieux les mécanismes de mise en œuvre de l’accessibilité dans les règlements ou dans les lois.
- Les WCAG 2.0 couvrent l’accessibilité de tous les contenus Web et ne sont pas spécifiques à une technologie. Mais cette liste a été réduite au HTML principalement pour l’évaluation des contenus HTML. Cette liste est donc assez limitée et soumise aux changements technologiques, tandis que les WCAG 2.0 le sont beaucoup moins.
- Cette liste présente l’interprétation des WCAG 2.0 et de ses critères de succès par WebAIM. Elle décrit les techniques recommandées par WebAIM pour satisfaire les critères de succès. La première colonne des tableaux ci-dessous donne les liens vers les critères de succès de la version officielle des WCAG 2.0 en français. Seules les directives officielles peuvent être utilisées pour vérifier la conformité aux WCAG 2.0.
Une version de cette liste est aussi consultable (télécharger Adobe Reader).
Perceptible
Le contenu Web est rendu perceptible pour les sens – la vue, l’ouïe et/ou le toucher.
Recommandation 1.1
Les équivalents textuels – Proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d’autres formes selon les besoins de l’utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.
| Critères de succès |
Recommandations |
1.1.1 Contenu non textuel
(niveau A) |
- Toutes les images, les boutons de formulaires en image et les zones des images map doivent avoir une alternative textuelle appropriée et équivalente.
- Les images qui ne véhiculent pas de contenu, qui sont décoratives ou dont le contenu est déjà transmis par du texte ont un
alt texte vide (alt="") ou sont implémentées en arrière-plan CSS. Toutes les images liens ont une alternative textuelle décrivant la fonction du lien.
- Les alternatives aux images complexes sont données dans la page Web ou dans une page séparée (par un lien et/ou un attribut
longdesc).
- 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 multimedia embarqué (Embedded) est identifié par un texte accessible.
- Les cadres (
frames) ont des titres appropriés.
|
Recommandation 1.2
Média temporel – Proposer des versions de remplacement aux médias temporels.
Note : si l’audio ou la vidéo reprend le contenu de la page Web (par exemple, une version audio ou une version vidéo en langue des signes de la page Web), alors le contenu Web représente leur alternative.
| Critères de succès |
Recommandations |
1.2.1 Contenu seulement audio ou seulement vidéo (pré-enregistré)
(niveau A) |
- Une transcription textuelle descriptive (incluant toutes les indications et informations audio) est donnée pour les enregistrements audio sur le Web en différé (podcasts audio, fichiers MP3, etc.).
- Une description textuelle ou audio est donnée pour les vidéos sans son, sur le Web et en différé (par exemple, une vidéo qui n’a pas de piste audio).
|
1.2.2 Sous-titres (pré-enregistrés)
(niveau A) |
- Des sous-titres synchronisés sont donnés pour les vidéos sur le Web en différé (vidéos YouTube, etc.).
|
1.2.3 Audio-description ou version de remplacement pour un média temporel (pré-enregistré)
(niveau A) |
|
1.2.4 Sous-titres (en direct)
(niveau AA) |
- Des sous-titres synchronisés sont donnés pour une diffusion audiovisuelle en direct qui contient de l’audio (broadcast audio-only, Web casts, vidéo conférences, animations Flash, etc.).
|
1.2.5 Audio-description (pré-enregistrée)
(niveau AA) |
- Des audio-descriptions sont données pour toutes les vidéos.
Note : ceci est exigé uniquement si la vidéo véhicule un contenu visuel qui n’est pas déjà décrit sur la piste audio.
|
1.2.6 Langue des signes (pré-enregistrée)
(niveau AAA) |
- Une vidéo en langue des signes est donnée pour tous les médias qui contiennent de l’audio.
|
1.2.7 Audio-description étendue (pré-enregistrée)
(niveau AAA) |
- Quand une piste audio-description ne peut pas être ajoutée à la vidéo à cause du timing audio (par exemple, il n’y a aucun silence), une version alternative de la vidéo avec des pauses permettant d’insérer l’audio-description est donnée.
|
1.2.8 Version de remplacement pour un média temporel (pré-enregistrée)
(niveau AAA) |
- Une transcription textuelle descriptive est donnée pour tous les médias pré-enregistrés qui ont une piste vidéo.
|
1.2.9 Seulement audio (en direct)
(niveau AAA) |
- Une transcription textuelle descriptive (par exemple, le script d’un son en direct) est donné pour tous les contenus en direct qui ont de l’audio.
|
Recommandation 1.3
Adaptable – Créer un contenu qui puisse être présenté de différentes manières sans perte d’information ni de structure (par exemple avec une mise en page simplifiée).
| Critères de succès |
Recommandations |
1.3.1 Information et relations
(niveau A) |
- 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. Quand c’est nécessaire, les cellules de données sont associées à leurs en-têtes. Les titres des tableaux de données et les résumés sont donnés si nécessaire.
- 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.
|
1.3.2 Ordre séquentiel logique
(niveau A) |
|
1.3.3 Caractéristiques sensorielles
(niveau A) |
- 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 »).
|
Recommandation 1.4
Distinguable – Faciliter la perception visuelle et auditive du contenu par l’utilisateur, notamment en séparant le premier plan de l’arrière-plan.
| Critères de succès |
Recommandations |
1.4.1 Utilisation de la couleur
(niveau A) |
- 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
(niveau A) |
- 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.
|
1.4.3 Contraste (minimum)
(niveau AA) |
- Le texte et les textes en image ont un taux de contraste d’au moins 4.5:1.
- Un texte large (au-dessus de 18 points ou de 14 points en gras) a un taux de contraste d’au moins 3:1.
|
1.4.4 Redimensionnement du texte
(niveau AA) |
- La page est lisible et fonctionnelle quand la taille du texte est doublée.
|
1.4.5 Texte sous forme d’image
(niveau AA) |
- Si la même présentation visuelle du texte seul peut être faite, une image n’est pas utilisée pour afficher le texte.
|
1.4.6 Contraste (amélioré)
(niveau AAA) |
- Le texte et les textes en image ont un taux de contraste d’au moins 7:1.
- Un texte large (au-dessus de 18 points ou de 14 points en gras) a un taux de contraste d’au moins 4.5:1.
|
1.4.7 Arrière-plan sonore de faible volume ou absent
(niveau AAA) |
- L’audio d’un discours n’a pas ou presque pas de bruit de fond, ce qui rend facilement audible le discours.
|
1.4.8 Présentation visuelle
(niveau AAA) |
- Les blocs de texte de plus d’une phrase :
- ne contiennent pas plus de 80 caractères.
- ne sont PAS justifiés (alignés à la fois à gauche et à droite).
- ont un espacement de lignes (au moins la moitié de la hauteur du texte) et un espacement de paragraphes (1.5 fois l’espacement de lignes) minimum.
- ont une couleur de premier plan et d’arrière-plan spécifiées. Elles peuvent être appliquées à des éléments spécifiques ou à toute la page en utilisant les CSS (tous les autres éléments hériteront alors du style).
- ne créent PAS de barre horizontale quand la taille du texte est doublée.
|
1.4.9 Texte sous forme d’image (sans exception)
(niveau AAA) |
- Le texte est donné en image seulement pour la décoration (l’image ne véhicule pas de contenu) OU quand l’information ne peut pas être présentée seulement avec du texte.
|
Utilisable
Les formulaires d’interface, les contrôles et la navigation sont utilisables.
Recommandation 2.1
Accessibilité au clavier – Rendre toutes les fonctionnalités accessibles au clavier.
| Critères de succès |
Recommandations |
2.1.1 Clavier
(niveau A) |
- 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.
|
2.1.2 Pas de piège au clavier
(niveau A) |
- 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 naviguable de la page en utilisant seulement le clavier.
|
2.1.3 Clavier (pas d’exception)
(niveau AAA) |
- Toutes les fonctionnalités de la page sont utilisables au clavier.
|
Recommandation 2.2
Délai suffisant – Laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu.
| Critères de succès |
Recommandations |
2.2.1 Réglage du délai
(niveau A) |
- 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. Ce n’est pas une exigence pour les évènements en temps réel (par exemple, une vente aux enchères) où le temps limite est obligatoire ou si le temps limite est plus long que 20 heures.
|
2.2.2 Mettre en pause, arrêter, masquer
(niveau A) |
- 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 mouvements, les clignotements ou le contenu scrollable peuvent être utilisés pour attirer l’attention ou pour mettre en valeur un contenu aussi longtemps qu’ils durent moins que 3 secondes.
- Les contenus qui se mettent à jour automatiquement (par exemples, les redirections automatiques ou les rafraîchissements de page, un bandeau de nouvelles, un champ mis à jour par AJAX, une notification d’alerte, etc.) 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.2.3 Pas de délai d’exécution
(niveau AAA) |
- Le contenu et les fonctionnalités n’ont pas de temps limite ou de contraintes de temps.
|
2.2.4 Interruptions
(niveau AAA) |
- Les interruptions (alertes, mises à jour des pages, etc.) peuvent être déclenchées plus tard ou supprimées par l’utilisateur.
|
2.2.5 Nouvelle authentification
(niveau AAA) |
- Si une session d’authentification expire, l’utilisateur peut s’authentifier à nouveau et continuer sans perdre aucune donnée de la page en cours.
|
Recommandation 2.3
Crises – Ne pas concevoir de contenu susceptible de provoquer des crises.
Recommandation 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 |
2.4.1 Contourner des blocs
(niveau A) |
- 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 struture correcte de titres de paragraphes, elle peut être considérée comme une technique suffisante à la place du lien « Aller au contenu principal ». Noter que la navigation par titres de paragraphes n’est pas encore possible dans tous les navigateurs.
- Si une page a des cadres et qu’ils ont des titres appropriés, c’est une technique suffisante pour passer individuellement chaque cadre.
|
2.4.2 Titre de page
(niveau A) |
- La page Web a un titre de page descriptif et informatif.
|
2.4.3 Parcours du focus
(niveau A) |
- L’ordre de navigation entre les liens, les champs de formulaires, etc. est logique et intuitif.
|
2.4.4 Fonction du lien (selon le contexte)
(niveau A) |
- La destination de chaque lien (ou des boutons image des formulaires ou des zones d’une image map) peut être déterminée soit par le lien texte seul, soit à partir du lien texte et de son contexte (par exemples, les paragraphes qui l’entoure, les éléments d’une liste, les cellules d’un tableau ou les en-têtes d’un tableau).
- 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.
|
2.4.5 Accès multiples
(niveau AA) |
- Différents moyens d’accès aux pages Web sont proposés sur le site – au moins 2 : une liste des pages correspondantes, une table des matières, un plan du site, un moteur de recherche ou une liste de toutes les pages Web disponibles.
|
2.4.6 En-têtes et étiquettes
(niveau AA) |
- Les titres de paragraphes dans les pages, les labels pour les champs de formulaire et les contrôles intéractifs sont informatifs. Evitez d’utiliser les mêmes titres (par exemple, « Plus de détails ») ou les mêmes labels texte (par exemple, « Prénom ») à moins que la structure ne les différencie de manière adéquate.
|
2.4.7 Visibilité du focus
(niveau AA) |
- L’élément de la page qui a le focus clavier est visuellement apparent (quand vous tabulez dans la page, vous pouvez voir où vous êtes).
|
2.4.8 Localisation
(niveau AAA) |
- Si une page Web fait partie d’un ensemble de pages ou si le site Web est complexe, une indication sur la localisation de la page en cours est donnée, par exemple via un fil d’ariane ou en spécifiant l’étape dans la séquence (par exemple, « étape 2 sur 5 – Adresse d’envoi »).
|
2.4.9 Fonction du lien (lien uniquement)
(niveau AAA) |
- La destination de chaque lien (ou des boutons image des formulaires ou des zones d’une image map) peut être déterminée à partir du lien texte seul.
- Il n’y a aucun lien (ou les boutons image des formulaires) avec le même texte qui pointent vers des directions différentes.
|
2.4.10 En-têtes de section
(niveau AAA) |
- Au-delà de donner une structure globale au document, les informations sont groupées et ont des titres de paragraphes si c’est approprié.
|
Compréhensible
Le contenu et l’interface sont compréhensibles.
Recommandation 3.1
Lisible – Rendre le contenu textuel lisible et compréhensible.
| Critères de succès |
Recommandations |
3.1.1 Langue de la page
(niveau A) |
- La langue de la page est identifiée en utilisant l’attribut HTML
lang.
|
3.1.2 Langue d’un passage
(niveau AA) |
- Quand c’est approprié, les sections du contenu qui ont une langue différente identifient ce changement de langue en utilisant par exemple l’attribut
lang (<blockquote lang="es">).
|
3.1.3 Mots rares
(niveau AAA) |
- Les mots qui peuvent être ambiguës, inconnus ou utilisés d’une manière très particulière sont définis par un texte adjacent, une liste de définition, un glossaire ou toute autre méthode adaptée.
|
3.1.4 Abréviations
(niveau AAA) |
- Les descriptifs des abréviations sont donnés à leur première occurence en utilisant la balise
<abbr> ou en pointant vers une définition ou un glossaire. Note : WCAG 2.0 ne donnent aucune exception à cette règle mêmes aux abréviations régulièrement utilisées (par exemple, l’abréviation HTML doit toujours être décrite).
|
3.1.5 Niveau de lecture
(niveau AAA) |
- Une alternative plus compréhensible est donnée à un contenu qui demande à une personne plus de 9 années d’études pour être compris.
|
3.1.6 Prononciation
(niveau AAA) |
- Si la prononciation d’un mot est vitale pour comprendre ce mot, sa prononciation est immédiatement donnée après ce mot ou via un lien ou un glossaire.
|
Recommandation 3.2
Prévisible – Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.
| Critères de succès |
Recommandations |
3.2.1 Au focus
(niveau A) |
- 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.2.2 A la saisie
(niveau A) |
- 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.
|
3.2.3 Navigation cohérente
(niveau AA) |
- Les liens de navigation qui sont répétés sur les pages Web ne changent pas d’ordre sur les différentes pages Web du site.
|
3.2.4 Identification cohérente
(niveau AA) |
- Les éléments qui ont la même fonctionnalité dans de nombreuses pages Web sont identifiées de manière cohérente. par exemple, un champ de recherche en haut du site doit toujours avoir le même label.
|
3.2.5 Changement à la demande
(niveau AAA) |
- Les changements substantiels d’une 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 doivent être initiés par l’utilisateur. A l’inverse, la possibilité de désactiver de tels changements est donnée à l’utilisateur.
|
Recommandation 3.3
Assistance à la saisie – Aider l’utilisateur à éviter et à corriger les erreurs de saisie.
| Critères de succès |
Recommandations |
3.3.1 Identification des erreurs
(niveau A) |
- Les champs de formulaire obligatoires ou ceux qui demandent un format, une valeur ou une longueur spécifique donnent cette information par le label du champ (ou si le label n’est pas donné, l’information est donnée par l’attribut
title du champ).
- Si utilisé, les indications et les erreurs suite à la validation d’un formulaire (côté client ou côté serveur) alertent l’utilisateur des erreurs d’une manière efficace, intuitive et accessible. Les erreurs sont clairement identifiées, un accès rapide à l’élément problématique est donné et l’utilisateur est autorisé à facilement corriger l’erreur et à renvoyer le formulaire.
|
3.3.2 Étiquettes ou instructions
(niveau A) |
- Des labels, indices et instructions suffisantes pour les éléments intéractifs sont donnés via des instructions, des exemples, des labels de champs de formulaires bien positionnés et/ou des
fieldset/legend.
|
3.3.3 Suggestion après une erreur
(niveau AA) |
- Si une erreur d’entrée est détectée (par une validation côté client ou côté serveur), des suggestions sont données pour corriger l’erreur d’une manière déterminée dans le temps et accessible.
|
3.3.4 Prévention des erreurs (juridiques, financières, de données)
(niveau AA) |
- Si l’utilisateur peut changer ou supprimer des informations légales, financières ou de test, les changements/suppressions sont réversibles, vérifiées ou confirmées.
|
3.3.5 Aide
(niveau AAA) |
- Si l’utilisateur peut envoyer, changer ou supprimer une information, l’information est réversible, vérifiée ou confirmée.
|
3.3.6 Prévention des erreurs (toutes)
(niveau AAA) |
- Si l’utilisateur peut envoyer une information, l’envoi est réversible, vérifié ou confirmé.
|
Robuste
Le contenu peut être traité de manière fiable par une variété d’agents utilisateurs incluant les technologies d’assistance.
Recommandation 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 |
4.1.1 Analyse syntaxique
(niveau A) |
- Les erreurs HTML/XHTML significatives en validation/analyse syntaxique sont évitées. Utilisez le validateur W3C
|
4.1.2 Nom, rôle et valeur
(niveau A) |
- 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.
|
Cette liste est donnée au titre d’une aide à l’implémentation des Web Content Accessibility Guidelines (WCAG) 2.0 (Recommandation W3C du 11 décembre 2008), qui sont sous Copyright © 2008 W3C® (MIT, ERCIM, Keio), Tous droits réservés. Les aspects légaux, la licence de marque et les conditions d’utilisation du W3C s’appliquent.
Liens commerciaux
WebAIM est une initiative de :
Copyright 1999-2009 WebAIM
Haut de la page 
|
|
version en français par Ideose.
version en espagnol par José Ramón Quevedo Santana.
version en tchèque par Radek Pavlícek.
S'abonner au blog Ideose
