Guide d'évaluation de l'accessibilité d'un site Web - Secrétariat du ...

Guide d’évaluation de l'accessibilité d'un site WebProduit sous la coordination de M. Yves Hudon, responsable de l’élaboration desstandards sur l’accessibilité du Web, le présent guide a été soumis pour commentairesaux membres du comité interministériel de normalisation sur l’accessibilité. En date du 7décembre 2010, ce comité est composé des 13 ministères et des 7 organismessuivants :Ministères : Affaires municipales, Régions et Occupation du territoire ; Conseilexécutif ; Développement économique, Innovation et Exportation ; Éducation, Loisiret Sport ; Emploi et Solidarité sociale ; Famille et Aînés ; Justice ; Ressourcesnaturelles et Faune ; Santé et Services sociaux ; Relations internationales ; Revenu ;Transports ; Travail ;Organismes : Bibliothèque et Archives nationales du Québec ; Centre de servicespartagés du Québec ; Institut de la statistique du Québec ; Office des personneshandicapées du Québec ; Régie des rentes du Québec ; Secrétariat du Conseil dutrésor ; Services Québec.Collaboration externeLa Coopérative de solidarité AccessibilitéWeb a rédigé ce document pour le ministèredes Services gouvernementaux.Le ministère des Services gouvernementaux tient à remercier l'Office des personneshandicapées du Québec qui, en vertu d'une entente qu'il a conclue avec l'InstitutNazareth et Louis-Braille, a rendu possible la contribution de M. Jean-Marie D'Amour àla rédaction de ce guide.AutorisationL'utilisation en totalité ou en partie du contenu de ce guide est autorisée à la conditionde mentionner la source.But du guideCe document a pour but d'aider les artisans du Web dans l'évaluation technique etfonctionnelle de l'accessibilité des pages Web qu'ils créent afin que ces dernièresrépondent aux besoins d'accessibilité des personnes, handicapées ou non. Il présenteune série d'outils et de tests permettant d'évaluer si les contenus d’un site Webgouvernemental satisfont aux exigences du Standard sur l’accessibilité d’un site Web(SGQRI 008-01) 1 2 .12Ce document est disponible sur le site Web du secrétariat du Conseil du trésor à l’adressehttp://www.tresor.gouv.qc.ca/ressources-informationnelles/standards-sur-laccessibilite-du-web.En cas de divergence, le standard adopté par le Conseil du trésor a la priorité sur le présent document.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012

Pour produire une évaluation d'accessibilité adéquate, qui permet de mesurerl’accessibilité réelle des contenus Web et leur conformité aux exigences du standardSGQRI 008-01, et pour assurer une cohérence dans les façons de faire d'un ministèreou d'un organisme à un autre, une démarche méthodologique éprouvée et fiable estfondamentale.Bien qu'il existe plusieurs outils, gratuits ou non, destinés à évaluer l'accessibilité d'unsite Web, aucun n'est en mesure de produire une vérification complète de toutes lesexigences d'accessibilité : l'intervention humaine, à un niveau ou un autre, est toujoursrequise, car les outils automatisés disponibles sur le marché peuvent vérifier de 30 à35 % seulement des exigences incluses dans les standards d’accessibilité du Web..Par ailleurs, comme ces outils ne sont généralement offerts qu'en anglais et qu’ils visentà répondre aux standards internationaux sans considération pour les adaptations localesde ces derniers, il est utile de disposer d'un guide en français qui s’appuie toutparticulièrement sur le standard SGQRI 008-01.Deux types d'évaluations complémentairesPour procéder à une évaluation complète de l’accessibilité d'un site Web, il faut allierdeux types d'évaluations qui requièrent des expertises complémentaires :une évaluation technique, qui mesure la conformité à chaque exigence prévuedans le standard SGQRI 008-01. L'évaluation technique permet aussi d'expliquerdes problèmes décelés lors de l'évaluation fonctionnelle;une évaluation fonctionnelle qui, au-delà des questions de conformité austandard, permet de déterminer si les contenus évalués sont effectivementexempts de barrières à l'utilisation pour les personnes handicapées, et deproposer des solutions pour lever les obstacles, le cas échéant. L'évaluationfonctionnelle permet aussi d'illustrer les conséquences des problèmestechniques et de détecter des problèmes d'ergonomie. L'ergonomie n'obéit pas àdes règles aussi établies que celles de l'accessibilité ou celles de la validité ducode HTML ou XHTML. Elle constitue cependant un aspect très important de laconception d'un site Web. Pour les utilisateurs d'outils d'adaptationinformatiques, il est donc normal qu'on s'intéresse aussi à cet aspect.Bien qu'encore rares en 2010, ces expertises d’évaluation sont disponibles sur lemarché. Graduellement, des artisans du Web commencent à suivre la formationnécessaire pour acquérir ces compétences. Que le ministère ou l’organisme opte pourl'autonomie en investissant dans la formation de son personnel ou qu'il opte pour unevalidation ou une évaluation provenant d'un fournisseur externe, l’objectif est le même :obtenir une évaluation complète.Préalables à la réussite d’une évaluationLe secret d'une bonne évaluation repose davantage sur le partage des responsabilitéset des tâches entre les différents intervenants dans la chaîne de production Web et laméthode d’évaluation employée que sur les outils utilisés. Plusieurs méthodes sontpossibles pour évaluer l'accessibilité; ce guide en propose une parmi d'autres, basée surdes outils gratuits qui sont à la portée de tous.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 2

