L accessibilité du web :

L accessibilité du web : Les laissés pour compte de l évolution numérique Mémoire Présenté et soutenu publiquement le 18 septembre 2012 Jérémy PUTEAUX Tuteur enseignant : Didier ARQUES Tuteur entreprise : Charles RINCHEVAL Promotion 2012 Licence Activités et Techniques de Communication

Remerciements J aimerais tout d abord remercier mon tuteur enseignant Didier Arquès ainsi que mon tuteur d entreprise Charles Rincheval pour leur relecture. Merci également à Madame Scarbonchi pour ses conseils qui m ont permis de travailler plus sereinement. Et pour finir, merci à Fabienne Boucherit pour son soutien au quotidien.

Table des matières Avant-propos... 1 Introduction... 2 L accessibilité, qu est-ce que c est?... 2 L accessibilité numérique... 2 Qui sont ces laissés pour compte?... 3 Le handicap en France... 5 1. Etat des lieux du web en 2012... 7 1.1. L évolution du web depuis 1994... 7 1.1.1. La naissance du web... 7 1.1.2. Le web 2.0... 13 1.2. La normalisation du web... 15 1.2.1. Le World Wide Web Consortium... 15 1.2.2. La Web Accessibility Initiative... 16 1.2.3. Le référentiel International WCAG... 17 1.2.4. Les référentiels français... 19 1.2.5. Accessible Rich Internet Application... 20 1.2.6. Les outils pour tester l accessibilité... 21 1.3. L accessibilité numérique et la loi... 23 1.3.1. Les législations en Europe... 23 1.3.2. La législation française... 23 2. Le handicap au numérique... 25 2.1. Types de handicaps et technologie d assistance... 25 2.1.1. Troubles visuels... 25 2.1.2. Troubles moteurs... 28 2.1.3. Troubles auditifs... 30 2.1.4. Troubles cognitifs... 31 2.2. L accessibilité du web et les nouveaux supports?... 33

2.3. Tests d accessibilité... 35 2.3.1. Les critères d analyse... 35 2.3.2. Test d accessibilité du site du journal Le Monde (lemonde.fr)... 41 2.3.3. Test accessibilité du site de la mairie de Paris (paris.fr)... 43 2.3.4. Test accessibilité du site orange.fr... 46 3. L accessibilité, un défi pour notre société... 48 3.1. Comment en est-on arrivés là?... 48 3.1.1. L accessibilité, oubliée dès le départ... 48 3.1.2. Des lacunes chez les professionnels du web... 49 3.2. Pourquoi rendre un site accessible?... 52 3.2.1. Des bénéfices techniques... 52 3.2.2. Des bénéfices commerciaux... 52 3.2.3. Bénéfices juridiques... 53 3.2.4. Bénéfices en terme d image... 54 3.3. Comment rendre son site accessible?... 54 3.3.1. Rendre accessible un site existant... 54 3.3.2. Créer un site web accessible... 56 3.3.3. Faire tester son site... 58 3.4. Comment changer les choses sur le long terme... 59 3.5. Qui peut changer les choses?... 60 3.6. Et l accessibilité dans le futur?... 61 Finalement... 63 Glossaire... A Bibliographie... B Webographie... C Autres sources... D Annexe... E WCAG 2.0... E

Avant-propos Dans le cadre de mon année en Licence Professionnelle, je suis amené à réaliser un mémoire sur le sujet de mon choix en rapport avec mon activité en alternance. Etant apprenti intégrateur web, j ai choisi de m intéresser à l accessibilité à internet des personnes atteintes de handicap. Pourquoi ce choix? Ayant depuis longtemps été curieux du monde du web, je me dirige vers le métier de développeur «front» dont l accessibilité est une part importante. Malheureusement bien trop souvent laissée de côté, elle sera de plus en plus présente dans l avenir. Jérémy Puteaux 1

Introduction L accessibilité, qu est-ce que c est? On la retrouve tout d abord sur le plan social. Dans la vie de tous les jours, l accessibilité évoque l accès pour tous à un lieu, à l éducation, à la culture, à la santé, à l information, à la connaissance,... Les personnes les plus fragiles sont plus susceptibles d être exclues de l évolution de la société. Cela peut être dû à leur situation sociale ou économique, leur couleur de peau, leur âge ou leur état de santé. Or, dans un état démocratique comme la France, l égalité des chances est un principe de base. Enfin, l accessibilité concerne surtout les personnes handicapées. Le but est de ne pas marginaliser ces personnes afin de les intégrer au mieux dans la société. Et cela commence en ne bafouant pas leurs droits fondamentaux. Parmi ces droits fondamentaux, on retrouve le droit à l information, dont l accessibilité numérique fait partie. L accessibilité numérique Elle porte sur l accès au plus grand nombre aux informations de types numériques et regroupe l internet, la téléphonie mobile, la télévision et la radio numérique. C est sur l accessibilité au web que ce mémoire se focalise, en mettant en exergue les difficultés que rencontrent les laissés pour compte de l évolution numérique. Jérémy Puteaux 2

Qui sont ces laissés pour compte? «Les espérances de vie à la naissance et à 65 ans continuent de progresser en Europe. La France fait partie des pays où les femmes vivent le plus longtemps (84,8 ans), les hommes se situant dans la moyenne (78,2 ans). L espérance de vie à 65 ans est en revanche la plus élevée, tant pour les femmes (22,8 ans) que pour les hommes (18,6 ans). Revers de la longévité, les femmes passent plus de temps avec des incapacités, dans un contexte d isolement social plus marqué, soulignant l importance des prises en charge sanitaires et sociales des maladies chroniques.» 1 Le gouvernement a récemment publié un rapport sur «Le fossé numérique en France». Selon ce dernier, le fossé est avant tout générationnel : la possession d un ordinateur ou l accès à internet diminue fortement avec l âge. Seulement 18% des français de plus de 65 ans utilisent internet alors qu ils sont 65% au Danemark et 68% en Finlande. En France, les seniors représentent 18 millions de personnes (Source INSEE) et ce chiffre va continuer d augmenter d après le rapport de suivi des objectifs de la loi de santé publique publié en 2012. En avançant dans l âge, les seniors ont davantage de risques de développer des troubles (vision, audition, mobilité,...) qui peuvent avec le temps devenir un véritable handicap au quotidien. Le fossé générationnel n en est alors que plus grand, notamment par leur difficulté à accéder à la technologie numérique. Pour exemple, les déclarations d'impôts en ligne ont augmenté de 15% en 2011, selon le ministère des Finances. Preuve en est qu internet prend de plus en plus de place dans la vie pratique des français, au détriment des personnes âgées toujours plus lésées au fil des années. Cette barrière crée également un fossé social mais aussi culturel, de par la difficulté à accéder à l information. 1 http://www.drees.sante.gouv.fr/l-etat-de-sante-de-lapopulation-en-france,10979.html : Rapport de suivi des objectifs de la loi de santé publique 2011. Etudes et résultats, n 805, Drees, juin 2012 Jérémy Puteaux 3

