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 developer toolbar pour Firefox, Chrome ou Opera sous Windows ou Mac OS X (en français);
  • L’outil WAVE de WebAim pour Chrome ou Firefox.
  • 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.
  • Pour visualiser l’utilisation d’ARIA, vous pouvez utiliser The Visual ARIA Bookmarklet que vous pouvez installer dans la plupart des navigateurs.
  • Le Text Spacing Bookmarklet conçu pour l’évaluation du critère 1.4.12 des WCAG 2.1.

L’outil WAVE existe sous deux formes :

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

Wave affiche presque instantanément tous les aspect de la page qui peuvent faire l’objet d’une évaluation automatique (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 facilement 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 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.

Niveau AA

Niveau AA

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

2.5 Modalités d’entrée

Niveau A

Questions Méthode d’évaluation

Niveau AAA

Questions

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.