Afin de permettre le partage adéquat des responsabilités et des tâches, le MSG aégalement publié le Guide sur le partage des responsabilités et des tâches relatives àl'accessibilité d’un site Web 3 , accompagné d’un tableur proposant un modèle génériquede partage des responsabilités et des tâches dans lequel les interventions requises pourchaque exigence décrite dans les standards sont ventilées selon les fonctions et lestâches généralement présentes dans une chaîne de production Web. Pour faciliter letravail d'évaluation, l’information présente dans ce dernier guide gagnera à être utiliséede pair avec celle contenue dans le présent guide.Comprendre la méthode d'évaluationL’évaluation technique, qui porte comme il a été dit sur la conformité aux exigencesd’accessibilité à satisfaire selon le standard SGQRI 008-01, permet de détecter lesobstacles relatifs aux limitations visuelles, auditives, motrices et cognitives.L’évaluation fonctionnelle complète, et parfois reprend, les résultats de l’évaluationtechnique. Elle porte principalement sur l’utilisabilité et la compréhension du contenuavec un lecteur d'écran, et détecte des éléments d'incompatibilité avec les technologiesd'adaptation informatiques, notamment dans la programmation en langage JavaScript.Elle cible également les obstacles relatifs aux limitations visuelles et cognitives, etpermet de vérifier l’intelligibilité d’un texte rendu par une synthèse vocale en repérant,par exemple :des problèmes éventuels dans l'ordre de lecture des contenus ;des coquilles, par exemple dans le texte de remplacement d’une image, qui rendentun texte inintelligible lorsque lu par une synthèse vocale ;toute information pertinente transmise visuellement qui n’est pas transmisevocalement ;des difficultés de ponctuation pour la lecture d’écran ;des passages qui pourraient porter à confusion lorsqu'ils sont entendus par un nonvoyantavec la synthèse vocale provenant d’un lecteur d’écran. (Par exemple, unnon-voyant peut comprendre « Projets énormes » au lieu de « Projets et normes »,qui pourra devenir « Normes et projets » pour éviter toute ambiguïté.)Pour comprendre davantage les principes de l’évaluation fonctionnelle, découvrirles raccourcis clavier les plus fréquents dans ce genre d’outil et obtenir une listedétaillée d’exemples de problèmes décelables par ce type d’évaluation, on peutconsulter le texte intitulé Évaluation fonctionnelle avec un lecteur d'écran rédigé parla Coopérative de solidarité AccessibilitéWeb, disponible à l’adressehttp://certif.accessibiliteweb.com/accueil/base-de-connaissances/tester-ses-contenusavec-un/article/faire-une-evaluation-fonctionnelle.Outils suggérés pour une évaluation techniqueSi l'intervenant possède une bonne maîtrise du codage HTML et des feuilles de style,aucun outil n'est indispensable, a priori, pour effectuer une évaluation technique del'accessibilité d'un site Web. Plusieurs outils permettent cependant d'automatiser3Ces documents sont disponibles sur le site Web du ministère des Services gouvernementaux à l’adressehttp://www.tresor.gouv.qc.ca/ressources-informationnelles/standards-sur-laccessibilite-du-webl.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 3

