Analyser l'accessibilité d'une page Web en fonction des « Sept cibles prioritaires » d'AccessibilitéWeb

Par Normand Lamoureux, membre du W3Québec.

Introduction

Ce guide veut expliquer la procédure à suivre pour analyser l'accessibilité d'une page Web à la lumière des sept cibles prioritaires décrites sur le site d'AccessibilitéWeb et expliquées plus en détail dans un article intitulé « Sept pas vers l'accessibilité ».

Nous nous servirons d'un outil d'analyse nommé « Sept cibles prioritaires », dont l'usage est ouvert à tous, gratuitement et sans restriction.

Pour mener à bien votre analyse, vous aurez besoin de l'adresse de chacune des pages à évaluer, du navigateur Internet Explorer 6.0 et de la Web Accessibility Toolbar pour Internet Explorer. Cet outil est également disponible en version française, mais nous nous servirons de la version originale anglaise, qui est plus récente.

Sommaire

• Préparation
• Étape 1 : soumettre une adresse
• Étape 2 : vérifier si les tailles de police sont élastiques
• Étape 3 : vérifier si la navigation fonctionne sans JavaScript
• Étape 4 : vérifier si les titres sont correctement hiérarchisés
• Étape 5 : vérifier si le code HTML est valide
• Étape 6 : vérifier si le code CSS est valide
• Étape 7 : sauvegarder les données

Préparation

1. téléchargez la Web Accessibility Toolbar pour Internet Explorer ;
2. exécutez le fichier fraîchement téléchargé ; la barre d'accessibilité s'installera ;
3. lancez Internet Explorer et observez : la barre d'accessibilité devrait se trouver en dessous de la barre d'adresse ;
4. pour chacune des pages à analyser :
   • saisissez l'adresse dans la barre d'adresse et activez le bouton OK ;
   • déroulez le menu Doc Info et choisissez List Frames ; une nouvelle fenêtre s'ouvrira ;
   • notez l'adresse de chacun des cadres, le cas échéant.

Lorsqu'une page ne contient aucun cadre, une seule analyse suffira. Lorsqu'elle contient un ou plusieurs cadres, il faudra analyser la page elle-même et chacun des cadres séparément. La procédure qui suit est donc à répéter pour chaque page, mais aussi pour chacun des cadres de chacune des pages à évaluer, s'il y en a.

Étape 1 : soumettre une adresse

1. si ce n'est déja fait, lancez le navigateur Web de votre choix et rendez vous à l'outil d'analyse d'AccessibilitéWeb ;
2. examinez si l'adresse du cadre ou de la page à analyser commence par http:// ou https://
3. si l'adresse commence par http:// :
   • entrez-la dans le champ d'édition étiquetté « Entrez l'adresse de la page » ;
   • activez le bouton Soumettre ;
   • passez à l'étape 2.
4. si l'adresse commence par https://, il faudra copier-coller le code source de la page ; pour ce faire :
   • ouvrez une nouvelle fenêtre de votre navigateur (Ctrl + N) ;
   • saisissez l'adresse dans la barre d'adresse et activez le bouton OK ;
   • affichez le code source de la page (Ctrl + U dans Firefox ou Affichage > Source dans IE) ;
   • copiez le code (Ctrl + A pour saisir tout et Ctrl + C pour copier) ;
   • fermez la fenêtre du code source (Alt + F4) ;
   • basculez vers l'autre fenêtre de votre navigateur (Alt + Tab) ;
   • collez le code dans le champ d'édition étiquetté « Collez le code source » (Ctrl + V) ;
   • activez le bouton Soumettre ;
   • passez à l'étape 2.

Étape 2 : vérifier si les tailles de police sont élastiques

1. saisissez l'adresse du cadre ou de la page dans Internet Explorer (pour cette étape, l'usage d'Internet Explorer est obligatoire) ;
2. observez la taille du texte ;
3. utilisez Affichage > Taille du texte pour alterner entre « La plus grande » et « Moyenne » ;
4. comparez ;
   • si la taille du texte ne change pas, allez à la ligne 1 et inscrivez « X Faux » et passez à l'étape 3 ;
   • si la taille du texte change, allez à la ligne 1 et inscrivez « Vrai » et passez à l'étape 3.

