AUDIT D'ACCESSIBILITE

Transcription

1 AUDIT D'ACCESSIBILITE SITE INTERNET : Fondation d'auteuil Lien : 1

2 TABLE DES MATIERES Introduction...3 Les images...10 Les couleurs...26 Séparation fond/forme...28 Titres et structuration de pages...31 Les liens...41 Le formulaire...49 Les éléments animés...56 Les éléments de grammaire...63 Code exécutable...68 Conclusion...82 Bibliographie

3 INTRODUCTION RAPPEL SUR LES NOTIONS D'ACCESSIBILITE NUMERIQUE La notion d accessibilité numérique a vu le jour dès l émergence des nouvelles technologies de l information et de la communication (NTIC), et plus particulièrement avec l apparition d Internet. De fait, le web devrait normalement permettre à tous d avoir l accès immédiat à une multitude de données et de sources d informations variées. Dans la réalité, il en va tout autrement. La plupart du temps, les personnes handicapées éprouvent des difficultés à utiliser Internet. Les sites web ne sont malheureusement pas toujours exploitables par les aides techniques utilisées par les déficients visuels, car ils n incluent aucun dispositif d accessibilité, si élémentaire soit-il. Mais qu entend-on par accessibilité? Tim BERNERS-LEE, directeur du W3C( World Wide Web Consortium) et à l origine d'internet, donne cette définition de l accessibilité numérique : «Mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.» 3

4 La notion d'accessibilité numérique nous amène à réfléchir sur la notion de l'universalité de l'accès à l'information. En effet, pour qu'un site soit accessible, il doit être vu n'importe où, par toutes les personnes quelque soient leurs déficiences. Les différentes normes à l'accessibilité ne doivent pas seulement profiter à une population souffrant d'un handicap mais doivent aussi servir à tous, dans toutes les conditions envisageables. Il est imoprtant de réaliser que le travail sur l'accessibilité sert à tous les utilisateurs et pas seulement aux personnes handicapées. Cela signifie qu'un site accessible doit être vu quelque soit son navigateur, son système d'exploitation, son terminal... De plus en plus de gens se connectent sur des supports différents. Nous assistons depuis quelques années à l'émergence de nouveaux supports permettant l'accès à Internet. ( Iphone, Ipad, consoles de jeux, tablettes multimédia...) L accessibilité numérique est fondée sur une série de recommandations techniques tenant compte des obstacles généralement rencontrés par les personnes handicapées. Il existe un manque certain dans la formation des développeurs qui ne mâitrisent pas les informations suffisantes et n'ont pas été sensibilisés à ce sujet. Il faut donc concevoir l'accessibilité comme le moyen d'améliorer des contenus et non comme le fait de créer des interfaces pauvres. Il s agit de s assurer qu un contenu non textuel est 4

5 accessible aux personnes présentant un handicap. Site accessible ne signifie donc pas conception minimaliste mais conception réfléchie. Un site accessible présente en outre un certain nombre d autres avantages ne se limitant pas au seul domaine du handicap. À titre d exemple, lorsqu un site est accessible, il est généralement construit de manière plus logique, et les coûts de maintenance s en trouvent d autant réduits. Par ailleurs, la portabilité des sites sur d autres supports est améliorée. En d autres termes, l accessibilité du web commence dès la phase de conception. Il est donc important de concevoir un site en ayant l accessibilité à l esprit. L ergonomie doit être étudiée avec soin et présider à l élaboration du projet, depuis sa conception jusqu à sa réalisation. Il est notamment recommandé lors de la phase de tests, lorsque cela est possible, d intégrer des personnes handicapées utilisant des aides techniques diversifiées, afin de valider l accessibilité du site par tous. L accessibilité s inscrit donc dans le cadre d une démarche qualité dont les utilisateurs, dans leur globalité, tireront tous les bénéfices. Afin de pouvoir accéder à l information, les déficients visuels ont recours à des aides techniques, se présentant sous la forme de logiciels ou de périphériques rattachés à leur ordinateur. Pour les malvoyants, ce sont des logiciels permettant de grossir les caractères à l écran ou d en modifier les couleurs en fonction de la spécificité de leur handicap. Les non-voyants utilisent quant à eux des logiciels communément appelés lecteurs d écran ou logiciels de revue d écran, gérant synthèses vocales et/ou 5

6 plages braille. L utilisation des raccourcis clavier est alors substituée à celle de la souris qui, en tant que telle, n est pas exploitable par un non-voyant. À titre d exemple, TAB permet de passer de lien en lien, MAJ + TAB, de revenir au lien précédent, etc. Il convient de souligner que, même si les aides techniques incluent leurs propres raccourcis clavier, nombre d entre eux sont implémentés par les éditeurs de logiciels de manière native et, par conséquent, utilisables par n importe qui. LEGISLATION EN VIGUEUR La loi pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées. Article 47 : «Les services de communication publique en ligne des services de l'etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées. L'accessibilité des services de communication publique en ligne concerne l'accès à tout type d'information sous forme numérique quels que soient le moyen d'accès, les contenus et le mode de consultation. Les recommandations internationales pour l'accessibilité de l'internet doivent être appliquées pour les services de communication publique en 6

7 ligne. Un décret en Conseil d'etat fixe les règles relatives à l'accessibilité et précise, par référence aux recommandations établies par l'agence pour le développement de l'administration électronique, la nature des adaptations à mettre en oeuvre ainsi que les délais de mise en conformité des sites existants, qui ne peuvent excéder trois ans, et les sanctions imposées en cas de nonrespect de cette mise en accessibilité. Le décret énonce en outre les modalités de formation des personnels intervenant sur les services de communication publique en ligne.» L'accessibilité numérique concerne non seulement les sites web mais aussi de manière plus générale l'information sous forme numérique quel que soit le moyen d'accès (Internet, téléphone mobile, ) et quel que soit le mode de consultation (fichiers électroniques en téléchargement, pages web en HTML, ). Son inscription dans la loi revêt une importance capitale puisque l'accessibilité numérique, au même titre que l'accessibilité physique des bâtiments, permet aux personnes atteintes d'une déficience visuelle, ou d'autres handicaps, ainsi qu'aux personnes âgées d'accéder à de nombreux services publics ou privés qui sinon leur seraient fermés. A l'heure de la société de l'information, l'accessibilité numérique est une des clés de l'intégration scolaire, sociale et professionnelle. Encore une fois, il faut souligner que ce principe d'accessibilité numérique correctement appliqué améliore la qualité des services en ligne en général. 7