certains tests afin de gagner en productivité et d’éviter les erreurs d'inattention.Les outils présentés ci-dessous sont des barres d'extension greffées à un navigateurWeb comme Microsoft Internet Explorer ou Mozilla Firefox. Elles sont reconnues commeles plus efficaces et les plus utilisées. Bien que très performants, ces outils ne sont pasles seuls pouvant accomplir le travail. Précisons par ailleurs que des outils disponiblesen français ont été privilégiés lorsque possible.Avec Internet Explorero Web Accessibility Toolbar de AISNote : Un très bon didacticiel sur l’utilisation de la barre d’outils WebAccessibility Toolbar est disponible sur le site Web de l'organismeWebAIM (http://webaim.org/articles/ais/, en anglais seulement).Avec FireFoxo Barre d’outils Web Developer (http://joliclic.free.fr/mozilla/webdeveloper/)o Accessibility Extension (https://addons.mozilla.org/fr/firefox/addon/5809/,en anglais seulement)o Juicy Studio Accessibility Toolbar(https://addons.mozilla.org/fr/firefox/addon/9108/, en anglais seulement)o WCAG Contrast checker(https://addons.mozilla.org/fr/firefox/addon/7391/, en anglais seulement)Outils suggérés pour une évaluation fonctionnelleL'évaluation fonctionnelle, quant à elle, consiste à évaluer le comportement d'uneinterface Web avec les différents outils d'adaptation informatiques qu’utilisent lespersonnes handicapées. Plusieurs types d'outils d'adaptation informatiques permettentde satisfaire les besoins d'adaptation des personnes handicapées : les progiciels degrossissement des caractères, les afficheurs braille, les synthèses vocales, les lecteursd'écran, les senseurs, les claviers virtuels.Une série de tests peuvent être accomplis avec trois progiciels de revue d'écran : deuxde nature commerciale, Jaws et Window-Eyes, et un troisième offert du côté du logiciellibre, Non Visual Desktop Access (NVDA). Le cas échéant, des tests manuelscomplémentaires sont également proposés. En date du 7 décembre 2010, voici la listedes outils les plus appropriés pour procéder à une évaluation fonctionnelle,accompagnés d'un hyperlien pour les télécharger ou obtenir plus d'information à leursujet :Progiciel de grossissemento ZoomText v10 (http://www.humanware.com/frcanada/products/low_vision/magnification_software/_details/id_18/zoomtext_magnifier__screen_reader.html/)Progiciel de mesure de contrasteso Color contrast Analyser, v2.2(http://www.paciellogroup.com/resources/contrastanalyser.html#download,en français)Progiciel d'appréciation de la complexité du texteo Analyseur de lisibilité (http://labs.translated.net/lisibilite-texte/, en français)Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 4

Progiciels lecteurs d'écrano JAWS v13 (ftp://ftp.freedomscientific.com/users/hj/private/WebFiles/JAWS/,en français)ooNVDA v2012.2 (http://www.nvda-project.org/wiki/Download, la page esten anglais, mais les instructions d’installation sont en français)Voice Over sur MacUne liste de ces lecteurs d’écran est mise à jour régulièrement dans la pageInstaller un lecteur d’écran (http://certif.accessibiliteweb.com/accueil/base-deconnaissances/tester-ses-contenus-avec-un/article/installer-un-lecteur-d-ecran).Cettepage explique aussi comment configurer ces outils pour réaliser une évaluationfonctionnelle dans les meilleures conditions.Avant d’opter pour la solution en logiciel libre NVDA, il importe de savoir que JAWS estactuellement le lecteur d'écran qui détient la plus grande part de marché (entre 60 % et70 %) et Window-Eyes détient la seconde part de marché (30 % à 40 %). La version2010.2 de NVDA ne comporte pas encore la possibilité d’effectuer les changements delangue de façon automatique. Cette fonctionnalité a été inscrite au plan dedéveloppement en août 2010, mais aucune date n’a encore été annoncée en ce quiconcerne son implantation dans une prochaine version. Malgré cette lacune, NVDAdemeure le lecteur d’écran qui offre la prise en charge la plus complète pour lestechniques d’accessibilité des applications Internet enrichies (WAI-ARIA), les animationsWeb de type Flash ou Silverlight et les documents PDF.Il faut préciser par ailleurs que les lecteurs d'écran ne lisent pas la page telle qu'elle estaffichée à l'écran, mais plutôt le code source (ou le DOM) à partir duquel cet affichageest généré. Cela signifie notamment que la longueur de la ligne n'a pas de rapport avecce qui est affiché à l'écran. Les lecteurs d'écran assignent en effet une longueurarbitraire de 100 ou 150 caractères par ligne. De plus, pour mieux distinguer les liensadjacents, ils isolent chaque lien sur sa propre ligne. Si l'on rencontre, par exemple, lesliens A à Z placés sur la même ligne au début d'un index, l'utilisateur les verra, avec unlecteur d'écran, comme s'ils étaient présentés sur 26 lignes.Enfin, bien que ces trois lecteurs d'écran soient censés fonctionner aussi bien dansInternet Explorer que dans Firefox, JAWS et Window-Eyes ont d'abord été optimiséspour Internet Explorer, alors que la version native de NVDA a été développée pourFirefox. En tenant compte de ces préférences, on évitera des problèmes éventuels decompatibilité.Pour réaliser une évaluation fonctionnelle de l'accessibilitéPour tester les en-têtes de section, les liens, les listes, les formulaires et le texte defaçon générale, y compris le texte de remplacement des images, n'importe quel lecteurd'écran fera l'affaire. Le logiciel libre NVDA pourrait très bien devenir l’outil de testpréféré. Toutefois, seuls JAWS et Window-Eyes prennent actuellement en charge leschangements de langue automatiques sur une page Web.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 5

Quand il s'agit de programmation et d'interactivité, chaque progiciel et chaque versiond'un même progiciel réagit toutefois différemment, ce qui peut compliquer le travail devérification de la compatibilité de ces contenus avec les outils d'adaptationinformatiques. Comme très peu de concepteurs sont en mesure de développer uneexpertise dans l'utilisation des trois principaux lecteurs d'écran en circulation dans lemarché francophone, et comme chaque lecteur peut compter plusieurs versions, ilapparaît de plus en plus clairement que l'un de ces outils devra bientôt être reconnucomme l'outil standard de vérification de l'accessibilité.Étant donné que NVDA est un logiciel libre, que l’on peut donc se procurer gratuitementet mettre à jour régulièrement, étant donné aussi que c’est le progiciel en français le plusévolué à ce jour dans l'implantation des nouvelles technologies du Web 2.0 commeAJAX ou HTML 5, il pourrait bientôt faire consensus tant sur la scène locale que sur lascène internationale.Remarque :Pour les personnes qui ne sont pas habituées à utiliser des progiciels comme NVDA,JAWS ou Window-Eyes, il est parfois difficile de faire la différence entre la façon dontces progiciels lisent l'information et les comportements de ces mêmes progiciels quirésultent d’une conception inadéquate de la page Web. Il est donc prudent de vérifierses premières observations avec un utilisateur habitué de ces progiciels.Vérification de l'accessibilitéLes artisans du Web trouveront ci-après des grilles d'e validation présentant, pourchacune des exigences du standard SGQRI 008-01, des tests techniques, des testsfonctionnels avec les outils d'adaptation informatiques suggérés et des vérificationsmanuelles complémentaires le cas échéant.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 6

Validation des exigences générales (article 10 à 13)Tests techniquesExigences Éléments à valider Outils Vérifications10 a) Conformité du codeHTML ou XHTML10 b) Utilisation des balisesselon le rôle10 b) Éviter les balises deprésentation10 c) Doctype identifié etvalideFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Validators → W3C HTML ValidatorOutils → Valider HTMLInformation → Afficher les détails des ID & ClassVérifier → Validateur HTML du W3C → Valider le HTMLValidators → W3C HTML ValidatorOutils → Valider HTMLVoir Source → Voir le code source généréEntourer → Entourer les éléments de type blockVérifier → Validateur HTML du W3C → Valider le HTMLCode source → Voir le code source généréEntourer → Entourer les éléments déconseillésCode source → Mise en avant du code source généré→ Code source généré [Mise en avant des éléments etattributs dépréciés]Validators → W3C HTML ValidatorOutils→ Valider HTMLVérifier → Validateur HTML du W3C → Valider le HTMLGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012

