Propulsé par le RAAMM

Technique

Dans les différents grilles d’évaluation proposées, nous vous recommandons l’utilisation de deux outils gratuits :

  • La Web Accessibility toolbar pour Internet Explorer sous Windows seulement (en français);
  • La Web developer toolbar pour Firefox, Chrome ou Opera sous Windows ou Mac OS X (en français);
  • Si vous travaillez sur Firefox, il faut aussi ajouter deux outils de mesure des contrastes de couleur :
    • le Colour Contrast Analyser, The  Paciello Group qui offre une pipette permettant d’aller chercher précisément la couleur du texte et celle de l’arrière-plan. C’est le seul outil qui permet d’évaluer le contraste du texte apparaissant sur une image.
    • la Juicy Studio Accessibility Toolbar qui comporte aussi un outil automatique d’évaluation des contrastes qui est plus rapide pour évaluer tous les contrastes utilisés sur une même page. En fait, il évalue toutes les couleurs contrôlées par la feuille de style CSS, mais ne comporte pas de pipette comme le premier outil pour évaluer le contraste à l’intérieur d’une image.
  • Pour visualiser l’utilisation d’ARIA, vous pouvez utiliser The Visual ARIA Bookmarklet que vous pouvez installer dans la plupart des navigateurs.

De façon générale, les deux première barres d’outils sont assez équivalentes et le choix de l’une ou de l’autre est donc une question de préférence.

Notons toutefois, que pour l’évaluation des tableaux de données complexes sur Firefox, il faut aussi recourir à la Juicy Studio Accessibility Toolbar qui propose un inspecteur de tableau facile à utiliser et qui vient compléter les limites de la barre d’outils pour les développeurs sur Firefox.

Aux deux premiers outils, nous vous proposons d’ajouter un autre outil gratuit qui n’est disponible qu’en anglais, mais serait facile à traduire. Cet outil s’appelle Wave et a été conçu par l’organisme américain WebAIM, organisme qui offre de nombreuses ressources en matière d’accessibilité. Wave ajoute des icônes à la page Web pour marquer les erreurs (en rouge), les avertissement (en jaune) et divers informations sémantiques utiles (en vert). Il s’agit donc d’un outil d’exploration visuelle du niveau de conformité d’une page. Une fois que l’on connaît la signification des icônes, la langue n’est donc plus une barrière.

Cet outil existe sous deux formes :

  • La Wave toolbar pour Chrome sous Windows ou Mac OSX;
  • La version en ligne de Wave.

Contrairement aux deux premiers outils, Wave affiche presque instannément tous les aspect de la page qui peuvent faire l’object d’une évaluation automaituqe (environ un tiers) ou semi-automatique (environ un autre tiers). C’est donc dire qu’une évaluation complète doit inclure aussi une bonne part de vérifications manuelles basée, en partie sur des informations fournies par Wave. Cet outil ne produit aucun rapport sinon la page émaillée de toute une panoplie d’icônes.

Malgré ses limites, Wave peut s’avérer fort utile dans le quotidien pour les développeurs Web parce qu’il permet une vue d’ensemble ou les erreurs et les avertissement peuvent être faciliment repérés, permettant de corriger plusieurs problèmes et d’alléger d’autant les vérifications et les corrections nécessaires à l’étape du contrôle qualité.

Il existe aussi des outils commerciaux à des coûts modérés ou considérables selon les fonctionnalités proposées.

1.1 Les équivalents textuels

Niveau A

Questions Méthode d’évaluation

Méthode 1.

Méthode 2.

Méthode 2.

Méthode 2.

Méthode 2.

Méthode 2.

Méthode 2.

Méthode 3.

1.2 Médias temporels

Niveau A

Questions Méthode d’évaluation

Niveau AA

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

1.3 Adaptable

Niveau A

Questions Méthode d’évaluation

Méthode 4.

Méthode 5.

Méthode 6.

Méthode 6.

Méthode 7.

Méthode 7.

Méthode 8.

Méthode 8.

Méthode 8.

Méthode 8.

Méthode 8.

Méthode 9.

Méthode 9.

1.4 Distinguable

Niveau A

Questions Méthode d’évaluation

Niveau AA

Méthode 10.

Niveau AAA

Questions Méthode d’évaluation

Méthode 10.

Méthode 11.

2.1 Accessibilité au clavier

Niveau A

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

2.2 Délai suffisant

Niveau A

Questions Méthode d’évaluation

Méthode 12

Niveau AAA

Questions Méthode d’évaluation

2.3 Crises

Niveau A

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