8 LES REFERENTIELS Afin que tout le monde puisse travailler de manière cohérente pour la conception de sites accessibles, il était nécessaire d'établir une base de référence, construite autour d'un ensemble de règles à la fois permanentes et évolutives en fonction des nouvelles technologies. L'Initiative pour l'accessibilité du Web (Web Access Initiative ou WAI), structure dédiée à la problématique de l'accessibilité, créée en 1996 au sein du W3C, est précisément chargée de maintenir cette cohésion et promouvoir ce standard par le biais d'une série de recommandations. Les WCAG (Web Contents Accessibility Guidelines) 1.0 ont été publiées en Destinées aux créateurs de contenu pour le web, auteurs de pages, concepteurs de sites et développeurs d'outils de création de contenu, elles expliquent comment rendre le web accessible aux personnes handicapées. Il s'agit alors d'expliquer aux développeurs les méthodes et procédures à suivre pour rendre accesibles des contenus multimédias. Les WCAG 1.0 comportent 14 directives conçues de manière à assurer une compatibilité ascendante avec l'évolution des technologies du Web, tout en permettant aux sites d'offrir un traitement réduit aux navigateurs existants. Ces directives portent sur la conformité du code (X)HTML ainsi que sur des points de bon sens. Le code (X)HTML doit être syntaxiquement et grammaticalement correct : balise correctement fermée et imbriquée, attribut entre guillemets, 8

9 etc., ce qui est encore loin d être le cas aujourd hui sur de nombreux sites. Il doit contenir des informations autorisant une exploitation par toute personne et tout type de logiciels. Par exemple, les images doivent contenir un texte alternatif, les tableaux de données un résumé et un titre. Une page doit être exploitable même si le navigateur ne comprend pas le JavaScript, le Flash, les éléments multimédia, etc. Ceci signifie que les parties utilisant ces technologies doivent disposer d un équivalent HTML pur au sein de la même page. Dans le même temps, le code doit être le plus léger possible et contenir le moins de code HTML inutile afin de ne pas pénaliser les personnes utilisant un navigateur texte ou des aides techniques. Les WCAG distinguent trois niveaux de priorité correspondant à trois niveaux de conformité aux directives : 1. Priorité 1 - Les points de contrôle que doivent impérativement respecter les sites pour être accessibles à tous. 2. Priorité 2 - Les points de contrôle recommandés pour réduire les obstacles dans l'accès aux sites Web. 3. Priorité 3 - Les points de contrôle qui améliorent le confort d'utilisation. Les directives définissent également trois niveaux de conformité : A, AA et AAA. En France, les différents travaux de l'association Braillenet sur l'accessibilité des sites web depuis 1997 a conduit à 9

10 l'élaboration d'un label Accessiweb destiné à évaluer l'accessibilité. Il totalise 92 critères : 55 critères bronze, 23 critères argent et 14 critères or et se fonde sur les 14 directives des WCAG 1.0. Pour mieux comprendre et mettre en oeuvre ces critères dans les meilleures conditions, une méthode d'évaluation est proposée, sous la forme d'un guide. LES IMAGES Critère 1.1 Chaque image a t'elle une alternative textuelle? Problème constaté : Dans le menu «Nous aider» et dans l'onglet «particuliers» sur le lien «devenez e-bénévole», quand on accède aux e-cards, nous observons que des images n'ont pas d'alternative textuelle. Illustration du problème : 10

11 Impact sur les internautes en situation de handicap : Les personnes aveugles, de par leur handicap, ne peuvent pas voir les éléments graphiques d'un site, et n'ont donc pas accès à l'information qu'ils véhiculent. Pour naviguer sur Internet, les personnes aveugles utilisent des aides techniques qui interprètent uniquement les données textuelles présentes sur une page. Le texte de l'attribut alt est repris par l'ensemble des interfaces vocales. L'image affichée a ainsi un équivalent informatif pour les visiteurs non-voyants. Dans le cas présent, nous estimons que ces images sont porteurses d'information et que l'alternative apporterait une information supplémentaire et nécessaire à la compréhension du contenu. Recommandations à mettre en oeuvre : Pour ces différentes raisons, la personne responsable de la conception de la page se doit de fournir systématiquement une alternative textuelle à la totalité des éléments 11

12 graphiques. (exception faite pour les images de décoration ) Les développeurs de sites accessibles doivent par l'attribut alt présenter aux utlisateurs non seulement le contenu mais aussi la fonction des images utilisées. Valeur ajoutée pour le site : Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut alt sur les balises img et area. Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des éléments graphiques. Cela peut aussi permettre aux traducteurs automatiques d'en traduire le sens. Critère 1.2 Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide? Problème constaté : Certaines images sont considérées comme des images de décoration. On estime ainsi qu'elles n'ont aucune fonction et ne véhiculent aucune information particulière par rapport au contenu auquel elles sont associées. Cela peut être le cas d'images d'illustration qui n'apportent aucune information à la compréhension du texte ou bien elles peuvent servir à caler la mise en page. Dans l'exemple ci-dessous, nous avons affaire à une image d'illustration qui ne véhicule aucun renseignement supplémentaire à la compréhension du texte. Il convient de souligner que l'abscence d'attribut alt n'est 12