Exigences Éléments à valider Outils Vérifications10 d) Élément FireFox Accessibility Extension Text Equivalents → List of Objects11 Désactivation d’unefeuille de style12 Présence d’un hyperlienintitulé Accessibilité quirenvoie à une paged’information surl’accessibilité du siteWeb13 Formulationcompréhensible du texteBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Information → Afficher les détails des éléments ObjectCode source → Mise en avant du code source → Codesource [Mise en avant des objets /scripts]Style → décocher Author CSSFeuilles de style → Désactiver les styles → Tous lesstylesFeuilles de style → Voir les feuilles de style →Rechercher :before et :afterFeuilles de style → Désactiver les feuilles de styleFeuilles de style → Voir les feuilles de style →Rechercher :before et :afterVérification manuelleAnalyseur de lisibilité(http://labs.translated.net/lisibilite-texte/)Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 8

Validation de la navigation (article 15)Tests techniquesExigences Éléments à valider Outils Vérifications15 a) Navigation identifiable Vérification manuelle15 b) Limite dans le temps Vérification manuelle15 c) Redirection automatique Barre d’outils Web Developer Voir Source → Voir le code source généré →Rechercher http-equiv="refresh" dans le code source15 d) Contournement desblocs d’information quise répètent15 e) Zone active visible auclavierAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionFireFox Accessibility ExtensionAccessibility Toolbar (InternetExplorer)Code source → Mise en avant du code source → Codesource → Rechercher http-equiv="refresh" dans le codesourceNavigation → HeadingsScripting → Focus InspectorStructure → Afficher l’ordre de tabulationGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 9