2.4 Navigable

Niveau A

Questions Méthode d’évaluation

Niveau AA

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

3.1 Lisible

Niveau A

Questions Méthode d’évaluation

Méthode 13.

Niveau AA

Questions Méthode d’évaluation

Méthode 13.

Niveau AAA

Questions Méthode d’évaluation

3.2 Prévisible

Niveau A

Questions Méthode d’évaluation

Méthode 14.

Niveau AA

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

3.3. Assistance à la saisie

Niveau A

Questions Méthode d’évaluation

Niveau AA

Questions Méthode d’évaluation

Niveau AAA

Questions Méthode d’évaluation

4.1 Compatible

Niveau A

Questions Méthode d’évaluation

Méthode 15.

Méthode 16.

Méthode 17.

Méthode 18.

Méthodologie – Méthodes d’évaluation

Méthode 1 :

  • Web Accessibility toolbar : Code source | Mise en avant du code source | Code source [Mise en avant des objets /scripts]
  • JAWS ou NVDA : Recherche la balise <object> dans le code source de la page
  • Web developer toolbar : CSS | Désactiver les styles CSS | Tous les styles (CTRL+MAJ+S).
    Information | Afficher les détails des éléments object

Méthode 2 :

  • Web Accessibility toolbar : Images | Mettre en valeur les images
  • JAWS ou NVDA : Parcourir la liste des liens avec INSÈRE+F7
  • Web developer toolbar : Images | Afficher les attributs alt

Méthode 3 :

  • Web Accessibility toolbar : Vérifier si la description est incluse dans la page ou si un lien y conduit, CSS | Désactiver les CSS, Utiliser Images | Liste des images pour vérifier s’il y a un longdesc
  • JAWS ou NVDA : Parcourir la page avec G et MAJ+G
  • Web developer toolbar : Images | Afficher les attributs alt. CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S). Voir source | Voir le code source généré, rechercher longdesc= dans le code source et lire la page référencée

Méthode 4 :

  • Web Accessibility toolbar : Cadres | Noms / titres des cadres
  • JAWS : Insère+F9
  • Web developer toolbar : Entourer les Frames | Afficher le nom de l’élément entouré
  • Accessibility Evaluation Toolbar : Navigation | Frames

Méthode 5 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les titres OU Structure | Voir la structure des titres
  • JAWS ou NVDA : Parcourir la page avec T et MAJ+T
  • Web developer toolbar : Entourer | entourer les titres (h1-h6).
  • Cocher aussi : Entourer | afficher le nom de l’élément entouré

Méthode 6 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les éléments de liste
  • JAWS ou NVDA : Parcourir la page avec L et MAJ+L
  • Web developer toolbar : Entourer | entourer un élément personnalisé | li
  • Cocher aussi : entourer | afficher le nom de l’élément entouré

Méthode 7 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les fieldset / labels
  • JAWS ou NVDA : Rechercher label ou title= dans le code source
  • Web developer toolbar : Form. | information sur les formulaires

Méthode 8 :

  • Web Accessibility toolbar : Tableaux | Mettre en valeur les tableaux de données
  • JAWS ou NVDA : Rechercher <th dans le code source
  • Juicy Studio Accessibility Toolbar : Table Inspector

Méthode 9 :

  • Web Accessibility toolbar : CSS | Désactiver les CSS
  • Tableaux Linéariser
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Divers | linéariser la page
    CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)

Méthode 10 :

  • Web Accessibility toolbar : Couleur | Analyseur de contrastes [application]
  • Modules complémentaires pour Firefox : Colour Contrast Analyser (pour les images comportant du texte) et Juicy Studio Accessibility Toolbar (pour les couleurs contrôlées par la feuille de style CSS).

Méthode 11

  • Web Accessibility toolbar : CSS | Voir les CSS et rechercher color et background-color
  • JAWS ou NVDA : Rechercher color et background-color dans le CSS
  • Web developer toolbar : CSS | Voir les CSS et rechercher color et background-color

Méthode 12

  • Web Accessibility toolbar : Code source | Voir le code source généré, rechercher http-equiv= »refresh » dans le code source
  • JAWS ou NVDA : Rechercher http-equiv= »refresh » dans le code source
  • Web developer toolbar : Voir source | Voir le code source généré. Rechercher http-equiv= »refresh » dans le code source

Méthode 13

  • Web Accessibility toolbar : Information | Mettre en valeur les attributs lang
  • JAWS ou NVDA : Rechercher lang= dans le code source
  • Web developer toolbar : Voir source | Voir le code source généré. Rechercher <html et <body et l’attribut lang