13 pas équivalente à un attribut alt vide. Illustration du problème : Impact sur les internautes en situation de handicap : Nous apercevons une balise alt remplie avec le terme arrow. Cet élément graphique n'a pas de valeur informative. Ces éléments graphiques doivent être commentés par une alternative textuelle vide. Ceci permet aux personnes aveugles de lire la page avec une plus grande fluidité, puisque les éléments graphiques dotés d'une alternative textuelle vide seront ignorés par leur lecteur d'écran. Recommandations à mettre en oeuvre : Il faut simplement laisser vide les balises alt des éléments graphiques qui servent uniquement à la décoration ou à la mise en place d'éléments textuels. Valeur ajoutée pour le site : Le fait de laisser une alternative vide pour une image de décoration plutot que de mettre un texte sans valeur permet de générer un gain de poids à la page. 13

14 Critère 1.3 Pour chaque image porteurse d'information ayant une alternative textuelle, cette alternative est-elle pertinente? Problème constaté : Toutes les images porteuses d'information doivent avoir une alternative textuelle pertinente. Cette alternative textuelle doit restituer l'information véhiculée par l'image par rapport au contenu auquel elle est associée. Dans l'exemple suivant, nous constatons que l'alternative textuelle de l'image est «zoom». Cette alternative ne nous semble pas pertinente dans la mesure où elle ne décrit pas précisemment l'image. Une alternative textuelle comme «zoom sur le plan de la fondation» nous semble plus appropriée. Illustration du problème : 14

15 Impact sur les internautes en situation de handicap : Dans le cas présent, l'alternative ne peut être considérée comme pertinente. En effet, la personne handicapée aura une compréhension limitée de cette image dans la mesure où le renseignement fourni ne symbolise pas efficacement l'image. Il y a perte d'information dans ce cas. Recommandations à mettre en oeuvre : Il s'agira de saisir des alternatives pertinentes pour donner le plus de sens possible aux images. La personne en charge du contenu rédactionnel devra décider de l'alternative textuelle en prenant soin de considérer à cahque fois son contexte. Valeur ajoutée pour le site : Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut alt sur les balises img et area. Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des éléments graphiques. Critère 1.4 Pour chaque image utilisée comme captcha ou comme image test, ayant une alternative textuelle, cette alternative permet-elle d'identifier la nature et la fonction de l'image? Problème constaté : Un captcha est un test utilisé pour distinguer un utilisateur humain d'un ordinateur. Le test est souvent basé sur des images contenant du texte déformé que l'utilisateur est 15

16 invité à retaper. Il faut donc que l'alternative permette de comprendre la raison d'être de l'image. Par rapport à l'image générée par le captcha, l'alternative renseignée est pertinente pour identifier correctement la nature et la fonction de l'image. Nous recommandons seulement de réduire le nombre de mots utilisés pour définir cet outil. En effet, il faut veiller à ne pas dépasser un certain nombre de caractères afin que cette description puisse être aisément restituée sur les médias tactiles comme les barrettes braille. Illustration du problème : Impact sur les internautes en situation de handicap : Pour l'utilisateur d'un logiciel de grossissement avec le navigateur Internet Explorer, cette alternative textuelle s'affiche dans une info-bulle au passage de la souris. Du fait que cette alternative textuelle est limitée à 80 caractères, elle pourra s'afficher sur un seul écran, même avec un fort grossissement. Pour l'utilisateur d'un afficheur braille de 80 caractères, cette alternative textuelle limitée à 80 caractères s'affiche sur une seule ligne. 16

17 Recommandations à mettre en oeuvre : Il s'agira de saisir des alternatives précises et concises pour donner du sens et apporter de la signification pour appréhender au mieux la nature et la fonction de l'image. Valeur ajoutée pour le site : Si ces alternatives sont bien remplies et ont du sens, le site ne risque pas de perdre une partie de la population en situation de handicap. De plus, le référencement sera meilleur grace à l'emploi de termes courts et précis. Critère 1.5 Pour chaque image utilisée comme captcha, une solution d'accès alternatif au contenu ou à la fonction du captcha est-elle présente? Problème constaté : Avec le même exemple que précédemment, nous pouvons constater l'absence d'une solution à cette méthode. Illustration du problème : 17

18 Impact sur les internautes en situation de handicap : Dans le cas présent, l'internaute en situation de handicap visuel n'a aucun moyen de répondre aux attentes du concepteur de la page, à savoir remplir correctement le code dans le champ prédéfini en recopiant les lettres ou cles chiffres présents dans l'image. Le site ne lui propose pas de solution alternative. Il n'a donc aucun moyen de pouvoir contacter le webmaster du site. La seule possibilité qui lui est offerte est de demander une aide extérieure. Recommandations à mettre en oeuvre : Il s'agira de proposer d'autres solutions à cette méthode de captcha. Il pourra s'agir d'une aide sonore restituant de façon vocale le contenu de l'image avec par exemple la possibilité de télécharger un fichier sonore contenant le texte présent dans l'image. L'accès à un test de logique en remplacement et la posibilité de contacter le resposable du site sont des solutions de remplacement. Valeur ajoutée pour le site : Le fait de proposer d'autres types de fonctions pour déjouer les robots et ainsi d'éviter le spam contribuera à améliorer l'utilisation du site et à ne pas perdre la population en situation de handicap. Critère 1.6 Chaque image porteuse d'information a-t-elle, si nécessaire, une description détaillée? Problème constaté : Pour ces images, l utilisation du paramètre «alt» n est pas 18