Étape 3 : vérifier si la navigation fonctionne sans JavaScript

1. familiarisez-vous avec les moyens de navigation présents dans la page ;
2. déroulez le menu IE Options et décochez l'item Toggle Javascript ;
3. rafraîchissez l'écran avec F5 et vérifiez si les moyens de navigation sont toujours fonctionnels :
   • si des moyens de navigation cessent de fonctionner, allez à la ligne 3b, inscrivez « X Faux » et passez à l'étape 4 ;
   • si les moyens de navigation restent fonctionnels, allez à la ligne 3b, inscrivez « Vrai » et passez à l'étape 4.

Étape 4 : vérifier si les titres sont correctement hiérarchisés

1. observez la réponse qui se trouve à la ligne 4a ;
2. si on a « X Faux », allez à la ligne 4b, inscrivez « NA » et passez à l'étape 5 ;
3. si on a « Vrai », examinez les titres affichés à la ligne 4b ; chacun est précédé d'un H majuscule et d'un chiffre :
   • s'il y a plus d'un H1 ou si les titres se suivent en sautant des niveaux comme de H1 à H3 ou de H2 à H4, inscrivez « X Faux » et passez à l'étape 5 ;
   • s'il y a un seul H1 et que les titres se suivent sans sauter de niveaux, inscrivez « Vrai » et passez à l'étape 5 ;

Étape 5 : vérifier si le code HTML est valide

1. allez à la ligne 7a et activez le lien « Vérifier HTML [URL] » ; une nouvelle fenêtre s'ouvrira ;
2. recherchez la ligne « Result » et observez ce qui est écrit :
   • si c'est « Failed validation », choisissez « Encoding » iso-8859-1 (Western Europe) et activez le bouton Revalidate ;
   • si c'est « Passed validation », fermez la fenêtre, revenez à l'outil d'AccessibilitéWeb, inscrivez « 0 » et passez à l'étape 6 ;
   • si c'est un nombre d'erreur, retenez-le, fermez la fenêtre, revenez à l'outil d'AccessibilitéWeb, inscrivez ce nombre dans le champ prévu et passez à l'étape 6.

Étape 6 : vérifier si le code CSS est valide

1. allez à la ligne 7b et activez le lien « Vérifier CSS [URL] » ; une nouvelle fenêtre s'ouvrira ;
2. lisez ce qui est écrit :
   • s'il y a des erreurs, comptez-les, retenez le total, fermez la fenêtre, retournez à l'outil d'AccessibilitéWeb, notez le résultat dans le champ d'édition prévu et passez à l'étape 7 ;
   • s'il n'y a aucune erreur, fermez la fenêtre, retournez à l'outil d'AccessibilitéWeb, mettez « 0 » dans le champ d'édition prévu et passez à l'étape 7 ;
   • s'il n'y a aucune feuille de style, fermez la fenêtre, retournez à l'outil d'AccessibilitéWeb, mettez « pas de CSS » dans le champ d'édition prévu et passez à l'étape 7 ;
   • s'il apparaît un « Error » centré en gros caractères rouges gras, fermez la fenêtre et procédez comme suit :
     • lancez Internet Explorer et allez à l'adresse du cadre ou de la page à tester ;
     • déroulez le menu CSS et choisissez Show Style Sheet(s) ; une nouvelle fenêtre s'ouvrira ;
     • activez le lien « display », copiez le code et fermez la fenêtre ;
     • allez au Validateur CSS du W3C, collez le code dans la zone d'édition étiquettée « Validation par saisie directe » et activez le bouton Soumettre la saisie ;
     • retenez le résultat retourné par le Validateur, fermez la fenêtre, retournez à l'outil d'AccessibilitéWeb, notez le résultat dans le champ d'édition prévu et passez à l'étape 7.

Étape 7 : sauvegarder les données

1. consignez par écrit l'adresse soumise et les résultats de la colonne « Éval. » qui y correspondent ;
2. activez le bouton Nettoyer ;
3. retournez à l'étape 1.