Exigences Éléments à valider Outils Vérifications15 f) Navigation balisée enliste15 g) Présence d’un plan desite et d’un hyperlienvers celui-ci15 h) Menu de navigationrépété de façoncohérente15 i) Identification cohérentedes fonctionnalitésutilisées de page enpage15 j) Navigationredimensionnable à200 %FireFox Accessibility ExtensionBarre d’outils Web DeveloperStyle → ListsEntourer → Entourer les éléments de type blockFeuilles de style → Désactiver les styles → Tous lesstylesNavigation→ LinksBarre d’outils Web Developer Entourer → Entourer les titres (H1 – H6)Accessibility Toolbar (InternetExplorer)Information → Afficher les détails des liensStructure → Mettre en valeur les titresVérification manuelleVérification manuelleVérification manuelleVérification manuelleGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 10

Exigences Éléments à valider Outils Vérifications15 k) Raccourcis clavier àéviterFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Navigation → AccessKeysInformation → Afficher les AccessKeysStructure → Mettre en valeur les raccourcis clavierGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 11

Exigences Éléments à valider15 d) Contournement desblocs d’information quise répètentVérificationsLe lien de contournement est-il toujours au même endroit?Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 13

Validation de la structure d’une page Web (article 16)Tests techniquesExigences Éléments à valider Outils Vérifications16 a) Titre de page distinctifqui reflète son sujetFireFox Accessibility ExtensionNavigation → Title16 b) Titre des cadres FireFox Accessibility Extension Navigation → Frames16 c) Parcours logique auclavier16 d) En-têtes de section biencodésBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionEntourer → Entourer les framesCadres → Noms / titres des cadresEntourer → Entourer les framesCadres → Noms / titres des cadresScripting → Focus InspectorStructure → Afficher l’ordre de tabulationStructure → Afficher l’ordre de tabulationNavigation → HeadingsBarre d’outils Web Developer Entourer → Entourer les titres (H1 – H6)Accessibility Toolbar (InternetExplorer)Information → Plan du documentStructure → Mettre en valeur les titresStructure → Voir la structure des titresGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 14

Exigences Éléments à valider Outils Vérifications16 e) Listes bien codées FireFox Accessibility Extension Style → Lists16 f) Présence d’au moins unen-tête de section deniveau 1Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionEntourer → Entourer les éléments de type blockFeuilles de style → Désactiver les styles → Tous lesstylesStructure → Mettre en valeur les éléments de listeNavigation → HeadingsBarre d’outils Web Developer Entourer → Entourer les titres (H1 – H6)Accessibility Toolbar (InternetExplorer)Information → Plan du documentStructure → Mettre en valeur les titresStructure → Voir la structure des titresTests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications16 a) Titre de page distinctifqui reflète son sujetJawsWindow-EyesNVDAInsertion+TInsertion+TNVDA+T16 b) Titres des cadres Jaws Insertion + F916 d)16 f)En-têtes de section biencodés, en-tête desection de niveau 1Window-EyesJawsWindow-EyesNVDAInsertion + F8 et Alt + AT et Maj+TE et Maj+ENVDA+F7, Alt+TGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 15

Exigences Éléments à valider Outils Vérifications16 e) Listes bien codées Jaws L et Maj+L16 c) Parcours logique auclavierWindow-EyesNVDAJawsWindow-EyesNVDAL et Maj+LL et Maj+LCurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 16

Validation de la présentation (article 17)Tests techniquesExigences Éléments à valider Outils Vérifications17 a) Perception sensorielleexpliquée en texteVérification manuelle17 b) Fluctuation lumineuse àun maximum de 3 fois àla seconde17 c) Élément en mouvementd’une durée de 5secondes17 d) Fond sonore de plus de3 secondes17 e) Contraste entre le texteet son arrière-plan (4,5:1ou 3:1 si texte agrandi)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Vérification manuelleVérification manuelleVoir Source → Voir le code source généré →Rechercher et dans le code sourceCode source → Mise en avant du code source → Codesource → Rechercher et dans lecode sourceVérification manuelle de la présence de fond sonore etde l’indépendance des contrôles du sonJuicy Studio Accessibility Toolbar Color Contrast Analyser → Luminosity Contrast RatioBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Information → Informations sur les couleursCouleur → Analyseur de contraste Juicy Studio →Analyseur de contraste – analyse de luminosité[nouvelles fenêtre]Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 17