19 suffisant. En effet, le contenu de ce paramètre ne doit pas être trop long ( il ne doit pas dépasser 80 caractères ) mais en même temps, il doit aussi produire du sens. Illustration du problème : Impact sur les internautes en situation de handicap : dans l'exemple ci-dessus, les utilsateurs ne peuvent accéder au contenu de l'image. Toutes les indications concernant les différents pourcentages par rapport aux métiers ne seront donc pas visibles. Il y a donc une perte de sens dans ce cas. Recommandations à mettre en oeuvre : Selon les différents cas, il est possible d'ajouter une légende texte explicite à proximité de l'image ou pour les images à fort contenu, il est préférable d'utiliser le paramètre «longdesc» («description longue») de la balise d image. Avec cette méthode, il est possible d'associer un commentaire plus détaillé à l'image. Le principe de fonctionnement est simple. L'attribut 19

20 longdesc de la balise img comporte un lien vers une page html qui contient une description détaillée de l'image. De plus, ce lien n'est perceptible que par les aides techniques comme les lecteurs d'écran. Valeur ajoutée pour le site : Toute information publiée sous forme de texte dans un site, possède toujours l'avantage d'apporter une meilleure lisibilité de celui-ci et donc de meilleur référencement par les moteurs de recherche. Ces derniers sont d'ailleurs friands des balises alt et longdesc. Critère 1.7 Pour chaque image réactive, les zones cliquables sont elles définies juste après la déclaration dans le code source? Problème constaté : Toutes les zones cliquables coté client (balises area contenues dans la balise map) d'une image réactive doivent être définies juste après la déclaration de l'image dans le code source. L'image que nous avons choisi pour illustrer notre exemple est sur la page «qui sommes nous». Illustration du problème : 20

21 Nous avons donc cette image dans laquelle nous pouvons cliquer à de multiples endroits pour accéder à des parties différentes du site. L'image est définie dans le code à la ligne

22 Les liens correspondant à cette image sont définis à la ligne 1146 et suivantes. Impact sur les internautes en situation de handicap : Les internautes aveugles utilisent généralement, pour naviguer, un lecteur d'écran ou un navigateur vocal qui ont la particularité de restituer l'information dans l'ordre dans lequel elle est inscrite dans le code source. C'est ce qu'on désigne par le terme de "lecture linéaire". Dans certains cas les zones cliquables d'une image réactive ne sont pas codées immédiatement après la déclaration de l'image, mais plus loin dans le code, voire à la fin de la page. Un utilisateur aveugle, parcourant linéairement la page, lira d'abord le commentaire général de l'image réactive, puis il lira le contenu de la page et enfin les commentaires associés aux zones cliquables (balises area). L'accès linéaire à l'information provoque une rupture logique et ne permet pas à l'utilisateur de relier l'élément graphique principal aux zones cliquables qui lui sont associées. Ceci peut s'avérer d'autant plus inintelligible si la page comporte plusieurs déclarations d'images réactives dissociées de leurs zones cliquables. Si le critère est respecté, l'utilisateur 22

23 associera plus facilement l'image réactive et les zones qui la composent et ne risque pas d'être dérouté si la page contient plusieurs images cliquables. Recommandations à mettre en oeuvre : Le développeur du site doit veiller au respect de ce critère. Une image réactive se compose de deux parties. Une première partie constituée par l'image en elle-même, caractérisée par la balise img et une seconde partie constituée par des zones cliquables situées entre les balises ouvrantes et fermantes map. Il est impératif de ne pas séparer ces deux parties afin de permettre une bonne cohérence de l'ensemble de l'image. Il est important de spécifier le contenu et la fonction de toutes les zones réactives de ce type d'image dans l'attribut alt. Valeur ajoutée pour le site : La maintenance et la mise à jour de données contenues dans l'image réactive sont beaucoup plus aisées car la lecture du code est facilitée par le regroupement des informations ayant un rapport direct entre elles. Critère 1.9 Chaque image texte, en l'absence d'un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée? Problème constaté : Une image texte est une image qui affiche du texte. Dans la 23

24 plupart des cas, le texte en dur dans l'image peut être remplacé par du texte stylé. Nous avons repéré certaines images contenant du texte. Ainsi, sur la page «jeunes et familles», nous pouvons voir une image qui contient du texte. Illustration du problème : Dans l'exemple qui nous intéresse, nous pouvons voir que «jeunes et familles» fait partie de l'image. Impact sur les internautes en situation de handicap : Les inscriptions «jeunes et familles» sont donc contenues dans l'image. 24

25 L'application de cette recommandation va permettre à un utilisateur malvoyant, par exemple, de modifier à sa convenance la taille des caractères pour lire plus aisément les informations. Un texte dessiné dans une image empêchera cette souplesse de configuration, puisque sa taille ou son contraste ne peuvent pas être modifiés dans le navigateur ou le logiciel de grossissement de l'utilisateur. Recommandations à mettre en oeuvre : Toutes les images texte doivent être remplacées par du texte stylé sauf si la transformation à l'identique est impossible. Il faut donc dans ces images positionner du texte qui sera controlé par une feuille de style. On peut aussi utiliser la technique de remplacement de l'image. Cette technique permet d'inclure du texte qui sera seulement accesible aux lecteurs d'écran mais pas avec les navigateurs classiques. En effet, le texte est décalé sur la gauche grace à des propriétés de style left négative. ( dans la feuille de style css, ajouter une ligne du style text-indent : -9999px ).Il n'apparait donc pas à l'écran mais reste présent pour les personnes en situation de handicap. Valeur ajoutée pour le site : La présence de texte mis en forme par l'utilisation de feuilles de style au lieu de textes en image permet une mise à jour plus facile pour le graphiste et l'intégrateur html. Des modifications peuvent être apportées facilement en modifiant seulement la partie html pour le contenu à proprement parler mais aussi de modifier la partie visuelle en intervenant sur les feuilles de style CSS. 25

26 LES COULEURS Critère 3.3 Dans chaque page Web, chaque contraste de couleurs est-il suffisamment élevé? Problème constaté : Toutes les pages web doivent avoir des contrastes de couleur suffisamment élevés. Ainsi, si nous naviguons sur la page «nous aider», nous arrivons sur la page suivante. Illustration du problème : 26