Les seniors ne sont pas les seuls touchés par ces problèmes. Ils concernent aussi les personnes handicapées ayant une ou plusieurs déficiences, temporaires ou permanentes (12 millions de personnes selon une enquête Handicap, Incapacité, Dépendance (HID) menée par l INSEE en 1999). 66 35,3 Nombre de Français Nombre d'internautes Comparaison du nombre de Français et du nombre d internautes en France 12 Un handinaute est une personne handicapée surfant sur internet. Nombre d'handicapés en France 2,5 Nombre d'handinautes Comparaison du nombre d handicapés en France et du nombre d handinautes* Jérémy Puteaux 4

Le handicap en France Le 11 février 2005, le handicap fut redéfini dans une loi : «Constitue un handicap, au sens de la présente loi, toute limitation d'activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d'une altération substantielle, durable ou définitive d'une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d'un polyhandicap ou d'un trouble de santé invalidant.» D après le rapport «Le handicap en chiffres» du CTNERHI de 2004, le handicap est composé de 7 populations. Source : Le handicap en chiffres, février 2004, Centre technique national études et recherches (CTNERHI) Caractérisation des 7 populations handicapées Jérémy Puteaux 5

Les personnes handicapées et les seniors représentent une part très importante de la population française. Pourtant, ils sont bien souvent les laissés pour compte de l évolution numérique. Quelques chiffres : 500 millions dans le monde 15% en Europe 12 millions en France 12,8 millions de personnes âgées 8% d internautes français handicapés Afin de comprendre le web d aujourd hui, il est nécessaire de faire un état des lieux qui retracera ses étapes marquantes. Ce mémoire s intéressera dans un premier temps, aux personnes handicapées et aux outils qu elles utilisent pour les assister. Dans un second temps, une analyse des sites lemonde.fr, paris.fr et orange.fr sera effectuée afin d établir l état de leur accessibilité. Pour terminer, ce rapport tâchera de comprendre comment il est encore possible aujourd hui que seulement 5% des sites soient accessibles. Aperçu du site willyontheweb.be qui représente bien l état actuel de l accessibilité du web Jérémy Puteaux 6

1. Etat des lieux du web en 2012 En juillet 2012, il existait plus de 665 millions de sites web à travers le monde. (Source : netcrafts.com). Selon une étude de 2006, publiée par e-mediacité*, près de 95% des sites web ne respectent pas les critères d'accessibilité. En 2007, la Commission européenne a constaté la même valeur. Dans le but de mieux comprendre le web de 2012 et ensuite pouvoir expliquer pourquoi seuls 5% des sites web respectent les critères d accessibilité, un état des lieux est nécessaire. Cet état des lieux s intéressera tout d abord à l évolution du web de ses débuts à nos jours, puis à sa normalisation qui s est imposée en 1994, pour évoluer au fil du temps. Pour finir sera abordée la question de l accessibilité numérique selon la législation européenne et française. * devenu depuis Inexine. 1.1. L évolution du web depuis 1994 Pour bien comprendre l internet d aujourd hui, il est essentiel de retracer son histoire en s intéressant à chaque étape importante ainsi qu à son accessibilité. 1.1.1. La naissance du web Le web utilise un langage de balisage qui permet de structurer sémantiquement le contenu d une page Internet et de naviguer d une page à l autre via des liens hypertextes. C est le HTML (Hypertext Markup Language). Depuis la première page HTML apparue en 1990, le web a été en constante évolution. Il a suivi plusieurs modes qui ont été dicté par les nouvelles fonctionnalités des langages du web. Pourtant, tout a commencé par une période très pauvre appelée web «préhistorique». Le web «préhistorique» En 1994, le langage HTML se limitait à des liens, des titres, des listes et des paragraphes. A cette époque, il était impossible de faire une mise en page. Les éléments s entassaient les uns en Jérémy Puteaux 7

dessous des autres. On appelle cela aujourd hui le web «préhistorique». C est ce que l on peut constater sur le site yahoo.com d octobre 1996. Et l accessibilité? Jusqu en 1997, les premières versions du HTML n étaient pas adaptées aux outils d assistance tels que les lecteurs d écran, les synthèses vocales ou les plages braille permettant aux nonvoyants d utiliser internet. Capture d écran du site yahoo.com en octobre 1996 qui n avait pas de mise en page Jérémy Puteaux 8

