AnySurfer Checklist 2.0

Différences entre les directives AnySurfer 2006 et 2010

Table des matières

Contexte

  • WCAG 2.0 est formulé indépendamment de la technologie et construit sur quatre principes : perceptible, utilisable, compréhensible et robuste.
  • Le label AnySurfer équivaut au WCAG 2.0 niveau A.
  • Nous comparons ici la nouvelle version des directives AnySurfer avec la version précédente des directives, publiée en 2006.
  • Cette liste structurée en 4 blocs (navigation, contenu, mise en page et interactivité) est spécifique à HTML, CSS et JavaScript.
  • Une autre liste de directives devrait s'appliquer aux autres technologies comme Flash et PDF. Cette liste n'est pas encore finalisée. En attendant les anciennes directives s'appliquent aux autres technologies. Elles ont été reprises dans un cinquième bloc, "autres technologies".
  • La version plus stricte du label AnySurfer (anciennement AnySurfer Plus)sera publiée dans le courant de 2010. Elle comprendra des éléments de WCAG 2.0 niveaux AA et AAA et sera établie en accord avec les partenaires du réseau AnySurfer.

Les nouvelles directives au niveau AnySurfer de base

Les directives ci-dessous ne faisaient pas partie de l'ancienne liste de directives au niveau AnySurfer de base. Elles en font maintenant partie.

  • Le code source est conforme à la spécification du langage.
  • La balise caption est utilisée pour préciser le titre des tableaux de données.
  • Les fichiers audio et vidéo sont annoncés
  • Les vidéos sont sous-titrées
  • Les champs sans label sont décrits par un tooltip
  • Les regroupements d'éléments dans une liste déroulante se font avec optgroup
  • Les champs de formulaires liés sont regroupés par un fieldset
  • L'étiquette des champs de saisie de date indique le format requis et un exemple
  • Lors de la validation les erreurs sont indiquées et expliquées par du texte
  • Les actions ne sont pas strictement liées à des contraintes de temps
  • Il est possible d'arrêter les mises à jour automatiques
  • Les fenêtres pop-up n'apparaissent pas automatiquement

Les directives qui sont supprimées au niveau AnySurfer de base

Certaines directives ne font plus partie des directives AnySurfer. Dans la plupart des cas, AnySurfer estime que ces directives sont encore importantes mais a voulu s'aligner avec les recommandations de niveau A du WCAG2.0. Cet alignement a pour but d'avoir une plus grande cohérence au niveau européen et mondial. Elle garantit également que l'utilisation d'un CMS conforme aux WCAG2.0 niveau A permette de créer du contenu conforme aux directives AnySurfer. Certaines de ces directives se retrouveront plus tard dans la liste de directives AnySurfer Plus.

  • La zone cliquable est d'au moins 15 px de haut et 15 px de large
  • Le format des fichiers à télécharger est précisé dans l'intitulé du lien
  • Les dimensions des pop-up sont modifiables
  • Les pop-up sont annoncés avant leur ouverture
  • Les nouvelles fenêtres sont utilisées uniquement pour les liens externes
  • La taille des caractères du texte graphique est au moins de 12 points
  • Les en-têtes des tableaux de données sont bien placés
  • Les changements de langue de la première page sont identifiés
  • La taille des caractères est facilement modifiable
  • Le contenu reste compréhensible après un agrandissement de 150%
  • Les pages sont affichées via un nombre maximum de 5 cadres
  • Les cadres peuvent être redimensionnés et/ou possèdent une barre de défilement
  • Les liens externes au site ouvrent une fenêtre qui ne fait partie du frameset
  • Une liste avec les liens vers les pages concernées est fournie (NOFRAMES))
  • Les couleurs sont suffisamment contrastées pour assurer une bonne lisibilité du texte

Les directives déplacées vers le bloc "autres technologies"

  • Les PDF restent compréhensibles après leur conversion en format texte
  • Les documents générés par des logiciels de bureautique sont lisibles
  • Les éléments essentiels des objets Flash ou Java ont une version HTML

Correspondance entre l'ancienne liste (2006) et la nouvelle (2010)