27 Nous avons donc des liens écrits avec une couleur orange sur fond blanc. Après analyse du contraste de ces couleurs, nous apercevons que les couleurs choisies ne passent pas le test de validation. Impact sur les internautes en situation de handicap : Une des phases essentielles de l'accessibilité des sites web est le contraste des couleurs. Le choix des couleurs ne doit pas se limiter exclusivement à des considérations d'ordre esthétique. Une mauvaise association de couleurs ou un contraste insuffisant peuvent ralentir, voire empêcher la lecture de l'information pour des utilisateurs atteints de daltonisme et ne percevant pas certaines couleurs. Il est conseillé de proposer une différence d'intensité suffisante entre la couleur du contenu au premier plan et la couleur du fond. Recommandations à mettre en oeuvre : De manière générale, il est conseillé d'éviter la multiplication 27

28 des palettes de couleurs sur une page. Toutefois, une des méthodes les plus réalistes consiste à recueillir, à partir d'une page type, l'avis d'un panel d'utilisateurs ayant ou non des difficultés à percevoir les couleurs. L'autre approche, complémentaire, consiste à utiliser un outil d'analyse des contrastes de couleurs, comme celui que nous avons utilisé pour tester les couleurs. ( ) SEPARATION FOND/FORME Critère 10.1 Dans le site Web, des feuilles de style sont elles utilisées pour controler la présentation de l'information? Problème constaté : Nous avons seulement repéré quelques erreurs dans la conception. En effet, dans le code source de la page d'accueuil, des balises strong permettent de jouer sur le coté visuel du contenu. Illustration du problème : 28

29 Impact sur les internautes en situation de handicap : Certains internautes ayant un handicap visuel ne pourront pas voir la page si le contenu n'est pas séparé de la présentation. En effet, ces visiteurs utilisent des feuilles de styles personnalisées pour adapter la mise en page ou la mise en forme à leur handicap visuel. Certains vont augmenter fortement la taille des caractères; d'autres vont remplacer les couleurs qu'ils discernent mal par des nuances qu'ils voient plus distinctement. La séparation du contenu et de la présentation offre donc aux utilisateurs malvoyants mentionnés ci-dessus, la possibilité de consulter le site en fonction de leurs propres besoins Recommandations à mettre en oeuvre : Un site web doit impérativement utiliser des feuilles de style pour controler la présentation de l'information.il est donc formellement recommandé de remplacer les balises telles que font ou strong par des attributs dans les feuilles de style. Le grand principe du W3C est de réserver tout ce qui concerne le contenu textuel et la structuration d'une page au html ou xhtml et de faire prendre en charge tout ce qui relève de la présentation par les feuilles de style css. Valeur ajoutée pour le site : Ceci permet de gagner du temps lors de la conception d'un site car les feuilles de styles constituent un gabarit de présentation qui peut s'appliquer à l'ensemble des pages En cas de modification de la charte graphique, par exemple, il est plus facile en terme de maintenance, d'actualiser une feuille de style dont les changements s'appliqueront à toutes les pages auxquelles elle est reliée, plutôt que de modifier 29

30 l'aspect des multiples pages du site une à une. Critère 10.3 Dans chaque page Web,l'information reste-t-elle compréhensible lorsque les feuilles de style sont désactivées? Problème constaté : Si nous désactivons les feuilles de style CSS, l'information de toutes les pages doit rester compréhensible. Illustration du problème : 30

31 Le problème vient de l'utilisation de tableaux pour la présentation de la mise en page. La personne en situation de handicap va recevoir beaucoup d'indications relatives aux tableaux pour les informations que comporte la page. Impact sur les internautes en situation de handicap : Dans le cas d'utilisation de feuilles de style personnalisées, il est impératif que l'ordre d'apparition reste le même pour ne pas perturber les internautes dans leur navigation. Dans notre exemple, la désactivation des feuilles de style CSS provoque une incompréhension de l'information. Il est en effet difficile de se retrouver dans la page. Recommandations à mettre en oeuvre : Il faut toujours veiller à respecter une certaine logique. Le plus important est de concevoir la page de façon cohérente de telle sorte que celle ci soit lisible et compréhensible pour tous les utilisateurs. Dans cette optique, il est fortement déconseillé d'utiliser les tableaux de mise en page qui sont très génants en terme d'accessibilité. TITRES ET STRUCTURATION DE PAGES Critère 9.2 Dans chaque page Web, l'information est elle structurée par l'utilisation appropriée de titres? Problème constaté : 31

32 Dans chaque page Web, il doit y avoir un titre h1, au moins. L'utilisation des balises h permettent de structurer l'information d'un contenu Web. La hiérarchie entre les titres doit être respectée dans une page web et les degrés de titre ne peuvent pas être sautés. Sur le site de la fondation d'auteuil, nous avons repéré des pages avec la balise h1 manquante. Illustration du problème : Ainsi, sur la page d'accueil, quand on analyse le plan du document de cette page, nous avons l'arborescence suivante. Impact sur les internautes en situation de handicap : La structuration d'une page web par l'intermédiaire des balises h permet aux utilisateurs qui ne voient pas le texte à l'écran de mieux identifier les différents blocs d'information et la relation des différents textes les uns par rapport aux 32