Exigences Éléments à valider Outils Vérifications17 f) Couleurs indiquéessimultanément dans lafeuille de style CSS17 g) Taille d’une police decaractère en em,pourcentage ou valeursnommées17 h) Texte grossi à 200 %sans perte defonctionnalitéBarre d’outils Web Developer Feuilles de style → Voir les feuilles de style →Rechercher color et background-colorAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Feuilles de style → Voir les feuilles de style →Rechercher color et background-colorStyle → Text SizingFeuilles de style → Voir les feuilles de styleFeuilles de style → Voir les feuilles de styleLisibilité à 200 % en activant le Zoom texte seulement(FF3+)Tests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications17 a) Perception sensorielleexpliquée en texteJawsWindow-EyesNVDAParcourir la page avec la touche Curseur vers le haut ouCurseur vers le basParcourir la page avec la touche Curseur vers le haut ouCurseur vers le basParcourir la page avec la touche Curseur vers le haut ouCurseur vers le basGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 18

Vérifications manuelles complémentairesExigences Éléments à valider17 g)17 h)Taille d’une police decaractère en em,pourcentage ou valeursnommées17 g) Taille d’une police decaractèreVérificationsModifier la taille du texte avec Affichage → Taille du texte (Internet Explorer6-)Recherche dans valeurs de taille de polices pour px, pt, etc.Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 19

Validation de la compréhension (article 18)Tests techniquesExigences Éléments à valider Outils Vérifications18 a) Ordre séquentiel logiquedétectable18 b) Avertissement préalableà un changement decontexte18 c) Métadonnée« dc.description »FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Style → désactiver Author CSSFeuilles de style → Désactiver les styles → Tous lesstylesFeuilles de style → Désactiver les feuilles de styleVérification manuelleInformation → Voir les balises Meta18 d) Libellé explicite des liens FireFox Accessibility Extension Navigation → LinksBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Informations → Informations sur les métadonnées[nouvelle fenêtre]Information → Afficher les détails des liensVoir Source → Voir le code source généré → Vérifier laprésence de target=, window.open, popup, windowInformations | Liste des liens [nouvelle fenêtre]Code source → Mise en avant du code source → Codesource → Vérifier la présence de target=, window.open,popup, windowGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 20

Exigences Éléments à valider Outils Vérifications18 e) Liens ayant le mêmelibellé et la mêmedestination18 f) Schéma, graphe,organigramme oudiagramme sous formede texte avec descriptioncomplète18 g) Langue principale de lapage WebFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Navigation→ LinksInformation → Afficher les détails des liensVoir Source → Voir le code source généré → Vérifier laprésence de target=, window.open, popup, windowInformations | Liste des liens [nouvelle fenêtre]Code source → Mise en avant du code source → Codesource → Vérifier la présence de target=, window.open,popup, windowVérification manuelleVoir Source → Voir le code source généré →Rechercher lang ou xml:langCode source → Mise en avant du code source → Codesource → Rechercher lang ou xml:lang18 h) Changements de langue FireFox Accessibility Extension Navigation → Language ChangesBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Voir Source → Voir le code source généré →Rechercher lang ou xml:langCode source → Mise en avant du code source → Codesource → Rechercher lang ou xml:langGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 21

Exigences Éléments à valider Outils Vérifications18 i) Abréviation et acronymeassociés à leursignification18 j) Avertissement avantouverture dans unenouvelle fenêtreFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Text Equivalents → List of AbbreviationsText Equivalents → Expand AbbreviationsInformation → Afficher les abréviationsStructure → Mettre en valeur les Acronymes /AbréviationsEntourer → Entourer les liens → Liens externesInformations | Liste des liens [nouvelle fenêtre]Tests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications18 a) Ordre séquentiellogique détectable18 d)18 e)JawsWindow-EyesNVDALiens explicites Jaws Insertion+F7Window-EyesNVDACurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basInsertion+F8NVDA+F7Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 22

Vérifications manuelles complémentairesExigences Éléments à valider18 i) Abréviation et acronymeassociés à leursignification18 b) Avertissement avantouverture dans unenouvelle fenêtreVérificationsLa signification des acronymes ou abréviations est-elle offerte?Les changements de contexte sont-ils commandés par l’utilisateur?Les changements de contexte sont-ils précédés d’un avis?Peut-on désactiver les changements de contexte automatiques?Le contexte de la page est-il préservé lors du déplacement dans la zone active (focus)?Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 23