Pour chacune des directives de l'ancienne liste (2006), nous indiquons si la directive est reprise dans une des nouvelles directives ou non.

A. NAVIGATION

A.1. Navigation en général

  1. La totalité du site est utilisable sans la souris: devient 1.1 "La totalité du site est utilisable au moyen du clavier."

A2. Hyperliens

  1. Les intitulés des liens sont significatifs : devient 1.2 " Les intitulés des liens sont significatifs dans leur contexte"
  2. La zone cliquable est d'au moins 15 px de haut et 15 px de large : supprimé au niveau de base
  3. Le format des fichiers à télécharger est précisé dans l'intitulé du lien : supprimé au niveau de base

A.3. Pop-up et nouvelles fenêtres

  1. Les dimensions des pop-up sont modifiables : supprimé au niveau de base
  2. Les pop-up sont annoncés avant leur ouverture : supprimé au niveau de base
  3. Les nouvelles fenêtres sont utilisées uniquement pour les liens externes : supprimé au niveau de base

B. CONTENU

B.1. Texte

  1. Chaque page possède un titre significatif : devient 2.2.1 "Chaque page possède un titre significatif"
  2. Les textes sont structurés par la sémantique : devient 2.2.2 "Les pages sont structurées par la sémantique"

B.2. Eléments graphiques

Photos et illustrations
  1. Le alt des éléments graphiques porteurs d'information décrit l’illustration : devient 2.3.1 "Chaque image a un attribut alt"
Textes graphiques
  1. Le texte affiché par une image est répété dans son attribut alt : devient 2.3.1 "Chaque image a un attribut alt"
  2. La taille des caractères du texte graphique est d'au moins 12 points : supprimé au niveau de base
Graphiques complexes
  1. Le alt des graphiques complexes contient une description significative : devient 2.3.1 "Chaque image a un attribut alt"
  2. Les graphiques complexes sont accompagnés par un texte explicatif accessible dans le site : devient 2.3.2 " Les images complexes sont décrites par un texte"
Images de décoration
  1. Le alt des images de décoration est vide : devient 2.3.1 "Chaque image a un attribut alt"
  2. Les images en arrière-plan ne véhiculent aucune information : devient 2.3.3 "Les images d'arrière-plan qui contiennent de l'information ont une variante accessible."

B.3. Tableaux simples

  1. Les tableaux sont compréhensibles lors de leur lecture linéaire : devient 2.4.1 " Les tableaux sont compréhensibles lors de leur lecture linéaire"
  2. Les en-têtes des tableaux de données sont bien placés : supprimé au niveau de base
  3. Des th définissent les en-têtes des tableaux de données : devient 2.4.2 " Des th définissent les en-têtes des tableaux de données"

B.4. Tableaux complexes

  1. Les tableaux de données complexes sont accessibles ou sont accompagnés de textes explicatifs : devient 2.4.4 " Les tableaux complexes ont un attribut Headers"

B.5. Sons et vidéo

  1. Le contenu des éléments multimédia est également disponible en HTML : devient 2.5.1 " Les fichiers vidéo et audio ont une version textuelle"
  2. Les sons et les vidéos ne démarrent pas automatiquement : devient 2.5.4 " Le son ne démarre pas automatiquement"
  3. Les boutons de commandes des éléments multimédia sont accessibles : inclus dans 1.1 "La totalité du site est utilisable au moyen du clavier."

B.6. Documents téléchargeables

  1. Les PDF restent compréhensibles après leur conversion en format texte : maintenu dans "autres technologies"
  2. Les documents générés par des logiciels de bureautique sont lisibles : maintenu dans "autres technologies"

B.7. Langues

  1. La langue principale de chaque page est identifiée : devient 2.2.3 "La langue principale de chaque page est indiquée"
  2. Les changements de langue de la première page sont identifiés : supprimé au niveau de base

C. MISE EN PAGE

C.1. Textes

  1. La taille des caractères est facilement modifiable : supprimé au niveau de base
  2. Les lettres dans un mot ne sont pas séparées par des espaces ou autres caractères : devient 3.1.2 " Les espaces et autres caractères ne sont pas utilisés pour produire des effets visuels"
  3. Les liens sont facilement identifiables comme tels : devient 3.1.1 " Les liens sont facilement identifiables comme tels"