33 autres. Alors qu'un utilisateur voyant l'écran peut rapidement repérer un titre de page parce qu'il est écrit en plus gros, dans une autre couleur, en gras ou dans un autre style, ces changements de présentation ne sont pas identifiables pour les utilisateurs qui ne voient pas l'écran. Par exemple, les utilisateurs de Jaws (synthèse vocale sous windows) peuvent saisir [Inser] [F6] pour afficher ou entendre une fenêtre avec tous les titres de la page, ce qui permet d'accéder rapidement à un titre particulier; Avec une page web structurée, les utilisateurs pourront rapidement accéder à une section de la page grâce à une fonctionnalité spécifique de leur navigateur ou de leur aide technique. Ils pourront comprendre comment la page est organisée. Cela permettra d'accélérer leur mode de navigation et d'effectuer une lecture plus rapide du contenu de la page. Recommandations à mettre en oeuvre : La bonne structuration d'une page doit être pensée dès la conception du site : c'est donc à la fois le travail du rédacteur de contenu qui pense à la hiérarchie des pages, mais aussi du développeur, qui insère le code approprié. Le graphiste peut également apporter un avis utile concernant la forme à donner aux titres : police, taille, couleur... Une fois que les spécifications graphiques ont été définies, elles peuvent être mises en oeuvre dans une feuille de style par le responsable technique du site. Dans notre exemple, il aurait fallu insérer une balise h1 avec le texte «bienvenue sur le site de la fondation d'auteuil». Pour les autres pages du site, la balise h1 est présente. Il 33

34 est fortement recommandé de structurer le contenu par l'utilisation des balises h1 à h6. En effet, ces balises permettront aux personnes en situation de handicap de comprendre rapidement comment la page est organisée. Ils pourront ainsi naviguer plus facilement et accéder rapidement à leurs recherches. Valeur ajoutée pour le site : L'utilisation de balises de structure de type h1 dans une page web permet aux moteurs de recherche de mieux référencer cette page. Critère 9.3 Dans chaque page Web, chaque liste est elle structurée avec les balises appropriées? Problème constaté : Dans la page «qui sommes nous», en cliquant sur le sousmenu «les partenaires», nous trouvons une énumération de partenaires dans divers domaines. Ces listes doivent être structurées avec les balises appropriées. Illustration du problème : 34

35 Impact sur les internautes en situation de handicap : La structuration d'informations par l'intermédiaire de listes permet aux utilisateurs qui ne voient pas le texte à l'écran de mieux identifier les différentes informations et la relation des unes par rapport aux autres. 35

36 Les listes sont un excellent moyen de structurer le contenu textuel d'une page, et donc d'organiser au mieux son contenu. Recommandations à mettre en oeuvre : La bonne structuration d'une page doit être pensée dès la conception du site : c'est donc à la fois le travail du rédacteur de contenu mais aussi du développeur, qui insère le code approprié. Critère 9.4 & Critère 9.5 Dans le site Web, y-a-t-il une page «plan du site»? Dans chaque page Web, la page «plan du site» estelle atteignable de manière identique? Impact sur les internautes en situation de handicap : Dans le cas des utilisateurs à mobilité réduite, la navigation à l'aide du plan du site est parfois plus efficace ergonomiquement que les menus de navigation euxmêmes. La fonction première d'un plan de site est de permettre au visiteur de s'orienter rapidement. Le plan du site donne une idée globale du contenu de chaque rubrique ainsi que de la taille du site lui-même. En terme d'accessibilité, l'utilisateur déficient consulte le plan du site lorsqu'il est perdu dans la navigation interne de celui-ci. Le fait de retrouver le(s) lien(s) vers la page plan du site toujours au même endroit et avec le même intitulé, est utile aux personnes à mobilité réduite qui pourront accéder à la page de n'importe quel endroit du site en limitant le nombre de manipulations nécessaires pour atteindre cette page. 36

37 Illustration du problème : Plan du site 37

38 Le lien «plan du site» est à la ligne 987 du code source de la page d'accueil. Recommandations à mettre en oeuvre : Lors de la conception du site, le développeur doit veiller à situer le lien «plan du site» en haut de la page. Pour les personnes handicapées motrices ou visuelles, le fait de positionner ce lien en haut de page leur permet d'éviter l'énumération systématique de tous les liens de la page ainsi que le défilement fastidieux vers le bas de la page. Il convient aussi de ne pas dépasser un certain nombre de liens dans cette page ( recommandé par Google ) et de niveaux d'imbrications. En effet, au-delà, la compréhension à partir d'une lecture d'écran devient plus complexe. Pour le site de la Fondation d'auteuil, il faudra opérer des modifications pour respecter ces différents critères et recommandations. 38

39 Critère 9.6 Dans le site Web, y a t'il une section décrivant l'accessibilité du site? Problème constaté : Sur la page d'accueil du site et sur toutes les autres pages du portail, nous ne trouvons aucune mention ou page décrivant l'accessibilité du site. Impact sur les internautes en situation de handicap : Cette section est utile pour toute personne qui désire 39

40 connaître la façon dont a été pensé le site web. Elle permet d'informer les utilisateurs des aménagements réalisés sur le site, en particulier, en matière d'accessibilité : règles d'accessibilité respectées, raccourcis claviers, liens de navigation interne, logiciels pour les fichiers en téléchargement... Recommandations à mettre en oeuvre : Le développeur doit veiller au respect de ce critère. La section décrivant l'accessibilité du site est avant tout destinée à faciliter la navigation et l'utilisation d'un site internet. Cette page sert principalement à présenter la variété des contenus ainsi que les éléments particuliers du site qui méritent une information. Cette section présente l'ensemble d'informations nécessaires à la compréhension par l'utilisateur des moyens mis en place pour l'accessibilité du site. Elle doit au moins comporter les informations suivantes : nsemble d'informations nécessaires à la compréhension par l'utilisateur des moyens mis en place pour l'accessibilité du site. Cette section doit au moins comporter les informations suivantes : le niveau d'accessibilité du site Web en référence à un référentiel officiel la liste complète des raccourcis clavier ainsi que l'indication des combinaisons de touches à utiliser les liens vers les applications à télécharger nécessaires à la consultation de certaines informations présentes sur le site Web le menu de navigation principal qui permet d'explorer le 40

