Dans un précédent billet, nous présentions d’une manière générale le label Accessiweb de l’association BrailleNet. Voici maintenant quelques informations plus technique.
Définition : (Extrait du site accessiweb.org)
{{Ce label est une méthode d'application des recommandations internationales du WAI: les WCAG 1.0. Il comprend 2 éléments indissociables : une liste de 92 critères AccessiWeb et une méthodologie d'évaluation.
}}
Dans ce poste, je vais détailler les 92 critères, un prochain post parlera de la méthode d'évaluation.
Il y a trois niveaux de respect de ces critères :
- Bronze : 55 critères
- Argent : + 23 critères
- Or : + 14 critères
Ces critères sont divisés en 13 catégories :
- Eléments graphiques
- Cadres (frame)
- Couleurs
- Multimédia
- Tableaux
- Liens
- Scripts
- Eléments obligatoires
- Structuration de l'information
- Présentation de l'information
- Formulaires
- Aide à la navigation
- Contenus accessible
Voici un résumé des critères (ou téléchargez une version excel de tous les critères - 66ko):
Niveau Bronze :
Eléments graphiques : avoir un équivalent texte (ALT) approprié de moins de 60 caractères pour les images (IMG, AREA, MAP, SHAPE, …). L’équivalent texte doit donner la fonction du lien (si il y a un lien sur l’image)
Cadres (frame) : remplir par des contenus pertinents les balises NAME, NOFRAME, TITLE. Pas plus de 3 cadres par page. Les scrollings de tous les cadres doivent être définis à « automatique ».
Couleurs : les informations données par les couleurs doivent être lisible en noir et blanc (attention aux contrastes).
Multimédia : fournir un contenu textuel équivalent (en RTF, TXT ou HTML) aux éléments multimédia (vidéos, sons, …). Il faut que l’équivalent texte soit synchronisé avec la lecture de la vidéo (utilisation du langage SMIL).
Tableaux : utiliser les tableaux pour présenter des tableaux de valeurs (pas pour faire une présentation graphique). Saisir les balises SUMMARY, CAPTION, HEADER.
Liens : l’intitulé des liens doit être explicite et de moins de 80 caractères. Utiliser l’attribut TITLE et donner plus d’information que l’intitulé du lien tout en faisant également moins de 80 caractères. Les intitulés identiques doivent pointer sur la même page. Il ne faut donc pas mettre le lien « Lire la suite », mais un intitulé spécifique à l’article.
Scripts : sans langage de script (sans javascript par exemple), on doit pouvoir faire exactement la même chose qu’avec. Il faut donc une alternative qui donne les mêmes possibilités. Ex : pour les formulaires le contrôle de saisi coté client en javascript doit également être fait du coté serveur.
Eléments obligatoires : Saisir les éléments DOCTYPE, LANG, TITLE (différent pour chaque page). Signaler dans le lien les changements de langues.
Structuration de l'information : structurer l’information de manière cohérente (identique à l’affichage sur l’écran avec une lecture de haut en bas de gauche à droite). Utilisation des H1, H2, … pour les titres.
Présentation de l'information : séparer le contenu de la présentation. En désactivant les feuilles de style le site doit rester visible et les informations affichées dans le même ordre.
Formulaires : saisir les éléments LABEL, ID, FOR. Ajouter un équivalent texte sur l’image submit (le cas échéant)
Aide à la navigation : Placer le menu principal toujours au même endroit
Contenus accessibles : pas de rechargement automatique de la page, pas de redirection automatique par script, pas de popup non sollicité. Afficher le poids et l’extension de tous les fichiers en téléchargement. Faire un lien vers un site pour télécharger un logiciel permettant la lecture du fichier (adobe pour les PDF, …).
Niveau Argent :
Eléments graphiques : pas d’image texte (titre de la page, titre de chapitre, menu, …, doivent être en texte).
Cadres (frame) : remplir par des contenus pertinents les balises LONGDESC
Couleurs : -
Multimédia : -
Tableaux : lorsqu’un titre dépasse 15 caractères, utiliser l’attribut ABBR.
Liens : -
Scripts : -
Eléments obligatoires : décrire le contenu de la page (META, CHARSET).
Structuration de l'information : ajouter un plan du site, une page d’aide à la navigation un moteur de recherche interne, le tout atteignable sur toutes les pages du même endroit sur la page.
Présentation de l'information : les polices et les tableaux doivent utiliser les dimensions relatives. Avoir au moins une des polices sans empattement (Times New Roman sur PC et Time Roman sur MAC).
Formulaires : utiliser LEGEND et FIELDSET pour les blocs d’information de même nature. Organiser les informations de manière logique.
Aide à la navigation : faire des liens invisibles « Passer au menu », « Passer au contenu » pour permettre d’aller directement à la lecture de ces éléments.
Contenus accessibles : ne pas détourner le fonctionnement des balises de leur fonction original (BLOCKQUOTE pour une citation, UL pour une liste. De manière générale, ne pas utiliser les balises (B, CENTER, BASEFONT, APPLET, DIR, FONT, ISINDEX, MENU, S, STRIKE et U) et les attibuts (ALIGN, BGCOLOR, HEIGHT...) qui sont définis comme non valide dans la dernière version du HTML.
Niveau Or :
Eléments graphiques : Les tailles des images doivent être limitées pour ne pas provoquer des ascenseurs inutiles.
Cadres (frame) : -
Couleurs : -
Multimédia : -
Tableaux : -
Liens : pas plus de 9 catégories par niveau d’arborescence et pas plus de 40 liens par page (y compris les liens du menu).
Scripts : -
Eléments obligatoires : -
Structuration de l'information : la page de résultats d’un moteur de recherche doit afficher le nombre maximum de réponses par page, le nombre total de réponses, les liens suivant/précédent.
Présentation de l'information : -
Formulaires : -
Aide à la navigation : Présence d’un fil d’Ariane, de raccourcis clavier pour les liens importants (page d’accueil, page d’aide, plan du site, moteur de recherche, glossaire, contact). Il faut également si plusieurs liens sont l’un à coté de l’autre les séparer par exemple avec le caractère « | ». Le poids des pages HTML doit être inférieur à 70ko.
Contenus accessibles : Fournir un format alternatif aux fichiers en téléchargement peu accessible (PDF -> RTF). Utiliser les balises ACRONYM et ABBR pour les abréviations (pour la première utilisation dans la page). Pas d’écriture en majuscule pour les éléments de texte. Une page doit faire au maximum 3 hauteurs d’un écran 1024x768.
