Catégories

Check-list WCAG 2.0

checking them off the list
cc par numstead

1. Perceptible.

1.1. Texte alternatif : fournir des solutions de rechange pour tout contenu non textuel.

A Toutes les images, les boutons de formulaires, et les zone active des images mapé doivent avoir un équivalent textuel approprié.
A Les images qui ne véhiculent pas d’information possèdent un texte alternatif null (atl=” ») ou sont implémenté en CSS. Les images liés ont un texte alternatif de description.
A Les alternatives équivalente des images complexes, sont disponible dans le contexte ou dans une page séparé (lié ou dans le “longdesc”).
A Les boutons des formulaire ont une valeur significative.
A Les champs de formulaire ont une étiquette (label) associé ou, à défaut, un attribut title descriptif.
A Les élément multimédia (vidéo, flash) embarqué sont identifié par un contenu textuel adapté.
A Les frames sont correctement titré.

1.2. Fournir un contenu alternatif à tous les média qui évoluent dans le temps.

A Un texte de transcription est prévu pour les contenus audio pré-enregistré.
A Un texte de transcription et/ou un alternatif audio est prévu pour les contenus vidéo pré-enregistré.
A Des sous-titre synchronisés sont fourni pour les vidéos pré-enregistré.
A Un alternatif audio est fourni et synchronisé avec le contenu vidéo.
AA Des sous-titres synchronisés sont fourni pour tous les contenus vivant (audio ou vidéo).
AA Un alternatif audio est fourni et synchronisé avec une vidéo vivante. (Requis uniquement si la vidéo contient des informations visuelles.).
AA Une vidéo en langage des signes est fourni pour toutes les média qui contiennent du son.
AAA Si la vidéo ne permet pas d’alternatif sonore due au manque de temps mort dans la vidéo, une version alternative avec des pauses qui permettent une description sonore est fourni.
AAA Une transcription est fourni pour tous les media pré-enregistré qui possède une bande vidéo.
AAA Une transcription est fourni pour tous les media audio même vivant.

1.3. Créer le contenu qui peut être présenté de différentes façons sans perte d’information

A Un balisage sémantique est utilisé. Pour rappel :

  • Hiérarchisation : h1, h2, h3…
  • Listes : ul, ol, li
  • Emphase : strong, em, code, abbr, blockquote…
  • Tableau pour les données tabulaire uniquement.
  • Utilisation de label pour les formulaires
A Le code se déroule d’une façon logique, notamment les éléments sont séquencé correctement.
A Le contenu ne fait pas allusion à des éléments sensoriel du type : le bouton à côté, la colonne de droite, la forme, la taille, la couleur…

1.4. Faciliter l’accès des utilisateurs à voir et à entendre le contenu.

A La couleurs n’est pas le seul moyen d’identification d’un message d’information sauf si le contraste entre ces couleurs est suffisant (3:1).
A Un mécanisme est prévu pour arrêter, mettre en pause, ou régler le volume pour l’audio qui se joue automatiquement sur une page pour plus de 3 secondes.
AA Texte et images de texte ont un contraste élevé (3:1 pour les gros textes et 4.5:1 sinon).
AA La page est lisible et fonctionnel lorsque la taille du texte est doublé.
AA Si la même présentation visuelle peut être faite en utilisant du texte, une image n’est pas utilisée pour présenter ce texte.
AAA Texte et images de texte ont un contraste élevé (3:1 pour les gros textes et 4.5:1 sinon).
AAA Les bandes audio n’ont qu’un bruit de fond très faible de sorte que le discours est facile à distinguer.
AAA Les blocs de texte :

  • ne font pas plus 80 caractères de large
  • ne sont pas pleinement justifié
  • ont un interlignage suffisant (au moins la moitié de la hauteur) et un espace entre les paragraphes suffisant (au moins 1,5 fois l’espace entre les lignes)
  • ont une couleur de premier plan et d’arrière plan définit
  • ne nécessitent pas de défilement horizontale si la taille du texte est doublé.
AAA Le texte utilisé dans une image ne véhicule pas de contenu sauf s’il ne peut être présenté avec du texte seul (schéma).

2. Actionnable

2.1. Rendre toutes les fonctionnalités disponibles à partir d’un clavier.

A Toutes les fonctionnalités de la pages sont disponible avec le clavier, à moins que ce ne soit techniquement impossible (par exemple dessin).
A Les raccourcis clavier de la page n’entrent pas en conflit avec les raccourcis du navigateur ou de lecteur d’écran (les accesskey ne sont pas recommandés).
A L’utilisateur peut naviguer sur tous les éléments de la page en utilisant uniquement le clavier : le focus du clavier n’est jamais bloqué ou coincé à un certain élément de la page.
AAA Toutes les fonctionnalités de la page sont disponible en utilisant le clavier.

2.2. Fournir aux utilisateurs le temps de lire et d’utiliser le contenu.

A Si une page ou une application a une limite dans le temps, celle-ci laisse la possibilité à l’utilisateur de la désactiver, de l’ajuster ou de l’étendre sauf pour les événements en temps réél comme les enchaires où le délais est requis ou si la limite est supérieur à 20h.
A Tout contenu qui bouge, clignotte ou défile pendant plus de 5 secondes peut être mis en pause, arrété ou masqué par l’utilisateur.
A Tout contenu mise à jour de quelques manières que ce soit peut être mis en pause, arrété ou masqué par l’utilisateur.
AAA Le contenu n’a pas de contrainte temporel.
AAA Interruptions (alertes, mises à jour de la page, etc) peuvent être reportées ou supprimées par l’utilisateur.
AAA Si une session d’authentification expire, l’utilisateur peut authentifier de nouveau et de poursuivre l’activité sans perdre toutes les données de la page en cours.