Méthode 14

  • Web Accessibility toolbar : CSS | Désactiver les CSS. Tableaux Linéariser
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Divers | linéariser la page. CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)

Méthode 15

Voir les erreurs « document type does not allow element « xxxx » here » à l’aide de l’outil de validation : http://validator.w3.org.

Méthode 16

Voir les erreurs de type « end tag for « xxxx » omitted » à l’aide de l’outil de validation : http://validator.w3.org.

Méthode 17

Voir les erreurs de type « duplicate specification of attribute « xxx » » à l’aide de l’outil de validation : http://validator.w3.org.

Méthode 18

Voir les erreurs de type « ID « xxx » already defined » à l’aide de l’outil de validation : http://validator.w3.org.

Dispositions générales

Questions Conformité

Exigences générales (10-13)

Questions Conformité

Méthode 1

Méthode 2

Méthode 3

Méthode 3

Méthode 3

Navigation (15)

Questions Conformité

Méthode 4

Méthode 5

Structure (16)

Questions Conformité

Méthode 6

Méthode 7

Méthode 5

Méthode 7

Présentation (17)

Questions Conformité

Méthode 8

Méthode 9

Méthode 10

Méthode 11

Compréhension (18)

Questions Conformité

Méthode 12

Méthode 12

Méthode 13

Méthode 14

Méthode 14

Méthode 15

Méthode 16

Méthode 16

Méthode 17

Interactivité (19)

Questions Conformité

Images (20)

Questions Conformité

Méthode 18

Méthode 19

Méthode 19

Méthode 19

Méthode 19

Méthode 19

Méthode 19

Méthode 20

Formulaires (21)

Questions Conformité

Méthode 21

Méthode 21

Tableaux (22)

Questions Conformité

Méthode 22

Méthode 23

Méthode 23

Méthode 23

Méthode 12

Méthode 23

Mutimédia (SGQRI 008-03)

Questions Conformité

Suivi et mesures transitoires (24-29)

Questions Conformité

Méthodologie – Méthodes d’évaluation

Méthode 1 :

  • Web Accessibility toolbar : Code source | Voir le code source généré
  • JAWS ou NVDA : lire le code source de la page
  • Web developer toolbar : Voir source | Voir le code source généré

Méthode 2 :

  • Web Accessibility toolbar : Code source | Mise en avant du code source | Code source [Mise en avant des objets /scripts]
  • JAWS ou NVDA : Recherche la balise <object> dans le code source de la page
  • Web developer toolbar : CSS | Désactiver les styles CSS | Tous les styles (CTRL+MAJ+S).
    Information | Afficher les détails des éléments object

Méthode 3 :

  • Web Accessibility toolbar : CSS | Désactiver les CSS
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)

Méthode 4 :

  • Web Accessibility toolbar : Code source | Voir le code source généré, rechercher http-equiv= »refresh » dans le code source
  • JAWS ou NVDA : Rechercher http-equiv= »refresh » dans le code source
  • Web developer toolbar : Voir source | Voir le code source généré. Rechercher http-equiv= »refresh » dans le code source

Méthode 5 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les éléments de liste
  • JAWS ou NVDA : Parcourir la page avec L et MAJ+L
  • Web developer toolbar : Entourer | entourer un élément personnalisé | li
  • Cocher aussi : entourer | afficher le nom de l’élément entouré

Méthode 6 :

  • Web Accessibility toolbar : Cadres | Noms / titres des cadres
  • JAWS : Insère+F9
  • Web developer toolbar : Entourer les Frames | Afficher le nom de l’élément entouré
  • Accessibility Evaluation Toolbar : Navigation | Frames

Méthode 7 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les titres OU Structure | Voir la structure des titres
  • JAWS ou NVDA : Parcourir la page avec T et MAJ+T
  • Web developer toolbar : Entourer | entourer les titres (h1-h6).
  • Cocher aussi : Entourer | afficher le nom de l’élément entouré

Méthode 8 :

En cas de doute, utiliser l’outil développé par le Trace Center qui permet d’évaluer le clignotement à partir d’une capture vidéo de l’écran à 24 images par seconde. Cet outil est le Photosensitive Epilepsy Analysis Tool (PEAT)

Méthode 9 :

  • Web Accessibility toolbar : Couleur | Analyseur de contrastes [application]
  • Module complémentaire pour Firefox : Outil d’analyse des contrastes de couleurs