La «guerre» des navigateurs En 1995, le marché des navigateurs est un gros gâteau qui se coupe en deux parts : Netscape - utilisé par 80% des utilisateurs - et le tout nouvel Internet Explorer. En quelques années, chacun d eux inventa de nouveaux éléments HTML. Quand Netscape proposa la balise <blink>, de son côté Internet Explorer introduisit <marquee>. L adoption des technologies concurrentes ne se fera que très lentement, obligeant les internautes à posséder les deux navigateurs pour afficher tous les sites correctement. La première version à succès d Internet Explorer est arrivée avec Windows 98. Cette «guerre» dura jusqu à l an 2000 lors du rachat de Netscape par AOL. Internet Explorer, utilisé désormais par plus de 80% des internautes, cessa complètement d être développé. C est pour cela qu il n y eut pas de nouvelle version d IE entre 2001 (IE6) et 2006 (IE7). Et l accessibilité? Cette «guerre» provoqua de gros dégâts pour l accessibilité. Les balises <blink> et <marquee> furent énormément utilisées par les développeurs de sites internet pour animer une page. Malheureusement ces éléments ne facilitaient pas la lecture pour les personnes handicapées, l évolution technique allait donc à l encontre de l accessibilité. Le manque de volonté de la part de Microsoft pour respecter les normes et sa longue période sans innovation depuis IE6 furent souvent critiqués. La première mise en page Afin de remédier à ce problème de mise en page, les développeurs ont eu l idée d utiliser les tableaux via la balise Jérémy Puteaux 9

<table> (prévus à l origine pour mettre en forme des données). Cette technique s est très rapidement démocratisée et a littéralement envahi la toile. Le code HTML étant un langage structuré sémantiquement, l utilisation de la balise <table> dans le cadre d une mise en page n a aucun sens. Comme le démontre l aperçu du site yahoo.com de février 2000, la mise en page pouvait devenir très complexe puisqu il était possible d imbriquer les tableaux les uns dans les autres, augmentant le temps de chargement de la page. Aperçu du site yahoo.com en février 2000 utilisant des tableaux imbriqués Jérémy Puteaux 10