2.3. Ne pas concevoir des contenus d’une manière qui est connu pour provoquer des convulsions.

A Pas de contenu de la page clignotant plus de 3 fois par seconde sauf si…
AAA Pas de contenu de la page clignotant plus de 3 fois par seconde.

2.4. Fournir les moyens d’aider les utilisateurs à naviguer, trouver le contenu et s’orienter.

A Un méchanisme est fourni pour sauter les morceaux de contenu répétitif (par exemple le menu).
A Le titre existe de manière descriptive et informative.
A La navigation (ordre des liens, éléments de formulaire…) est logique, intuitive et linéaire.
A La cible de chaque lien peut être déterminée à partir du texte de lien seul ou du texte de lien et son contexte.
A Les liens ayant le même texte et pointant vers des endroits différents sont aisément diférentiable.
AA Au moins deux méthodes sont disponible pour accéder à une page.
AA Les titres et « labels » de formulaire ainsi que les contrôles sont descriptif et informatif. Ils ne sont pas répétitif (par exemple « lire la suite ») sauf si la structure prévoit un moyen adéquat de différenciation.
AA L’élément de la page qui a le focus du clavier est visible : si vous tabulez dans la page, vous voyez où vous êtes.
AAA Si une page web fait partie d’une séquence, une indication de la page en cours est fourni par exemple avec un fil d’arianne ou l’épate de la page courante.
AAA La cible de chaque lien peut être déterminée à partir du texte de lien seul.
AAA Les liens ayant le même texte et pointent vers le même endroits.
AAA Les sections individuelles sont réalisés avec des titres.

Compréhension

3.1. Le texte est lisible et compréhensible

A La langue de la page est identifiée à l’aide de l’attribut HTML lang par exemple.
AA Le cas échéant, si une autre langue est utilisé, elle est identifié.
AAA Les mots ambiguë, inconnus ou utilisés d’une manière très spécifique sont définies par le texte adjacent, une liste de définitions, un glossaire, ou autre méthode appropriée.
AAA Les abbréviations sont systématiquement définit la première fois qu’elles sont utilisé en utilisant l’élément « abbr » ou un lien vers une définition ou glossaire.
AAA Si le texte n’écéssite une capacité suppérieur à neuf année d’étude (secondaire), alors une alternative en dessous de ce niveau est donné.
AAA Si la prononciation d’un mot est essentiel à sa compréhension, sa prononciation est fourni immédiatement après le mot ou par l’intermédiaire d’un lien ou d’un glossaire.

3.2. Prévisible: Faire apparaître les pages Web et les faire fonctionner de manière prévisible

A La page n’est pas modifié quand un élément de la page reçoit le focus.
A La page n’est pas modifié quand l’utilisateur interagit avec un contrôle.
AA Les liens de navigation qui se répètent sur les pages web ne changent pas d’ordre d’une page à l’autre.
AA Les éléments qui ont la même fonctionnalité sur plusieurs pages web sont toujours identifiés de la même manière. Par exemple, un champ de recherche situé en haut du site doit toujours être identifié de la même façon.
AAA Les changements sur une page sont déclenchés par l’utilisateur, sinon un mécanisme est prévu pour les désactiver.

3.3. Assistance à la saisie : aider les utilisateurs et éviter les erreurs.

A Lorsqu’une erreur est detecté, l’élément à la source de l’érreur est identifié et l’erreur décrite textuellement à l’utilisateur.
A Instruction et label sont fournit quand le contenu requiert une saisie.
AA Des sugestions à la correction des erreurs sont fourni.
AA Les pages demandant la saisie de données légale ou financière permettent de vérifier, d’annuler et de valider ces données.
AAA Une aide contextuelle est disponible.
AAA Les pages demandant la saisie de données permettent de vérifier, d’annuler et de valider ces données.

4. Robustesse

4.1. Assurrer la compatibilité avec un maximum de navigateur

A Les erreurs significative de HTML / XHTML / CSS sont évité grâce à l’emplois du validateur W3C
A Les éléments et attributs HTML sont utilisés correctement et à bonne escient.

checklist_wcag

WebAIM’s WCAG 2.0 Check (en)Web Content Accessibility Guidelines (WCAG) 2.0 (en)

2 réponses sur « Check-list WCAG 2.0 »

Génial même, et du coup j’ai vraiment beaucoup de boulot… Après je pense qu’il y a pas mal d’éléments à « épurer ». De plus j’ai peur que ta liste invite un site à diminuer l’implication du lecteur, particulièrement sur la phase de compréhension, à moins d’être à la chasse au visiteur/client, je ne vois pas l’intérêt d’essayer de « vulgariser » le contenu. Je ne pense pas que Bourdieu, ou Marx ont fait une édition « pour les nuls » de la théorie de la pratique ou du capital. Je préfère ne pas prendre mon lecteur pour un abruti et le laisser « réfléchir ». Après, évidemment, c’est très contextuel. Du reste attention à certaines grosses coquilles, par exemple : « sont fournit », « neuf année », « Les mots ambiguë », « n’écéssite »