41 site plus aisément. Il contient ous les liens vers les principales rubriques. Un fil d'ariane commencant par un lien vers le sommaire, juste avant le contenu de la page, qui permet également de connaître la page sur laquelle on se trouve et de revenit rapidement au menu de navigation supérieur. Un logo du haut de page qui permet de revenir à la page d'accueil du site, et ce de toutes les pages. La compatibilité avec les navigateurs les normes d'accessibilité qui ont été utilisées pour le site. Valeur ajoutée pour le site : En terme de conception et de maintenance, la section décrivant l'accessibilité du site constitue une bonne synthèse des aménagements effectués vis-à-vis de l'accessibilité. LES LIENS HYPERTEXTES Critère 6.1 Chaque lien sans titre de lien est-il explicite hors contexte? Problème constaté : 41

42 Sur certaines pages, nous avons repéré des liens sans titre de lien. Le titre est le contenu de l'attribut title d'un lien. Ce contenu ne doit être présent que s'il est nécessaire pour identifier la destination du lien de manière explicite et hors contexte. Ainsi, sur la page «actualités», nous pouvons voir : Illustration du problème : Impact sur les internautes en situation de handicap : Ces liens «Lire la suite» ne sont pas explicites hors 42

43 contexte. L'intitulé du lien doit indiquer la destination du lien de manière explicite. Dans ces exemples, rien ne permet de distinguer les liens entre eux pour un utilisateur qui passe de lien en lien avec la seule touche tabulation. En plus, ces liens conduisent vers des pages différentes avec les mêmes appelations. Recommandations à mettre en oeuvre : Il faut exclusivement utiliser des intitulés de liens (portion de texte située entre les balises a et /a) explicites hors du contexte de la page. Dans les problèmes observés dans notre audit, il faudrait remplacer «Lire la suite» par «Lire la suite sur le trophée des lycées». Recommandations à mettre en oeuvre : Les personnes responsables de la partie rédactionnelle ont la charge du respect de ce critère et à ce titre, doivent veiller à utiliser des termes brefs et précis pour coller au mieux au contenu. Il est impératif que les liens soient compréhensibles. Valeur ajoutée pour le site : Les principaux moteurs de recherche prennent en compte les liens pointant vers une page pour la positionner dans leurs pages de résultats. L'utilisation de liens explicites (reprenant des mots-clés par exemple) améliore le référencement des pages. 43

44 Critère 6.2 Pour chaque lien ayant un titre de lien, ce titre est-il nécessaire? Problème constaté : Sur certaines pages, nous avons repéré des liens avec des titres de lien qui ne sont pas nécessaires à la bonne compréhension de la nature du lien. En effet, le titre du lien reprend de façon identique l'intitulé du lien et n'apporte donc pas d'information supplémentaire. Illustration du problème : Les title «Début,Précédente, Suivante et Fin» sont identiques aux liens. Recommandations à mettre en oeuvre : Il convient donc d'ajouter un titre de lien à un lien seulement quand cela est nécessaire et indispensable. L'intitulé du lien est lui-même suffisamment explicite. Critère 6.3 Pour chaque lien ayant un titre de lien, ce titre est-il 44

45 pertinent? Problème constaté : Dans la section «Actualités», nous avons repéré une image avec un lien. Ce lien a un titre de lien qui ne nous semble pas pertinent. Illustration du problème : Impact sur les internautes en situation de handicap : Dans cet exemple précis, nous constatons que le lien ouvre une nouvelle fenêtre qui permet de visualiser l'image dans un format conséquent. Lorsque des liens déclenchent l'ouverture d'une nouvelle fenêtre, un utilisateur aveugle ou malvoyant doit en être averti afin de pouvoir mieux organiser sa navigation et d'être toujours en mesure de se situer. Recommandations à mettre en oeuvre : Le contenu de l'attribut title doit reprendre l'intitulé du lien tout en apportant des informations supplémentaires comme, par exemple, l'ouverture d'une nouvelle fenêtre provoquée par l'activation de ce lien. On aurait pu avoir le code suivant : <a href=" 45

46 auteuil.org/images/stories/pdf/actualites/2010/fete_des_plan tes_2010_flye.jpg/" title="voir l'affiche de fête des plantes (Nouvelle fenêtre)">fête des plantes </a> Valeur ajoutée pour le site : Le contenu de l'attribut title influe sur le taux d'indexation des moteurs de recherche et le référencement des pages. Critère 6.4 Chaque lien a-t-il une longueur maximum de 80 caractères? Problème constaté : Sur la page recrutement sous l'onglet candidature spontanée, nous notons la présence d'un lien comprenant plus de 80 caractères. Illustration du problème : 46

47 Impact sur les internautes en situation de handicap : La majorité des afficheurs braille utilisés par les personnes aveugles ont une longueur moyenne de 40 caractères. Un lien de plus de 80 caractères (deux lignes sur un afficheur braille) oblige à plusieurs manipulations pour prendre connaissance de l'intitulé complet du lien. Recommandations à mettre en oeuvre : Les personnes responsables de la partie rédactionnelle ont la charge du respect de ce critère. Il faut veiller à rédiger des intitulés de liens comportant de 7 à 8 mots en moyenne. Valeur ajoutée pour le site : La rédaction de liens de 80 caractères maximum permet une réflexion en amont sur la pertinence et la concision à apporter sur chacun des liens présents sur la page. 47

48 Critère 6.5 Chaque lien identique a-t-il la même URL? Problème constaté : Sur la page actualités du site, nous constatons que le même lien, à savoir «Lire la suite», mène vers des url différentes. Or des liens identiques doivent avoir la même url. Illustration du problème : Impact sur les internautes en situation de handicap : Pour activer un lien, les utilisateurs de logiciels de reconnaissance vocale prononcent son intitulé ou son titre de lien s'il est présent. En rencontrant des liens identiques, 48