Encore aujourd hui, il n est pas rare de trouver des sites construits avec des tableaux. Et l accessibilité? Aux alentours des années 2000, l accessibilité a été considérablement réduite. En effet, l utilisation de la balise <table> dans le code étant purement à vocation esthétique, les lecteurs d écran lisaient la page comme un tableau de données, rendant cela incompréhensible. Apparition des premières feuilles de styles CSS L apparition des feuilles de styles CSS en 1996 a permis de séparer le fond d une page web (représenté par le code HTML) de sa forme. Dans leurs premières versions, elles étaient rarement utilisées car leurs capacités étaient limitées. La présence de CSS ne signifie pas pour autant accessibilité mais cela y contribue. Aujourd hui encore, certains sites internet n utilisent pas de feuilles de styles, le code CSS se retrouve alors avec le HTML. Et l accessibilité? L apparition des feuilles de styles a été favorable à l accessibilité, simplifiant la lecture du code. Cependant, une utilisation maladroite pouvait créer une confusion entre une balise de titre (h1, h2,...) et une règle dans le code CSS (#titre1). L affichage est le même mais la valeur sémantique est complètement perdue, ce qui a pour conséquence d altérer la compréhension de la page web pour un lecteur d écran. Jérémy Puteaux 11

L ajout d animations Après la mise en page, vint la mode des animations. Le gif (image animée) était alors utilisé abondamment, sa simplicité ne nécessitant pas d autre connaissance que celle du HTML. Avec le temps, le gif se fit plus rare, laissant place à des animations plus esthétiques et modernes utilisant de nouveaux langages tels que Flash et JavaScript. Flash fut le plus utilisé pendant longtemps car il permet de créer des animations très fluides une fois celle-ci chargées. Il souffre cependant de nombreux problèmes, notamment un temps de chargement relativement long ainsi que le non référencement (indexation dans un moteur de recherche) de tout son contenu. JavaScript lui, est un outil permettant d agir directement sur le code HTML, CSS ou sur le contenu d un site en fonction des actions de l internaute. S il fut longtemps laissé de côté au profit du Flash, les problèmes de ce dernier firent s inverser la tendance au fil des années. Et l accessibilité? Du point de vue de l accessibilité, Flash n est pas adapté car il impose l installation de l application Flash Player. De plus, l objet de l animation étant illisible par les lecteurs d écran, son contenu est perdu pour les personnes en utilisant. De son côté, JavaScript doit être utilisé avec précaution. Beaucoup de sites ne fonctionnent plus si on le désactive car ils se servent de ce langage de façon intrusive au code HTML. Jérémy Puteaux 12

1.1.2. Le web 2.0 Le web 2.0 est l évolution naturelle du web historique ; il est apparu vers 2005 et s est popularisé dès 2007. Ce nouveau web est basé notamment sur la communication entre les internautes et le partage des données. La spécialité du web 2.0 est de rafraîchir une partie de la page dans le but de la rendre plus interactive. C est l utilisation d Ajax qui permet cela. Le web 2.0 est caractérisé par l apparition de nouveaux supports (smartphones, tablettes tactiles, ) favorisant l interaction entre les internautes via des plateformes sociales (Facebook, Twitter, blogs, ) ainsi que les informations (flux RSS) grâce à la combinaison de langages tels que le HTML5, le CSS3 et JavaScript. Ajoutons à cela l accroissement de la puissance des machines et de la bande passante permettant de faire transiter des média lourds (vidéo, son). Et l accessibilité? De façon générale, le web 2.0 améliore l accessibilité des sites puisque les technologies qui le composent suivent les critères de normalisation récents. Concernant AJAX, il ne doit pas être utilisé de façon intrusive afin de permettre l accessibilité du site même lorsque JavaScript est désactivé. Le langage HTML5 améliore la sémantique du code HTML grâce à l apparition de nouvelles balises donnant plus de sens aux blocs qui composent une page (nav, header, section, article, footer, etc.). Cependant, étant encore nouveau, le HTML5 est déconseillé car il n est pas compatible avec les anciens navigateurs et les lecteurs d écran. Jérémy Puteaux 13

Construction d un page HTML ancienne génération Construction d un page HTML5 et ses nouvelles balises Ces images montre clairement la différence entre les anciennes pages et celle réalisée en HTML5. Dans la construction d une page HTML ancienne génération, il est difficile de distinguer le rôle de chaque div sans regarder son contenu. C est entre autres, l un des changements apportés par le HTML5. Avec ce nouveau langage, chaque balise est définie de façon à rendre la page plus compréhensible pour les lecteurs d écran. Durant la «guerre» des navigateurs, l anarchie fut telle qu il fallut réguler le milieu du web afin de lui donner une autre direction. C est dans ce but qu a été créé le World Wide Web Consortium (W3C). Jérémy Puteaux 14

Le britannique Tim Berners Lee a créé le www (World Wide Web) et a mis également au point le HTML. 1.2. La normalisation du web En 1994, le W3C fut créé par Tim Berners Lee dans le but de fixer des normes pour la conception de sites web, notamment en matière d accessibilité avec la Web Accessibility Initiative (WAI). 1.2.1. Le World Wide Web Consortium Tim Berners Lee à la cérémonie d ouverture des jeux olympiques de Londres 2012. Le W3C est un organisme international qui développe des normes appelées standards afin que tous les internautes puissent communiquer efficacement et se comprendre. Les objectifs du W3C Comme le dit son créateur, «Le pouvoir du web est dans son universalité». Le W3C œuvre pour qu il soit «accessible à tous sans discrimination». Il faut donc que tous les individus puissent l utiliser «quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leur aptitudes physiques ou mentales.» Que l on utilise un ordinateur, une tablette tactile, un synthétiseur vocal, un affichage braille ou un smartphone, chacun devrait pouvoir accéder aux mêmes sources d'information, sans buter sur des exigences matérielles ou logicielles particulières. Depuis sa création en 1994, le W3C œuvre à construire un web qui pourra évoluer aisément, en s imposant 4 principes : la simplicité la modularité la compatibilité l'extensibilité Jérémy Puteaux 15

Les services du W3C Après la validation d un site, on peut lire le texte suivant : «To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page» «Pour montrer à vos lecteurs que vous avez pris soin de créer une page web correctement conçue, vous pouvez afficher cette icône sur chaque page qui est valide.» Le W3C propose plusieurs services en ligne tels que les validateurs ou le «Link Checker». Ils ont pour objectif d aider le développeur à s assurer que son code respecte bien les standards. Après avoir fourni l adresse d un site ou une partie du développement, le validateur parcourt le code à la recherche d erreurs HTML ou CSS. S il y en a, elles sont ensuite listées avec quelques explications pour aider à leur correction. Une fois tous les problèmes résolus, le site web est considéré comme validé selon les normes du W3C mais il n est pas pour autant accessible. Concernant le «Link Checker», son rôle est de vérifier si les liens dans les pages d un site web sont valides et accessibles. Dans le cas contraire, la liste des liens qui ne fonctionnent pas s affiche. Icones qui prouvent que la page est correctement passée au validateur HTML et CSS En 1996, le W3C lance la WAI afin de répondre aux problèmes d accessibilité des sites internet. 1.2.2. La Web Accessibility Initiative La WAI se compose de plus de 500 membres à travers le monde, dont des représentants : des personnes handicapées de l industrie du monde de la recherche de gouvernements La WAI est un groupe de travail constitué d'experts en accessibilité dont le but est de proposer des solutions pour rendre le World Wide Web plus accessible. La mission de la WAI Cet organisme crée des recommandations techniques à destination de tous les acteurs du web pour le rendre plus accessible. Jérémy Puteaux 16

Les recommandations de le WAI Ces recommandations internationales sont présentées sous forme de trois guides : 1. Web Content Accessibility Guidelines (WCAG 2.0) : Guide de référence sur l'accessibilité des contenus Web, 2. Authoring Tools Accessibility Guidelines (ATAG 2.0) : Guide de référence sur l'accessibilité des outils de création de pages Web, 3. User Agent Accessibility Guidelines (UAAG 2.0) : Guide de référence sur l'accessibilité des interfaces Web. 1.2.3. Le référentiel International WCAG Comme vu précédemment, un site web respectant les normes du W3C n est pas pour autant accessible. L inverse est cependant vrai, un site accessible respecte forcément ces normes. Afin d y remédier, le W3C/WAI a mis en place un référentiel devenu aujourd hui un standard international, le WCAG. Cette norme est reconnue officiellement par la Commission Européenne qui en recommande l adoption dans tous les pays membres de la communauté. L administration française s y réfère depuis 1999. La version officielle en cours est la version 2.0, publiée le 11 décembre 2008. Source : http://www.w3.org/translations/wcag20-fr/ Les recommandations sont structurées autour de 4 grands principes et se composent de 12 règles appelées guidelines. Jérémy Puteaux 17

Les 4 principes des WCAG Ces 4 principes, listés ci-dessous, sont divisés en 12 guidelines (voir annexe) puis en 61 critères de succès. Source : http://www.w3.org/translations/wcag20-fr - Principe 1 : perceptible - L'information et les composants de l'interface utilisateur doivent être présentés à l'utilisateur de façon à ce qu'il puisse les percevoir. - Principe 2 : utilisable - Les composants de l'interface utilisateur et de navigation doivent être utilisables. - Principe 3 : compréhensible - Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles. - Principe 4 : robuste - Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance. Chacun des critères de succès possède un niveau de conformité selon sa difficulté d application. Les niveaux de conformité Les WCAG attribuent à chaque critère un niveau de conformité. Il en existe trois : A, AA et AAA. Pour accéder à un niveau, il est nécessaire de remplir tous les critères de succès qui le composent. Jérémy Puteaux 18

Niveau Objectif Comment y arriver? A Atteindre un niveau d'accessibilité minimal La page web satisfait à tous les critères de succès de niveau A ou une version de remplacement conforme est fournie AA Perfectionner le niveau d accessibilité La page web remplit tous les critères de succès de niveau A et AA ou une version de remplacement conforme au niveau AA est fournie AAA Atteindre un niveau d'accessibilité supérieur La page web remplit tous les critères de succès de niveau A, AA et AAA ou une version de remplacement conforme au niveau AAA est fournie Le développeur a la possibilité d afficher un de ces logos correspondant au niveau d accessibilité de son site. Les WCAG 2.0 recommande de se fixer comme objectif le niveau de conformité AA. 1.2.4. Les référentiels français Les principaux référentiels français ont été créés à partir des WCAG. Ils proposent également des méthodes d application de ces règles. Le Référentiel Général d Accessibilité pour les Administrations (RGAA) Le RGAA a été mis en œuvre par la Direction Général de la Modernisation de l Etat (DGME). Le RGAA s adresse aux autorités administratives (ministères, établissements publics, organismes de sécurité sociale, collectivités locales, etc.) et les guide dans leur démarche pour rendre les sites accessibles. Jérémy Puteaux 19

Les objectifs du RGAA Le RGAA aide les autorités administratives à mettre en œuvre les bonnes pratiques assurant l accessibilité des sites internet. Il leur permet également de mesurer le niveau de conformité de leurs contenus web selon les WCAG. Le RGAA est un document normatif, tout comme le référentiel Accessiweb. Le référentiel Accessiweb Le référentiel AccessiWeb a été élaboré par l association BrailleNet (qui a notamment été en charge de la traduction française officielle du WCAG). AccessiWeb est une méthode d application et de vérification de conformité aux recommandations internationales d accessibilité WCAG 2. Le référentiel AccessiWeb 2.1 comporte 133 critères organisés en 13 thématiques. Il couvre les 3 niveaux de conformité définis par les WCAG 2.0 : - A ou AccessiWeb Bronze (niveau le plus bas), 82 critères - AA ou AccessiWeb Argent, 20 critères Les labélisations bronze et argent coûtent 2400 euros pour 24 mois - AAA ou AccessiWeb Or (niveau le plus élevé), 31 critères Ces 133 critères se décomposent en 305 tests unitaires. Le référentiel AccessiWeb 2.1 peut ainsi être utilisé pour une certification tierce partie de la conformité d un site Web aux exigences du RGAA 2.2. La réciproque n est toutefois pas vraie. La labélisation or peut être effectuée pour un prix de 3600 euros pour 24 mois 1.2.5. Accessible Rich Internet Application Aujourd hui, les sites internet utilisent la technologie JavaScript pour réaliser de véritables applications en ligne - que HTML seul n aurait pas pu effectuer - notamment pour actualiser une partie Jérémy Puteaux 20

de la page sans avoir à la recharger entièrement, en fonction des actions de l internaute. Cette technique est appelée «application riche». Cette méthode pose de gros problèmes aux technologies d assistance qui ne détectent pas ces rechargements. C est pour apporter une solution que le W3C propose des spécifications techniques nommées «Accessible Rich Internet Application». ARIA est une couche sémantique supplémentaire que le développeur superpose au code HTML. Celle-ci permet aux «parties riches» du code de se présenter comme des applications plutôt que comme de simples documents statiques, par l ajout de rôles, de propriétés ou d états, de manière à ce qu elles soient reconnaissables et utilisables par les technologies d assistance. ARIA permet également d informer les handinautes du rechargement d une partie de la page web. 1.2.6. Les outils pour tester l accessibilité En plus des validateurs de code HTML et CSS officiels du W3C (voir partie 1.2.1), on distingue 3 types d outils qui permettent de tester l accessibilité d un site web : - Les validateurs : à la manière de ceux du W3C, le validateur d accessibilité va parcourir le développement d une page à la recherche de lignes de code ne respectant pas le standard sélectionné en amont. Il existe notamment le «The HiSoftware Cynthia Says» (http://www.contentquality.com) en anglais, qui permet de vérifier le code selon les niveaux de conformité des WCAG (A, AA ou AAA), Ocawa (source : http://www.ocawa.com/fr/accueil.htm) ou encore Wave (source : http://wave.webaim.org). Jérémy Puteaux 21

- Les barres d outils : ou toolbars en anglais, sont des modules à installer sur les navigateurs récents comme Firefox. Parmi les plus utilisés, on retrouve «Web Developper» toolbar (source : https://addons.mozilla.org/fr/firefox/addon/webdeveloper/) ou encore «Accessibility Evaluation» toolbar (source : https://addons.mozilla.org/fr/firefox/addon/accessibility- La Web Developper Toolbar evaluation-toolb/). Elles permettent de manipuler rapidement et facilement les composants d une page web comme - entre autres - les CSS, les images ou les scripts, dans le but de simuler l utilisation de technologies d assistance. - Les vérificateurs de couleurs : les règles des WCAG mettent notamment en avant la cohérence des couleurs et des contrastes. Des modules à installer sur les navigateurs permettent d effectuer très rapidement ces tests. A titre d exemple, «WCAG Contrast Checker» (source : https://addons.mozilla.org/en-us/firefox/addon/wcagcontrast-checker/) vérifie la page avec les ratios de contrastes préconisés dans les WCAG. Sur ce site, les critères de succès pour le contraste des couleurs est rempli pour les niveaux AA et AAA. Ces outils n ont aucune valeur officielle et ne donnent droit à aucun certificat. Il est possible de réaliser un contrôle d accessibilité via un organisme certifié comme AccessiWeb ou encore Ipedis. Jérémy Puteaux 22

1.3. L accessibilité numérique et la loi 1.3.1. Les législations en Europe Le 1er octobre 2010, le Royaume-Uni a voté la loi Equality Act afin de lutter contre la discrimination sous toutes ses formes. En 2000, un internaute aveugle a perçu 20 000$ de dommages et intérêts de la part de l organisation des JO de Sydney pour site non accessible. L'Allemagne a quant à elle intégré la question de l'accessibilité numérique dans la loi du 24 juillet 2002. En Italie, la loi «Stanca» a été adoptée en janvier 2004. D une manière générale, la France a du retard sur la législation en matière d accessibilité numérique en comparaison avec ses voisins européens. 1.3.2. La législation française Le développement des services publics numériques a entraîné la création d un texte de loi «pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées» le 11 février 2005, article 47. 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. [...]» 1 Cette loi contraint les administrations à utiliser le RGAA pour développer leurs services en ligne. 1 http://www.legifrance.gouv.fr/affichtexte.do?cidtexte=jorftext000 000809647&dateTexte=&categorieLien=id#JORFARTI000001290363 Jérémy Puteaux 23

Extrait de la lettre ouverte du collectif «Article 47» à l attention des ministres : «Le collectif «Article 47» demande donc aux pouvoirs publics de prendre ses responsabilités. Il faut engager les moyens nécessaires pour faire que l accessibilité numérique des services publics devienne une réalité.» 2 L arrêté du 21 octobre 2009 laisse environ 3 ans aux services administratifs pour rendre leurs sites accessibles. 1 En janvier 2011, le collectif «Article 47» - constitué des plus grands acteurs en France de l accessibilité numérique - a rédigé une lettre ouverte à destination de plusieurs ministres afin de faire part de leur inquiétude quant au respect de cette échéance. Quelques mois après le délai imparti, trop peu de sites respectent effectivement cette loi. Cela se confirme d autant plus si l on considère également les dizaines de milliers de sites des collectivités locales. 1 http://legifrance.gouv.fr/affichtexte.do?cidtexte=jorftext0000212 08630) 2 http://www.article47.fr Jérémy Puteaux 24

2. Le handicap au numérique Pour accéder à internet, une personne handicapée utilise un matériel informatique classique avec une aide technique (appelée matériel d assistance) lui permettant de pallier à son handicap. 2.1. Types de handicaps et technologie d assistance Il existe quatre catégories de handicaps pouvant entraîner des difficultés à naviguer sur un site internet : troubles visuels, auditifs, cognitifs et moteur. Les problèmes rencontrés lors de la navigation sont différents selon le type de handicap, aussi les «technologies d assistance» pouvant y remédier ne seront pas les mêmes. 2.1.1. Troubles visuels Dans les troubles de la vue, on retrouve la malvoyance (myopie, hypermétropie,...), le daltonisme et la cécité totale. Selon le type et le degré du trouble, le malvoyant peut avoir une vision diminuée ou déformée et rencontrer des difficultés de lecture dues à la taille souvent petite de la police utilisée ou au contraste entre les couleurs du premier et de l'arrière-plan. Il est également difficile pour certaines personnes de lire un simple texte noir sur fond blanc. Jérémy Puteaux 25

Ronan a besoin d'un poste adapté à son handicap Ronan est malvoyant. Pour travailler, il dispose d'un ordinateur avec affichage grossi et d un clavier à touches larges et incurvées pour faciliter la lecture et la position de ses doigts. ZoomText est le plus utilisé des logiciels de zoom. Il permet notamment de changer les polices ou leur taille, de modifier les contrastes, etc. Dans le cas d une malvoyance légère, il est possible d'utiliser des loupes d'écran ou des logiciels permettant de zoomer, bien que cela rende la navigation fastidieuse. Des navigateurs textuels (comme Lynx) peuvent également être utilisés pour traduire en texte pur toutes les informations figurant sur une page. Cet outil ne prend notamment pas en compte le choix de couleurs parfois malheureux du développeur. google.fr avec un navigateur graphique google.fr avec un navigateur textuel Jérémy Puteaux 26

Ce problème ne concerne pas uniquement les malvoyants, les personnes atteintes de daltonisme ne parviennent pas à différencier certaines couleurs, ce qui leur pose des difficultés dans la consultation de pages web. C est le cas lorsque la couleur est le seul élément indiquant l état d une action. Par exemple, on peut trouver sur certains sites un bouton de validation qui sera grisé dans un premier Logos de Google en version «normal» et vu par un daltonien. 1 temps, puis changera de couleur dès qu il sera possible de cliquer dessus. C est alors le seul repère pour l internaute, pourtant cet indice passera inaperçu aux yeux d un daltonien. Les personnes non-voyantes utilisent de manière intensive les raccourcis clavier pour naviguer plus facilement. Ce qui s avère le plus difficile dans leur cas, est d appréhender une page web dans son intégralité. En effet, même en utilisant un lecteur d écran (comme ceux décrits ci-dessous), la lecture devient fastidieuse si le site en question contient trop d informations.. C est le cas d une grande majorité de sites commerciaux, ce qui a tendance à décourager les personnes non-voyantes dès la page d accueil. Les bannières publicitaires ne font que perturber davantage la lecture du site web en ajoutant du contenu inutile. En outre, le logiciel ne pourra être d aucune aide pour la lecture d images ou vidéos si le site internet ne respecte pas les normes d accessibilité. Comme abordé ci-dessus, les non-voyants peuvent avoir recours à des lecteurs d écran sonores ou tactiles. 1 http://www.fredcavazza.net/2005/03/06/adopter-un-daltonien/ Jérémy Puteaux 27

Les premiers lisent le contenu de la page grâce à un synthétiseur vocal, les seconds permettent de reproduire le texte de l écran sur un terminal braille. Ce terminal se compose de petits picots amovibles qui se lèvent et s abaissent pour traduire en caractères braille tout ce qui s affiche à l écran. Exemples de lecteurs d écran tactiles (ou plages braille) JAWS est le logiciel de synthèse vocale le plus couramment utilisé Les non-voyants ont aussi la possibilité d utiliser des logiciels de reconnaissance vocale leur permettant de donner des instructions à leur ordinateur, sans se servir de la souris ou du clavier. Si des outils adaptés existent, leur prix est en revanche très élevé. Il faut compter environ 5000 euros pour un terminal braille et 1500 euros en moyenne pour une synthèse vocale. 2.1.2. Troubles moteurs Il existe plusieurs types de handicaps moteurs (amputation, paraplégie, tétraplégie,...). Dans de nombreux cas, l utilisation de la souris, du clavier et des barres de défilement devient difficile voire impossible. Jérémy Puteaux 28

C est le cas de cet handinaute tétraplégique. Il utilise un clavier spécifique, un repose-bras thermoformé et un dispositif de pointage magnétique. En général, les personnes atteintes de troubles moteurs utilisent des navigateurs classiques et se servent de la touche tabulation pour aller d un lien à l autre sur la page. De plus, il leur est possible de remplacer la souris par une manette de jeu (joystick) et son logiciel, ou une boule de pointage (trackball) que l on peut utiliser avec le pouce sans avoir à se servir nécessairement de la main complète. 1 1 http://rnt.over-blog.com/ - Réseau Nouvelles Technologie Association des Paralysés de France Jérémy Puteaux 29

Il est parfois nécessaire d utiliser un clavier adapté au handicap. D autres outils permettent de simplifier l utilisation du clavier comme les logiciels de saisie prédictive ou encore des filtres qui évitent de sélectionner par erreur plusieurs touches en même temps. Il existe également des dispositifs spéciaux pouvant être commandés par le hochement de tête, le mouvement des yeux ou encore la respiration. 2.1.3. Troubles auditifs La surdité (partielle ou totale) est considérée comme le trouble le moins gênant pour naviguer sur internet puisque le son n y est pas omniprésent. Il n existe pas d aide technique concrète pour ce type de handicap, toutefois il est possible d utiliser des textes alternatifs aux contenus sonores d un site internet. Dans le cas où un handicap visuel vient s ajouter au problème auditif, le terminal braille s avère parfois être la seule solution. Par ailleurs, le handicap auditif est très souvent accompagné de problèmes de compréhension de langage et d après le rapport de Marie-Thérèse L Huillier, chargée de mission Culturepédagogie, «le pourcentage de sourds illettrés est de 60 à 80 % sur 4 millions de personnes sourdes environ». 1 Dans ce cas, le texte alternatif ne suffit plus et une traduction en langage des signes est nécessaire. 1 http://www.lituraterre.org/ Jérémy Puteaux 30

Le site Websourd 1 en est le parfait exemple puisqu il propose des vidéos présentant des interprètes en langue des signes français. Capture d écran du site Websourd.org 2.1.4. Troubles cognitifs Ces troubles regroupent le retard mental, l'épilepsie, la dyslexie, l'analphabétisme ou encore la trisomie 21. Selon l importance de la déficience, la navigation sur internet peut s avérer difficile voire impossible. Même le plus basique des sites web peut demander un gros effort de concentration à un internaute atteint de trouble cognitif. Par exemple, une personne lisant lentement aura des difficultés avec un texte défilant trop rapidement. 1 http://www.websourd.org Jérémy Puteaux 31

Le site de montréal (Accès Simple) propose une version avec «ortograf altêrnativ» destinée aux personnes ayant des limitations intellectuelles importantes. 1 Capture d écran du site de Montréal en version «ortograf altêrnativ» Les épileptiques, quant à eux, s exposent à un risque de crise - plus ou moins sérieuse - si le site visité affiche un type de clignotement pouvant lui être nocif. 1 http://ville.montreal.qc.ca Jérémy Puteaux 32

Les personnes souffrant de troubles plus légers ne parviennent pas toujours à comprendre la page d accueil d un site internet si celle-ci est un peu confuse. Une page web proposant un menu de navigation simple accompagné de pictogrammes répondra le plus souvent à ce type de problème. Le logiciel SDVocal permet entre autres d utiliser un clavier virtuel pour écrire des messages. 1 Il est possible pour ces personnes d utiliser du matériel d assistance initialement destiné aux malvoyants tels que des lecteurs d écran. Certains outils conçus pour les personnes handicapées moteurs peuvent également leur venir en aide, comme des logiciels de saisie prédictive ou encore des filtres de clavier. En ce qui concerne les personnes atteintes de troubles cognitifs graves, un accompagnement humain est souvent indispensable et ce malgré les moyens techniques mis en œuvre. 2.2. L accessibilité du web et les nouveaux supports? Depuis quelques années, internet est également disponible via des smartphones, tablettes, etc. L accessibilité se doit donc de s adapter à ces nouveaux supports. Reportage BFMTV montrant une personne qui ne peut pas utiliser les nouveaux supports à défaut de sites web accessibles. Un reportage effectué par BFMTV 2 montre que les personnes souffrant de déficiences sont déjà prêtes à utiliser ces nouvelles technologies. Comme on peut le voir dans le reportage effectué par BFMTV, les nouveaux supports sont déjà prêts à être utilisé par des personnes souffrant de déficiences. Malheureusement pour elles, elles se retrouvent face au même problème que sur leur ordinateur : les sites ne sont pas accessible et ne sont donc pas utilisable correctement. 1 http://www.dailymotion.com/video/xo00ia_sdvocal-claviervirtuel4_lifestyle - Vidéo de démonstration 2 http://www.bfmtv.com/journee-du-handicap-le-web-accessible-auxactu19935.html Jérémy Puteaux 33

Pourtant, un site accessible sera plus robuste le rendant également utilisable de manière optimale sur les smartphones. Les Smartphones ont commencé depuis quelques années déjà à rendre accessible leurs matériels. C est le cas de Apple qui depuis la 3eme génération de leurs iphone, fourni une application qui sert de lecteur d écran. Il suffit à l utilisateur de poser son doigt sur l écran et le lecteur lis ce qui se trouve dessous. Il est également possible de relier le téléphone à un d'afficheurs braille sans fil par Bluetooth. Et même plus... pour handicap moteur ou auditif aussi. Pour exemple, depuis les générations de l'ipad, l'iphone 4, l'iphone 3GS et l'ipod touch (3 e génération), les produits sont fourni avec des applications facilitant l accessibilité du produit. 1 1 http://www.apple.com/fr/accessibility/ Jérémy Puteaux 34

2.3. Tests d accessibilité L aide apportée par les matériels d assistance reste dépendante du site web visité et de la façon dont celui-ci a été réalisé. C est pour cette raison que la mise en œuvre de pratiques adaptées est primordiale à leur bonne utilisation. Pour vérifier la conformité de leur code, 3 sites vont être soumis à 10 tests d accessibilité. Tous les outils utilisés dans cette analyse sont présentés dans la partie 1.2.6. 2.3.1. Les critères d analyse Ces tests permettent d avoir une première vision sur le niveau d accessibilité d un site internet afin de se préparer à un audit plus approfondi, en vue d obtenir une labellisation. Critère 1 : Image et texte alternatif Les lecteurs d écran ne pouvant pas lire les images, ils utilisent le contenu de l attribut alt pour la décrire. Chacune des images possède-t-elle un équivalent textuel? Référence : règle 1.1 (critère d accessibilité A) des WCAG 2.0 Objectif : s assurer que l information contenue dans une photo est remplacée par un texte alternatif. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Images», «Cacher les images d arrière-plan» puis «Afficher les attributs alt». Jérémy Puteaux 35

3. Vérifier la présence et la pertinence de l attribut alt pour les images qui apportent une information, autrement l attribut peut rester vide. 4. Si c est le cas, le critère est validé, sinon c est un échec. Critère 2 : Média et version de remplacement Les médias temporels (vidéos, contenu Flash...) proposent-ils des versions de remplacement? Référence : règle 1.2 (critère d accessibilité A) des WCAG 2.0 Objectif : permettre aux lecteurs d écran d avoir un contenu à lire afin de ne pas perdre complètement l information du média. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Vérifier que le contenu du média temporel est expliqué ou sous-titré textuellement à côté de celui-ci. 3. Si c est le cas, le critère est validé, sinon c est un échec. Critère 3 : Contraste suffisant Le contraste entre la couleur du texte courant et celle de son arrière-plan est-il suffisant? Référence : règle 1.4.3 (critère d accessibilité AA) des WCAG 2.0 Objectif : s assurer de la bonne lisibilité du texte pour les personnes ayant des troubles de la vision. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Lancer l extension WCAG Contrast checker et s assurer que les niveaux de contraste entre le texte et son arrièreplan est au moins de 4.5 :1. 3. Si c est le cas, le critère est validé, sinon c est un échec. Jérémy Puteaux 36

Critère 4 : Pertinence du titre de la page Le titre de la page est la première chose lue par le lecteur d écran. La page analysée présente-t-elle un titre qui décrit le sujet ou le but de celle-ci? Référence : règle 2.4.2 (critère d accessibilité A) des WCAG 2.0 Objectif : s assurer de la pertinence du titre de la page en fonction de son contenu. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Voir Source», puis «Voir Source». 3. Vérifier que la balise <title> est bien présente et que son contenu est suffisamment explicite. 4. Si c est le cas, le critère est validé, sinon c est un échec. Critère 5 : Présence d un doctype Le doctype est un élément HTML situé en premier dans le code qui définit la version et le langage utilisé. S il n est pas présent, la page ne sera pas comprise comme elle le devrait. Le page HTML possède-t-elle un doctype? Référence : règle 4.1.1 (critère d accessibilité A) des WCAG 2.0 Objectif : s assurer que les matériels d assistance comprennent le langage de la page. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Voir Source», puis «Voir Source». 3. Vérifier que la première ligne du code commence par «<!DOCTYPE». 4. Si c est le cas, le critère est validé, sinon c est un échec. Jérémy Puteaux 37

Critère 6 : Titrage du contenu La page utilise-t-elle des balises HTML de titrage (h1 à h6) avec une bonne hiérarchisation? Référence : règle 1.3.1 2.0 (critère d accessibilité A) des WCAG Objectif : structurer la page et en faciliter la lecture. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer : menu «Information», puis «Plan du document». 3. Vérifier la présence d au moins un titre de type h1 et la bonne hiérarchisation des titres suivants. 4. Si c est le cas, le critère est validé, sinon c est un échec. Critère 7 : Langue utilisée dans la page Lorsque la langue n est pas précisée, la synthèse vocale prend l accent anglais par défaut pour lire la page. La langue principale du document est-elle spécifiée dans le code HTML? Référence : règle 3.1.1 (critère d accessibilité A) des WCAG 2.0 Objectif : faciliter la compréhension de la page lue par une synthèse vocale. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Voir Source», puis «Voir Source». 3. Vérifier la présence de l attribut lang ou xml:lang sur l élément <html> de la page et s assurer qu il est rempli. 4. Si c est le cas, le critère est validé, sinon c est un échec. Jérémy Puteaux 38

Critère 8 : Désactiver JavaScript L accès au contenu du site est-il possible si JavaScript est désactivé? Référence : règle 4.1.2 2.0 (critère d accessibilité A) des WCAG Objectif : simuler l utilisation d un lecteur d écran et s assurer que la page est bien comprise par celui-ci malgré la désactivation de JavaScript. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Voir Source», puis «Voir Source». 3. Analyser du code source de la page ; vérifier la présence d une alternative pour les contenus mis à disposition par JavaScript (informations, liens, menus, etc.). 4. Si c est le cas, le critère est validé, sinon c est un échec. Critère 9 : Navigation au clavier possible Le site est-il complètement accessible uniquement au clavier? Plusieurs handicaps ne permettant pas l utilisation de la souris, ils nécessitent une navigation au clavier. Il faut donc s assurer que la navigation peut se faire correctement. Référence : règle 2.1 (critère d accessibilité A) des WCAG 2.0 Objectif : s assurer que la navigation au clavier est possible sans avoir à utiliser la souris. Modalités d évaluation : 1. Ouvrir la page dans le navigateur Firefox. 2. S assurer qu il est possible d aller sur toutes les parties du site grâce à la seule utilisation du clavier. 3. Si c est le cas, le critère est validé, sinon c est un échec. Jérémy Puteaux 39

Critère 10 : Liens hypertexte explicites Il faut utiliser des liens pertinents : Le texte des liens est-il suffisamment explicite sur la page ciblée? <a href= «a.php»>lire la suite</a> n apporte pas assez d informations sur le lien. Référence : règle 2.4.4 2.0 (critère d accessibilité A) des WCAG <a href= «a.php»>lire la suite de l article sur Paris plage</a> Si on retire ce lien de son contexte, il a toujours un sens. Objectif : s assurer de la pertinence du lien sorti de son contexte. Modalités d évaluation : 1. Ouvrir de la page dans le navigateur Firefox. 2. Utiliser l extension Web Developer Toolbar : menu «Images» puis «Remplacer les images par l attribut alt». 3. Vérifier que chaque lien est suffisamment explicite pour savoir de quoi traite la page ciblée (éviter «En savoir plus» ou encore «Lire la suite» qui n apportent aucune information). 4. Si c est le cas, le critère est validé, sinon c est un échec. Jérémy Puteaux 40