Méthode 10 :

  • Web Accessibility toolbar : CSS | Voir les CSS et rechercher color et background-color
  • JAWS ou NVDA : Rechercher color et background-color dans le CSS
  • Web developer toolbar : CSS | Voir les CSS et rechercher color et background-color

Méthode 11 :

Vérification manuelle dans IE, en variant la taille de la police avec Affichage, Taille du texte.
Web developer toolbar : CSS | Voir les CSS et rechercher font-size

Méthode 12 :

  • Web Accessibility toolbar : CSS | Désactiver les CSS. Tableaux Linéariser
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Divers | linéariser la page. CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S)

Méthode 13 :

  • Web Accessibility toolbar : Code source | Voir le code source généré. Rechercher dc.description
  • JAWS ou NVDA : Rechercher dc.description dans le code source
  • Web developer toolbar : Voir source | Voir le code source généré. Rechercher dc.description

Méthode 14 :

  • Web Accessibility toolbar : Informations | Liste des liens [nouvelle fenêtre]
  • JAWS ou NVDA : Utiliser la liste des liens avec INSÈRE+F7
  • Web developer toolbar : Navigation | Links | View Summary

Méthode 15 :

  • Web Accessibility toolbar : CSS | Désactiver les CSS et vérifier si la description est incluse dans la page ou si un lien y conduit Utiliser Images | Liste des images pour vérifier s’il y a un longdesc
  • JAWS ou NVDA : Parcourir la page avec G ou MAJ+G
  • Web developer toolbar : CSS | Désactiver les styles CSS | Tous les styles (CTRL+MAJ+S) et vérifier si la description est incluse dans la page ou si un lien y conduit. Voir source | voir le code source généré, Rechercher longdesc= dans le code source

Méthode 16 :

  • Web Accessibility toolbar : Information | Mettre en valeur les attributs lang
  • JAWS ou NVDA : Rechercher lang= dans le code source
  • Web developer toolbar : Voir source | Voir le code source généré. Rechercher <html> et <body> et l’attribut lang

Méthode 17 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les Acronymes / Abréviations
  • JAWS ou NVDA : Rechercher acronym ou abbr dans le code source
  • Web developer toolbar : Informations | Afficher les abréviations

Méthode 18 :

  • Web Accessibility toolbar : CSS | Désactiver les CSS
  • JAWS ou NVDA : Lecture de la page ligne par ligne
  • Web developer toolbar : Images | Cacher les images d’arrière-plan

Méthode 19 :

  • Web Accessibility toolbar : Images | Mettre en valeur les images
  • JAWS ou NVDA : Parcourir la liste des liens avec INSÈRE+F7
  • Web developer toolbar : Images | Afficher les attributs alt

Méthode 20 :

  • Web Accessibility toolbar : Vérifier si la description est incluse dans la page ou si un lien y conduit, CSS | Désactiver les CSS, Utiliser Images | Liste des images pour vérifier s’il y a un longdesc
  • JAWS ou NVDA : Parcourir la page avec G et MAJ+G
  • Web developer toolbar : Images | Afficher les attributs alt. CSS | désactiver les styles css | Tous les styles (CTRL+MAJ+S). Voir source | Voir le code source généré, rechercher longdesc= dans le code source et lire la page référencée

Méthode 21 :

  • Web Accessibility toolbar : Structure | Mettre en valeur les fieldset / labels
  • JAWS ou NVDA : Rechercher label ou title= dans le code source
  • Web developer toolbar : Form. | information sur les formulaires

Méthode 22 :

  • Web Accessibility toolbar : Tableaux | Mettre en valeur les tableaux de données
  • JAWS ou NVDA : th dans le code source
  • Web developer toolbar : Entourer | entourer les tableaux | Cellules de tableaux et Afficher le nom de l’élément entouré

Méthode 23 :

  • Web Accessibility toolbar : Tableaux | Mettre en valeur les tableaux de données
  • JAWS ou NVDA : Parcourir la page avec Y et MAJ+Y ou T et MAJ+T
  • Web developer toolbar : Information | afficher les informations des tableaux

Dispositions générales

Questions Conformité

Exigences générales (8)

Questions Conformité

Navigation (10)

Questions Conformité

Structure (11)

Questions Conformité

Présentation (12)

Questions Conformité

Compréhension (13)

Questions Conformité

Interactivité (14)

Questions Conformité

Images (15)

Questions Conformité

Formulaires (16-17)

Questions Conformité

Tableaux (18)

Questions Conformité

Mutimédia (SGQRI 008-03)

Questions Conformité

Suivi et mesures transitoires (20-26)

Questions Conformité