C.2. Feuilles de styles (CSS)

  1. Le contenu reste compréhensible après un agrandissement de 150% : supprimé au niveau de base
  2. La logique du contenu des pages respecte le sens de lecture du code source : devient 3.2.1 "Le contenu de la page suit un ordre logique"

C.3. Tableaux de mise en page

  1. Les pages restent compréhensibles lors de leur lecture linéaire : devient 3.2.1 " Le contenu de la page suit un ordre logique"

C.4. Cadres ou Frames

  1. Les pages sont affichées via un nombre maximum de 5 cadres : supprimé au niveau de base
  2. Chaque cadre possède un nom et un titre significatifs : devient 3.2.2 "Chaque cadre possède un nom et un titre significatif"
  3. Les cadres peuvent être redimensionnés et/ou possèdent une barre de défilement : supprimé au niveau de base
  4. Les liens externes au site ouvrent une fenêtre qui ne fait pas partie du frameset : supprimé au niveau de base
  5. Une liste avec les liens vers les pages concernées est fournie (NOFRAMES) : supprimé au niveau de base

C.5. Mouvements

  1. Les animations démarrent uniquement sur commande du visiteur : devient 3.3.2 "Les animations peuvent être arrêtées"
  2. Les animations peuvent être arrêtées : devient 3.3.2 "Les animations peuvent être arrêtées"
  3. Les textes et les images ne clignotent pas : devient 3.3.1 " Les textes et les images ne clignotent pas plus de 3 fois par seconde"

C.6. Couleurs

  1. Le contenu est compréhensible pour quelqu'un qui ne peut distinguer les couleurs : devient 3.4.1 "Le contenu est compréhensible pour quelqu'un qui ne peut distinguer les couleurs"
  2. Les couleurs sont suffisamment contrastées pour assurer une bonne lisibilité du texte : supprimé au niveau de base

D. INTERACTIVITE

D.1. Formulaires

  1. La fonction de chaque champ de formulaire est exprimée dans un élément LABEL avec attribut for : devient 4.1.1 "Les labels et éléments des formulaires sont intimement liés"
  2. Les champs obligatoires sont annoncés dans leur label : devient 4.1.6 "Les champs obligatoires sont annoncés dans leur label"
  3. L'ordre de tabulation permet de parcourir le formulaire tel qu'il est affiché à l'écran : devient "Le contenu de la page suit un ordre logique" et "la totalité du site est utilisable avec le clavier"
  4. Les boutons des formulaires contiennent des informations significatives : devient 4.1.7 "Chaque formulaire a un bouton d'envoi visible."

D.2. JavaScript

  1. Le JavaScript des éléments essentiels est accessible, utilisable sans la souris : inclus dans 1.1 "La totalité du site est utilisable au moyen du clavier." et 4.3 "Il est possible d'arrêter les mises à jour automatiques."
  2. Les rafraîchissements dynamiques sont annoncés : devient 4.4 "Les rafraîchissements dynamiques sont annoncés"

D.3. Flash et Java

  1. Les éléments essentiels des objets Flash ou Java ont une version HTML : maintenu dans "autres technologies"

Correspondance entre la nouvelle liste et l'ancienne