Validation de l’interactivité (article 19)Tests techniquesExigences Éléments à valider Outils Vérifications19 a) Programmation utilisableavec les technologiesd’adaptationFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Scripting → List of EventsVoir Source → Voir le code source généré →Rechercher (on)mouse(over/up/down/up)Voir Source → Voir le code source généré →Rechercher ondoubleclickVoir Source → Voir le code source généré →Rechercher onclick="this.location.href=Code source → Mise en avant du code source → Codesource → Rechercher (on)mouse(over/up/down/up)Code source → Mise en avant du code source → Codesource → Rechercher ondoubleclickCode source → Mise en avant du code source → Codesource → Rechercher onclick="this.location.href=Juicy Studio Accessibility Toolbar ARIA → Documents LandMarkARIA → RolesARIA → Roles and PropertiesGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 24

Exigences Éléments à valider Outils Vérifications19 a) Programmation utilisableà l’aide du clavier19 b) Déplacement hors d’uncomposant à l’aide duclavier19 c) Information pour sortird’un composant sidifférent d’une touchecurseur, vers le haut, lebas, la gauche ou ladroite, ou tabulationFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Scripting → List of EventsVoir Source → Voir le code source généré →Rechercher (on)mouse(over/up/down/up)Voir Source → Voir le code source généré →Rechercher ondoubleclickVoir Source → Voir le code source généré →Rechercher onclick="this.location.href=Code source → Mise en avant du code source → Codesource → Rechercher (on)mouse(over/up/down/up)Code source → Mise en avant du code source → Codesource → Rechercher ondoubleclickCode source → Mise en avant du code source → Codesource → Rechercher onclick="this.location.href=Juicy Studio Accessibility Toolbar ARIA → Documents LandMarkARIA → RolesARIA → Roles and PropertiesVérification manuelleVérification manuelleGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 25

Exigences Éléments à valider Outils Vérifications19 d) Mise à jour détectablede l’informationVérification manuelleTests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications19 a) Programmationutilisable avec lestechnologiesd’adaptationVérifications manuelles complémentairesExigences Éléments à valider19 b)19 c)Composant19 d) Mise à jour del’informationNVDA, JAWS ou Window-EyesVérificationsVérification manuellePeut-on se déplacer hors d’un composant sans la souris? Sinon, la méthode requise est-elleannoncée explicitement?Un mécanisme est-il prévu pour éviter un composant?La notification des changements apportés aux composants est-elle disponible aux agentsutilisateurs et aux outils d’adaptation?La page est-elle exempte d'obstacles avec les outils d'adaptation?Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 26

Validation des images (article 20)Tests techniquesExigences Éléments à valider Outils Vérifications20 a) Balisage des imagesavec 20 b) Images informativesavec « alt » non vide20 c) Images comprenant dutexte (tout le texte dansle « alt »)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Text Equivalents → Hide Background ImagesFeuilles de style → Désactiver les styles → Tous lesstylesImages → Informations sur les imagesFeuilles de style → Désactiver les feuilles de styleUtiliser Images → Liste des imagesText Equivalents → Show Text EquivalentsText Equivalents → List of ImagesImages → Afficher les attributs AltImages → Remplacer les images par l’attribut AltFeuilles de style → Désactiver les feuilles de styleImages → Mettre en valeur les imagesText Equivalents → Show Text EquivalentsText Equivalents → List of ImagesImages → Afficher les attributs AltFeuilles de style → Désactiver les feuilles de styleImages → Mettre en valeur les imagesGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 27

Exigences Éléments à valider Outils Vérifications20 d) Images décoratives avec« alt » vide20 e) Bouton graphique deformulaire Web ou icôneavec « alt » non vide20 f) Schéma, graphe,organigramme oudiagramme avecdescription complète20 g) Dessin avec descaractères présentésous forme d’imageFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Text Equivalents → Hide Background ImagesImages → Afficher les attributs AltImages → Remplacer les images par l’attribut AltFeuilles de style → Désactiver les feuilles de styleImages → Mettre en valeur les imagesText Equivalents → Show Text EquivalentsText Equivalents → List of ImagesImages → Afficher les attributs AltImages → Remplacer les images par l’attribut AltImages → Mettre en valeur les imagesText Equivalents → List of ImagesImages → Informations sur les imagesImages → Mettre en valeur les imagesUtiliser Images → Liste des imagesCode source → Mise en avant du code source → Codesource → Rechercher les longdesc dans le code sourceText Equivalents → Show Text EquivalentsImages → Afficher les attributs AltImages → Mettre en valeur les imagesGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 28

