Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA)

Transcription

1 Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) No. Validation Tests avec les outils Commentaires A Contenu non- textuels a1 Les images informatives ont- elles toutes un attribut «alt» non vide? a2 Les images- liens ont- elles toutes un attribut «alt» non vide? a3 Les boutons- images ont- ils tous un attribut «alt» non vide? a4 Les zones sensibles des images à liens multiples (image maps) ont- elles toutes un attribut «alt» non vide? a5 Les images apportant de l'information au contenu sont- elles incluses dans le code (x)html et non liées par le code CSS? a6 S'il y a des puces personnalisées, le sont- elles par CSS?

2 a7 Les images décoratives et les images ayant une légende sont- elles pourvues d'un attribut «alt» vide ou, à défaut, liées par CSS? a8 Les textes de remplacement sont- ils courts et pertinents? Images Afficher les attributs alt a9 Lorsqu'il y a des mises à jour automatiques, les textes de remplacement des contenus non textuels restent- ils pertinents? Images Afficher les attributs alt a10 Les éléments non textuels ayant besoin d'une longue description en sont- ils pourvus? Utiliser Images Liste des images pour vérifier s'il y a un longdesc Voir source voir le code source généré Rechercher longdesc= dans le code source a11 Les «longues descriptions» sont- elles pertinentes? Utiliser Images Liste des images pour vérifier s'il y a un longdesc Voir source voir le code source généré Rechercher longdesc= dans le code source a12 a13 Les contenus non textuels invisibles, purement décoratifs ou utilisés pour faire du formatage visuel ont- ils un attribut «alt» vide? Si le contenu non textuel est un CAPTCHA qui vise à confirmer que ce contenu est visité par une personne plutôt que par un ordinateur, un texte de remplacement est- il fourni pour identifier et décrire les contenus non textuels, et des formes alternatives du CAPTCHA sont- elles offertes sous différents types de perceptions sensorielles pour accomoder différents types d'incapacités?

3 B En- têtes de sections b1 Les en- têtes de section identifiables visuellement sont- ils codés comme tels? HeadingsMap : Outils HeadingsMap b2 La page comporte- t- elle des en- têtes de section codés avec h1 à h6? b3 Les balises h1 à h6 balisent- elles effectivement des titres? b4 Le texte des en- têtes de section est- il significatif? b5 Le texte des en- têtes de section décrit- il la section dont il est le titre? b6 La hiérarchie des en- têtes est- elle bien construite? HeadingsMap : Outils HeadingsMap

4 C c1 Formulaires Le libellé de chacun des champs est- il situé près de ce dernier sur la page de manière à bien l'identifier? c2 Les libellés des champs sont- ils associés à ceux- ci de façon univoque à l'aide des attributs «id» et «for»? Formulaires information sur les formulaires c3 c4 Les groupes de boutons radio ou de cases à cocher sont- ils balisés avec <fieldset> et <legend>? Les groupements en <fieldset> sont- ils titrés avec <legend> et la description est- elle pertinente? Désactivers les styles CSS Tous les styles Désactivers les styles CSS Tous les styles c5 Les champs de formulaire ont- ils un libellé ou un attribut «title»? Formulaires information sur les formulaires c6 Le libellé ou l'attribut «title» de chacun des champs est- il pertinent? Formulaires information sur les formulaires D Tableaux de données d1 Les tableaux de données sont- ils structurés avec un balisage approprié? Information afficher les informations de l'élément d2 Lorsque qu'un attribut «summary» est utilisé dans un tableau de données, son contenu décrit- il la structure du tableau de façon pertinente sans dupliquer l'information déjà présentée dans le <caption>, s'il y a lieu?