Nous proposons ci-dessous, pour chaque directive de la nouvelle liste, une référence à l'ancienne liste et, lorsque cela s'impose, une explication de la différence.

    1 Navigation

    1.1 La totalité du site est utilisable au moyen du clavier (plus stricte)

    Reprend totalement "La totalité du site est utilisable sans la souris". On y a ajouté l'interdiction de supprimer le focus par défaut d'un élément HTML et la recommandation de l'accentuer. Cette directive reprend également certains des éléments des anciennes directives sur le JavaScript.

    1.2 Les intitulés des liens sont significatifs dans leur contexte (moins stricte)

    Reprend partiellement "Les intitulés des liens sont significatifs". Cette directive est devenue un peu moins sévère parce qu'il suffit qu'un lien ait du sens dans un contexte et non pas hors contexte. Cette concession est faite dans la volonté d'aligner avec WCAG2.0. AnySurfer continue de recommander des liens significatifs même hors contexte mais exige uniquement la signification dans un contexte.

    2 Contenu

    2.1 Le code source est conforme à la spécification du langage (nouvelle)

    Cette directive exige que le code HTML soit valide, c'est à dire:

    • les éléments ont une balise de début et de fin
    • les éléments sont imbriqués correctement
    • les éléments ne contiennent pas de double attribut
    • les valeurs id sont uniques

    2.2 Texte

    2.2.1 Chaque page possède un titre significatif (idem)

    Reprend intégralement le contenu de "Chaque page possède un titre significatif".

    2.2.2 Les pages sont structurées par la sémantique (plus stricte)

    Reprend intégralement le contenu de "Les textes sont structurés par la sémantique". Il y a toutefois une légère modification : toutes les listes doivent être construites avec ul et pas seulement les listes à plusieurs niveaux.

    2.2.3 La langue principale de chaque page est indiquée (idem)

    Reprend totalement le contenu de "La langue principale de chaque page est identifiée".

    2.3 Images

    2.3.1 Chaque image a un attribut alt (idem - regroupement de directives)

    Reprend intégralement le contenu de

    • Le alt des éléments graphiques porteurs d'information décrit l’illustration
    • Le texte affiché par une image est répété dans son attribut alt
    • Le alt des graphiques complexes contient une description significative
    • Le alt des images de décoration est vide

    On y a également ajouté un paragraphe sur les captchas.

    2.3.2 Les images complexes sont décrites par un texte (idem)

    Reprend intégralement le contenu de "Les graphiques complexes sont accompagnés par un texte explicatif accessible dans le site".

    2.3.3 Les images d'arrière-plan qui contiennent de l'information ont une variante accessible (idem)

    Reprend le contenu de "Les images en arrière-plan ne véhiculent aucune information".

    2.4 Tableaux

    2.4.1 Les tableaux sont compréhensibles lors de leur lecture linéaire (idem)

    Reprend intégralement le contenu de "Les tableaux sont compréhensibles lors de leur lecture linéaire".

    2.4.2 Des th définissent les en-têtes des tableaux de données (idem)

    Reprend intégralement le contenu de "Des th définissent les en-têtes des tableaux de données".

    2.4.3 La balise caption est utilisée pour préciser le titre des tableaux de données (nouvelle)

    S'il y a une légende pour un tableau, celle-ci doit être spécifiée au moyen de l'élément caption. Cette directive est une application de l'utilisation de la sémantique. Elle faisait partie du label AnySurferPlus. Elle remplace partiellement la directive supprimée "les en-têtes des tableaux de données sont bien placées".

    2.4.4 Les tableaux complexes ont un attribut Headers (plus stricte)

    Version plus stricte de "Les tableaux de données complexes sont accessibles ou sont accompagnés de textes explicatifs". On recommande surtout d'éviter les tableaux complexes en les divisant en plusieurs tableaux simples et, si cela ne peut pas être évité, on demande d'utiliser les éléments sémantiques (headers et id) pour marquer le tableau.

    2.5 Vidéo et son

    2.5.1 Les fichiers audio et vidéo sont annoncés (nouvelle)

    Cette directive s'inscrit dans le principe de prévisibilité. Elle est nouvelle.

    2.5.2 Les fichiers audio et vidéo ont une version textuelle (idem)

    Reprend intégralement le contenu de "Le contenu des éléments multimédia est également disponible en HTML".

    2.5.3 Les vidéos sont sous-titrées (nouvelle)

    Cette directive est nouvelle au niveau AnySurfer. Elle faisait partie de AnySurfer Plus.

    2.5.4 Le son ne démarre pas automatiquement (moins stricte)

    Reprend le contenu de la directive "Les sons et les vidéos ne démarrent pas automatiquement". La directive est légèrement assouplie : le son peut démarrer automatiquement s'il ne dure pas pus de 3 secondes ou s'il peut être arrêté facilement.

    3 Mise en page

    3.1 texte

    3.1.1 Les liens sont facilement identifiables comme tels (idem)

    Reprend le contenu de "Les liens sont facilement identifiables comme tels".

    3.1.2 Les espaces et autres caractères ne sont pas utilisés pour produire des effets visuels (idem - plus élaborée)

    Reprend le contenu de "Les lettres dans un mot ne sont pas séparées par des espaces ou d'autres caractères". Cette directive contient des explications supplémentaires sur l'art ASCII et les alphabets étrangers.

    3.2 Mise en page

    3.2.1 Le contenu de la page suit un ordre logique (idem - regroupement de directives)

    Reprend le contenu de

    • La logique du contenu des pages respecte le sens de lecture du code source
    • Les pages restent compréhensibles lors de leur lecture linéaire
    3.2.2 Chaque cadre possède un nom et un titre significatif (idem)

    Reprend le contenu de "Chaque cadre possède un nom et un titre significatif".

    3.3 Mouvement

    3.3.1 Les textes et les images ne clignotent pas plus de 3 fois par seconde (idem - plus spécifique)

    Reprend en grande partie le contenu de "Les textes et les images ne clignotent pas". La directive est plus spécifique et quantifiable.

    3.3.2 Les animations peuvent être arrêtées (idem)

    Reprend le contenu de deux anciennes directives

    • Les animations démarrent uniquement sur commande du visiteur
    • Les animations peuvent être arrêtées

    3.4 Couleur et autre information visuelle

    3.4.1 Le contenu est compréhensible pour quelqu'un qui ne peut distinguer les couleurs (plus étendue)

    Reprend le contenu de "Le contenu est compréhensible pour quelqu'un qui ne peut distinguer les couleurs". La directive est étendue aux formes, positions et sons.

    Interactivité

    4.1 Formulaires

    4.1.1 Les labels et éléments des formulaires sont intimement liés (idem)

    Reprend le contenu de "La fonction de chaque champ de formulaire est exprimée dans un élément LABEL avec attribut for".

    4.1.2 Les champs sans label sont décrits par un tooltip (nouvelle)

    Cette directive est nouvelle dans la liste AnySurfer. Il y avait une directive similaire au niveau AnySurfer Plus.

    4.1.3 L'étiquette des champs de saisie de date indique le format requis (nouvelle)

    Toute nouvelle directive.

    4.1.4 Les champs de formulaires liés sont regroupés par un fieldset (nouvelle)

    Cette directive existait déjà au niveau AnySurfer Plus. Il n'est pas obligatoire de regrouper des champs de formulaire mais lorsqu'un regroupement a lieu il doit être obtenu au moyen de l'élément fieldset.

    4.1.5 Les regroupements d'éléments dans une liste déroulante se font avec optgroup (nouvelle)

    Cette directive est nouvelle. AnySurfer ne demande pas de faire des regroupements dans une liste déroulante mais insiste sur le fait que, lorsque ce genre de regroupements est fait, il doit l'être au moyen de l'élément optgroup.

    4.1.6 Les champs obligatoires sont annoncés dans leur label (plus stricte)

    Reprend partiellement le contenu de "Les champs obligatoires sont annoncés dans leur label". Si on indique les champs obligatoires, il faut que ce soit perceptible par tout le monde.

    4.1.7 Chaque formulaire a un bouton d'envoi visible (nouvelle)

    Reprend en partie le contenu de "Les boutons des formulaires contiennent des informations significatives".

    4.1.8 Lors de la validation, les erreurs sont indiquées et expliquées par du texte (nouvelle)

    Toute nouvelle directive.

    4.2 Sessions et limites de temps

    4.2.1 Les actions ne sont pas strictement liées à des contraintes de temps (nouvelle)

    Toute nouvelle directive.

    4.3 Il est possible d'arrêter les mises à jour automatiques (nouvelle)

    Toute nouvelle directive.

    4.4 Les rafraîchissements dynamiques sont annoncés (idem)

    Reprend le contenu de "Les rafraichissements dynamiques sont annoncés".

    4.5 Les fenêtres pop-up n'apparaissent pas automatiquement (nouvelle)

    L'ancienne directive sur les pop-up demandait de les annoncer. Cette nouvelle directive interdit l'ouverture de pop-up lors du chargement de la page.