Tests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications20 a)20 b)20 c)20 d)20 e)20 f)20 g)20 a)20 b)20 c)20 d)20 e)20 f)20 g)Images Jaws G et Maj+GWindow-EyesNVDAG et Maj+GG et Maj+GImages liens Jaws Insertion+F7Window-EyesNVDACurseur vers le haut ou Curseur vers le basInsertion+F8Curseur vers le haut ou Curseur vers le basNVDA+F7Curseur vers le haut ou Curseur vers le basGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 29

Validation des formulaires Web (article 21)Tests techniquesExigences Éléments à valider Outils Vérifications21 a) Pas de changement decontexte à la saisie21 b) Étiquette ou attribut« title »21 c) Étiquette associée auchamp21 d) Position de l’étiquette àproximité du champ21 e) Pas de texteremplaçable21 f) Étiquette descriptive dela fonction21 g) Erreur de saisie décriteen texteBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Vérification manuelleForm. → Afficher les détails du formulaireForm. → Informations sur les formulairesStructure → Mettre en valeur les fieldset / labelsForm. → Afficher les détails du formulaireForm. → Informations sur les formulairesInformation → Afficher les détails des ID & ClassStructure → Mettre en valeur les fieldset/labelsInformation → Mettre en valeur les attributs titlesForm. → Afficher les détails du formulaireForm. → Informations sur les formulairesStructure → Mettre en valeur les fieldset/labelsVérification manuelleVérification manuelleVérification manuelleGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 30

Exigences Éléments à valider Outils Vérifications21 h) Révision, correction etconfirmation del’informationVérification manuelleTests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications21 b)21 c)Étiquette associée auchampJawsWindow-EyesNVDAVérifications manuelles complémentairesExigences Éléments à valider21 a) Changement decontexte à éviterVérificationsF et MAJ+FC et MAJ+CF et MAJ+FLe contexte est-il préservé lors de la saisie dans un champ?21 b) À défaut d’étiquette À défaut de mieux, un champ est-il identifié par @title?21 d) Proximité de l’étiquette Le libellé et ses champs respectifs sont-ils situés à proximité?21 e) Sans texte remplaçable Les champs texte sont-ils exempts de texte remplaçable?21 g) Description des erreursde saisie21 h) Révision, correction etconfirmation del’informationLes erreurs de saisie sont-elles bien identifiées?Les correctifs à apporter aux erreurs sont-ils décrits en texte?Des suggestions de correction sont-elles proposées?Est-il possible d’annuler, valider ou corriger l’information saisie?Guide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 31

Validation des tableaux (article 22)Tests techniquesExigences Éléments à valider Outils Vérifications22 a) Cellules d’en-têteen 22 b) Association des en-têteset des cellules dedonnées22 c) Tableau de présentationsans balises ou attributsréservés aux tableauxde données22 d) Ordre séquentiel logiquede lectureFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)FireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Barre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Style → TablesInformation → Afficher les informations des tableauxVoir Source → Voir le code source généré →Rechercher dans le code sourceTableaux → Mettre en valeur les tableaux de donnéesCode source → Mise en avant du code source → Codesource → Rechercher dans le code sourceNavigation → Show Data Table HeadersInformation → Afficher les informations des tableauxTableaux → Mettre en valeur les tableaux de donnéesStyle → TablesEntourer → Entourer les Tableaux → TableauxStructure → Table bordersDivers → Linéariser la pageTableaux → LinéariserGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 32

Exigences Éléments à valider Outils Vérifications22 e) Résumé d’un tableaucomplexe sur un siteWeb public seulementFireFox Accessibility ExtensionBarre d’outils Web DeveloperAccessibility Toolbar (InternetExplorer)Style → TablesInformation → Afficher les informations des tableauxTableaux → Mettre en valeur les tableaux de donnéesTests fonctionnels avec outils d’adaptation informatiquesExigences Éléments à valider Outils Vérifications22 a)22 b)Tableaux de données Jaws Y et Maj+Y ou E et Maj+ECtrl+alt+Curseurs22 d) Ordre séquentiellogique des tableaux deprésentationWindow-EyesNVDAJawsWindow-EyesNVDAVérifications manuelles complémentairesExigences Éléments à validerVérificationsT et Maj+TCtrl+Plus du pavé numérique (entrer en mode tableau)Ctrl+alt+CurseursT et Maj+TCtrl+alt+Curseurs22 b) Tableaux complexes Examiner la page pour repérer les tableaux complexesCurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basCurseur vers le haut ou Curseur vers le basGuide d’évaluation de l'accessibilité d'un site Web, version du 20 juillet 2012 33