5 d3 Les cellules d'en- tête des tableaux de données complexes ont- elles des attributs «id»? Examiner la page pour identifier les tableaux complexes. d4 d5 E Les attributs «id» des cellules d'en- tête des tableaux de données complexes sont- ils d'emploi unique? Les cellules de données des tableaux complexes sont- elles associées aux cellules d'en- têtes appropriées par l'attribut «headers»? Tableaux de présentation Examiner la page pour identifier les tableaux complexes. Examiner la page pour identifier les tableaux complexes. e1 Les tableaux de mise en page sont- ils exempts d'un attribut «summary» non vide? e2 Les tableaux de mise en page sont- ils exempts de titre <caption>? e3 Les tableaux de mise en page sont- ils exempts de cellules d'en- tête <th>? Tableaux Entêtes des tableau Entourer entourer les tableaux cellules de tableaux Cocher aussi : afficher le nom de l élément entouré e4 La lecture des tableaux de mise en page demeure- t- elle logique après les avoir linéarisés? Tableaux linéariser Divers linéariser la page

6 F f1 Utilisation de la couleur Les informations transmises par la couleur le sont- elles aussi via un texte ou un texte de remplacement? f2 Les liens restent- ils visuellement distincts sans la perception des couleurs? f3 Les champs obligatoires sont- ils identifés et le sont- ils sous forme de texte? f4 f5 G Lorsque le texte fait moins de 18 points ou moins de 14 points en gras, le contraste de luminosité avec son arrière- plan est- il d'au moins 5 pour 1? Lorsque le texte fait 18 points ou plus, ou 14 points ou plus en gras, le contraste de luminosité avec son arrière- plan est- il d'au moins 3 pour 1? Navigation au clavier Couleur Analyseur de contrastes [application] Firefox : Outil d'analyse des contrastes de couleurs Couleur Analyseur de contrastes [application] Firefox : Outil d'analyse des contrastes de couleurs g1 Les événements de script sont- ils accessibles au clavier? Code source Mise en avant du code source généré Mise en avant des événements Rechercher mouseover, mouseout, mousedown et mouseup dans le code source g2 La page est- elle exempte de scripts qui émulent des liens et qui, par conséquent, ne sont pas accessibles au clavier? Code source Voir le code source généré Rechercher onclick="this.location.href= dans le code source Rechercher onclick="this.location.href= dans le code source g3 g4 À moins d'être avisé d'une autre méthode, l'utilisateur peut- il se déplacer hors du composant où il se trouve en utilisant soit une touche de direction soit la touche tabulation? Les éléments <applet>, <object> et <embed> possèdent- ils un mécanisme au clavier permettant de retourner à la fenêtre parent afin de parcourir le reste de la page?

7 g5 H La touche TAB permet- elle de parcourir les liens et les champs de formulaire dans un ordre logique? Aide à la navigation Structure Mettre en valeur l'élément ayant le focus Entourer entourer l'élément survolé Cocher aussi : afficher le nom de l élément entouré h1 Un mécanisme permettant de contourner les blocs de contenus répétés d'une page à l'autre et d'aller directement au contenu principal est- il prévu (un lien de contournement Information Voir les liens internes ou un en- tête <h1> placé au début du contenu principal)? Information Voir les liens Entourer Entourer les titres (H1- H6) h2 La page a- t- elle un élément <title> non- vide? Lire la barre de titre apparaissant dans le fenêtre du navigateur. h3 Le texte du <title> est- il significatif, décrit- il la page? Lire la barre de titre apparaissant dans le fenêtre du navigateur. h4 h5 I La destination de chaque lien peut- elle être déterminée à partir de son libellé ou de son contexte déterminable par programmation (paragraphe ou autre élément courant)? La zone active (focus) est- elle visuellement repérable lorsque l'utilisateur se déplace au clavier? Langue Informations Liste des liens [nouvelle fenêtre] Outils informations sur la page onglet liens i1 La langue principale du document est- elle correctement identifiée? Information Mettre en valeur les attributs lang Rechercher <html et <body et l'attribut lang i2 Les changements de langue sont- ils correctement identifiés dans le code? Information Mettre en valeur les attributs lang Rechercher lang=