49 le logiciel de reconnaissance vocale prononcera donc la même chose et si les destinations de ces liens sont différentes, l'utilisateur sera désorienté, ce qui est le cas dans notre exemple. Dans ce dernier cas, ils devront valider sur chaque lien de même intitulé pour connaître le contenu de la page vers laquelle ils mènent. Ces manipulations multiples peuvent occasionner une perte de temps. Recommandations à mettre en oeuvre : Les personnes responsables de la rédaction des pages doivent faire un effort lors de l'écriture de ces liens en différenciant bien les liens, soit par leur propre intitulé, soit par un ajout d'informations à l'aide de l'attribut title. Valeur ajoutée pour le site : La pertinence et le fait de différencier les liens entrainent plus de lisibilité pour les utilisateurs qui ne sont pas désorientés lors de leur navigation. LE FORMULAIRE Critère 11.4 Dans chaque formulaire, chacun des blocs d'informations de même nature a-t-il si nécessaire une balise fieldset? 49

50 Problème constaté : Sur la page dédiée à la possibilité de contacter le siège de la fondation d'auteuil, nous nous apercevons que les blocs d'informations de même nature n'ont pas de balise fieldset. Illustration du problème : Impact sur les internautes en situation de handicap : Le fait de regrouper visuellement des informations de même nature en les encadrant, permet de faire ressortir la 50

51 structuration des informations et de les rendre ainsi plus compréhensibles à tout internaute, et plus particulièrement aux personnes ayant des difficultés de concentration. Lorsque les informations de même nature sont clairement identifiées par un encadrement, cela offre une aide visuelle pour les personnes malvoyantes qui peuvent ainsi mieux se repérer entre les différents champs. Recommandations à mettre en oeuvre : La balise label est utilisée pour mettre une étiquette à un élément de formulaire. Elle est donc présente juste avant ou juste après l'élément du formulaire auquel elle est associée. La valeur de l'attribut for de la balise label doit correspondre à la valeur de l'attribut id de l'élément du formulaire (champ, case à cocher,...). Dans un même formulaire, plusieurs champs de saisie de même nature, comme les champs "nom", "prénom", "date" et "lieu de naissance" constituent, par exemple, le groupe de champs "Etat civil". Ils peuvent être regroupés par l'intermédiaire de la balise fieldset. La balise fieldset permet de créer une zone de regroupement d'éléments d'un formulaire en formant, par défaut, un liseré autour du bloc d'informations. Afin de mieux distinguer deux blocs se rapportant à des groupes de champs différents, il suffit donc d'encadrer chacun d'eux avec la balise fieldset immédiatement suivie de la balise legend. 51

52 Critère 11.7 Dans chaque formulaire, chaque liste de choix est-elle structurée de manière pertinente? Problème constaté : Dans le menu jeunes et familles, nous trouvons un formulaire qui nous permet de rechercher des établissements selon différents critères. Si la recherche d'établissement est pertinente (classement par ordre alphabétique ), les autres recherches ne sont pas structurées de manière pertinente. Illustration du problème : 52

53 Nous constatons que les recherches par filière ne sont pas classées de façon optimale. En fin de liste, nous trouvons la filière Agriculture. Un classement différent aurait été plus pertinent. Il en est de même pour les recherches par diplôme. On 53

54 passe d'un bac pro à un CAP pour revenir ensuite à un bac pro vente. Impact sur les internautes en situation de handicap : Pour les utilisateurs aveugles la lecture des éléments de liste se fait élément par élément. Ces éléments de liste apparaissent dans l'ordre dans lequel ils sont écrits dans le code source de la page. Il vaut donc mieux suivre un ordre logique pour les présenter afin que l'utilisateur puisse ainsi repérer plus rapidement l'élément qu'il recherche. Recommandations à mettre en oeuvre : Le développeur et le webmaster rédactionnel sont responsables du respect de ce critère. Ils doivent selon les situations, présenter les différents choix en les classant par ordre alphabétique, ou pour suivre notre exemple par catégorie socio-professionnelle. Dans tous les cas, un effort devra être fourni pour apporter un confort d'utlisation aux personnes handicapées. Critère Pour chaque formulaire, le contrôle de saisie est-il accessible? Problème constaté : Dans tous les formulaires du site, nous constatons l'absence de mention du caractère obligatoire des champs. Illustration du problème : 54

55 Impact sur les internautes en situation de handicap : Un contrôle de saisie accessible permettra à n'importe quel utilisateur de valider le formulaire, quelle que soit l'interface dont il se sert : navigateur graphique, navigateur gérant ou non les scripts, souris, clavier ou autre dispositif de pointage. Recommandations à mettre en oeuvre : il est important de spécifier les champs obligatoires de manière explicite et mettre cette mention de préférence en préambule du formulaire. Il faut veiller à ne pas effacer les champs saisis par l'utilisateur en cas d'erreur. La page qui renvoie les erreurs de saisie doit indiquer clairement les champs où se situent 55

56 les erreurs. Valeur ajoutée pour le site : Les actions côté serveur vont réduire la lourdeur du code. LES ELEMENTS ANIMES Critère 4.1 Chaque objet mulimédia a-t-il, si nécessaire, une transcription textuelle? Problème constaté : Le site présente des vidéos sans transcription textuelle. La vidéo présente sur la page d'accueil n'a pas de transcrption textuelle. Illustration du problème : 56

57 Impact sur les internautes en situation de handicap : Dans le code source de la page, nous ne trouvons pas de contenu textuel associé à cette vidéo par la technique appropriée ( texte codé en html ou dans un fichier texte qui se trouve dans la même page ou consultable suivant un lien ) Sans alternative textuelle, les présentations multimédia ne sont pas accessibles aux personnes qui ont des déficiences auditives et/ou visuelles et aussi à toutes les personnes qui ne peuvent exécuter des fichiers multimédias car non équipées des logiciels nécessaires. Recommandations à mettre en oeuvre : Le rédacteur de contenu doit fournir la transcription textuelle associée à l'objet multimédia. Dans notre exemple, un message devrait informer l'internaute qu'un fichier texte de transcription de la vidéo ( contenant l'alternative textuelle 57