Si le concept d’accessibilité semble avant tout lié au handicap physique, nous verrons que, sur

le Web, son acception est élargie au plus grand nombre de personnes. Connaître les handicaps

et les conditions de consultation par les personnes déficientes (déformation de la vision,

aides techniques, etc.), la législation en matière d’accessibilité et les recommandations pour

l’optimisation d’un site est essentiel pour amé­liorer la qualité d’un site web, en produisant des

contenus lisibles par tous.

L’accessibilité est un thème très complexe qui nécessite une documentation conséquente.

L’objectif de ce document est de donner les premières clés pour rendre les sites web plus

accessibles en optimisant la lisibilité.

L’accessibilité, qu’est ce que c’est ?

Le concept d’accessibilité se développe depuis plusieurs années dans la vie quotidienne : transports en commun, lieux publics (les bâtiments, les supports d’information et de signalétique sont particulièrement concernés), habitations… Il existe désormais des normes d’accessibilité pour tous ces domaines, liées avant tout à la prise en compte du han­dicap physique, mais pas uniquement.

En France, la loi du 11 février 2005 sur l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées, détermine le cadre d’application de l’accessibilité, quels que soient les domaines. L’objectif de cette loi est de permettre aux personnes handicapées d’accéder aux mêmes services, informations ou lieux que les personnes ne souffrant pas de handicap.

 

L’accessibilité et le Web : au-delà du handicap

« 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 et leurs aptitudes physiques ou mentales. » Telle est la définition de l’accessibilité web donnée par Tim Berners-Lee (co-inventeur du World Wide Web et président du W3C). Il est intéressant de noter que cette conception ne traite pas uniquement du handicap mais, bien au-delà, s’étend à une vision universelle de l’accessibilité.

Un public le plus large possible doit pouvoir accéder à l’information sans avoir recours à des aides techniques spécifiques et, dans les cas où elle est nécessaire, cette aide doit pouvoir traiter les contenus de la manière la plus efficace possible, de façon à être compréhensible par l’utilisateur.

 

Source :L’Afnor (Association française de normalisation) a une double mission de normalisation et de certifi­cation. http://www.afnor.fr/profils/centre-d-interet/accessibilite Loi du 11 février 2005 sur l’accessibilité On peut retrouver l’intégralité du texte sur le site Legifrance.gouv.fr : http://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXTOOOQ00809647&dateTexte=

 

Les standards d’accessibilité : WCAG et AccessiWeb

Le W3C édite des standards pour l’accessibilité du Web : ce sont les recommandations WCAG (Web Content Accessibility Guidemes).

 

Les recommandations du W3C : WCAG 1.0

La première génération des WCAG (1.0) concerne principalement les contenus HTML. Voici la liste des 14 directives principales, déterminant chacune un ou plusieurs points de contrôles (en tout, 65 points de contrôle consultables sur le site du W3C).

« Fournir des alternatives équivalentes aux contenus visuels et auditifs (images statiques ou animées, contenus audio et vidéo).

Ne pas s’en remettre exclusivement aux couleurs.

» Utiliser le balisage HTML et les feuilles de style CSS de façon appropriée.

• Clarifier l’utilisation du langage naturel.
• Créer des tableaux HTML qui se transforment de façon élégante.

» S’assurer que les pages qui contiennent de nouvelles technologies (objets programmables, styles CSS) se transforment de façon élégante.

⁸ Assurer à l’utilisateur le contrôle des changements du contenu lorsque ce dernier varie dans le temps (clignotements, mouvements, rafraîchissement du contenu, redirections).

• Assurer un accès direct aux interfaces utilisateur intégrées (objets
  Flash, applets Java).
• Concevoir de manière indépendante du périphérique de navigation
  (souris, clavier, etc.).
• Utiliser des solutions intermédiaires en attendant que les agents utilisateurs aient un meilleur support de l’accessibilité.
• Utiliser les technologies et directives du W3C.
• Fournir des informations de contexte et d’orientation.
• Fournir des mécanismes de navigation clairs.
• S’assurer que les pages sont claires et simples.

 

Les recommandations WCAG 2.0

Les WCAG 2.0, seconde génération de recommandations, font abstrac­tion de la technologie spécifiquement utilisée. Ces recommandations sont rassemblées selon quatre principes fondamentaux, liés à la perception, l’utilisation, la compréhension et la compatibilité des contenus web.

 

Des contenus perceptibles

« Proposer des équivalents textuels à tout contenu non textuel, qui

pourra alors être présenté sous d’autres formes selon les besoins de

l’utilisateur : grands caractères, braille, synthèse vocale, symboles ou

langage simplifié. « Proposer des versions de remplacement aux médias temporels (vidéo

et audio). » Créer un contenu qui puisse être présenté de différentes manières

sans perte d’information, ni de structure (par exemple, avec une mise

en page simplifiée). « Faciliter la perception visuelle et auditive du contenu par l’utilisateur,

notamment en séparant le premier plan de l’arrière-plan.

 Des contenus utilisables

Rendre toutes les fonctionnalités accessibles au clavier.

» Laisser à l’utilisateur suffisamment de temps pour lire et utiliser le

contenu. » Ne pas concevoir de contenu susceptible de provoquer des crises (épi-

lepsie, par exemple).

Fournir à l’utilisateur des éléments d’orientation pour naviguer,
trouver le contenu et se situer dans le site.

 Des contenus compréhensibles

« Rendre le contenu textuel lisible et compréhensible.

• Faire en sorte que les pages apparaissent et fonctionnent de manière
  prévisible.
• Aider l’utilisateur à éviter et à corriger les erreurs de saisie.

 Des contenus robustes

» Optimiser la compatibilité avec les  agents utilisateurs actuels et futurs, y compris avec les technologies d’assistance.

 Les critères et labels AccessiWeb

Le niveau d’accessibilité d’un site web dépendra des critères qui sont res­pectés. En France, l’association BrailleNet et l’équipe de travail Accessi­Web proposent une liste de 95 critères et trois labels correspondant à trois niveaux d’accessibilité d’un site web.

 

Sources :Normes WCAG 2.0 Vous trouverez une traduction de ces recomman­dations sur le site de l’association BrailleNet (tra­duction agréée publiée le 24 avril 2009) http://www.braillenet.org/accessibilite/wcag207wcag20_fr/fr WCAG20 24avr09.htm   Critères AccessiWeb Retrouvez la liste des critères pour obtenir le label AccessiWeb : http://www.accessiweb.org/fr/Label Accessibilite/criteres_accessiweb/

 

La législation française

Du point de vue législatif français, la loi du 11 février 2005 stipule dans l’article 47 : « Les services de communication publique en ligne des ser­vices 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 recom­mandations internationales pour l’accessibilité de l’Internet doivent être appliquées pour les services de communication publique en 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éve­loppement 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 non-respect de cette mise en accessibilité. Le décret énonce en outre les modalités de formation des personnels intervenant sur les ser­vices de communication publique en ligne. »

Ainsi, selon la loi, les sites publics français sont concernés par ces mesures. Les sites privés ne le sont pas encore, mais cela devrait sans doute arriver, à l’instar de ce qu’on observe chez nos voisins anglais. Il est donc nécessaire pour tous les acteurs de la construction d’un site web (directeurs artistiques, rédacteurs, webdesigners, développeurs, etc.) de comprendre les tenants et les aboutissants du concept d’accessibilité et la valeur ajoutée que cela peut apporter au site web.

 

À qui profite l’accessibilité sur le Web ?

Les personnes concernées par les mesures d’accessibilité sont tout d’abord les personnes en situation de handicap (visuel, moteur, auditif, cognitif), même si la notion d’accessibilité peut être étendue à tous les utilisateurs lorsqu’on suit le principe d’universalité défendu par Tim Berneers-Lee.

Les mesures à appliquer prennent tout d’abord en compte les différentes formes de handicap. En effet, en favorisant l’accès aux personnes handicapées, on améliore l’accès pour tous.

 

Informations :Dans le monde, on compte plus de 500 millions de personnes handicapées par des déficiences men­tales, physiques ou sensorielles (source : ONU). En Europe, 10 à 15 % de la population est touchée par un handicap (80 à 120 millions de citoyens européens, selon l’Assemblée parlementaire du Conseil de l’Europe). Les résultats d’une enquête de l’INSEE révèlent que plus d’un français sur quatre souffre d’une incapa­cité, d’une limitation d’activité ou d’un handicap.

 

Les déficients visuels

Sur le Web, ce sont les personnes atteintes d’un handicap visuel qui sont les plus défavorisées lorsque l’information n’est pas accessible : un corps de texte trop petit, un contraste entre le texte et le fond trop faible ou trop fort, et l’accès à l’information n’est plus optimal.

 

Des troubles de la vision variés

Les troubles de la vision étant très diversifiés, il n’est pas possible de trouver une solution miracle qui puisse permettre un accès universel du Web à tous les déficients visuels. On peut malgré tout améliorer grande­ment l’accès à l’information pour un grand nombre de ces personnes en soignant la présentation et la lisibilité d’un site.

L’aparté et les figures qui suivent présentent les principales pathologies de l’œil et les troubles de la vision qui en résultent.

Les pathologies et répercussions sur la vision

Comprendre le fonctionnement des déficiences visuelles peut permettre au   concepteur   d’envisager   l’accessibilité   de   son   site   de   manière concrète. Voici les troubles les plus fréquents :

–          Troubles de perception de la couleur (daltonisme) : le plus courant est la confusion du vert et du rouge. Les autres formes de daltonisme sont nettement plus rares, comme la confusion du bleu et du jaune, la plus rare de toutes étant la déficience totale de la perception des cou­leurs (achromatopsie), où le sujet ne perçoit que des nuances de gris.

–          La DMLA (dégénérescence maculaire liée à l’âge) atteint la partie centrale de la rétine, réduisant ainsi l’acuité visuelle. La gêne ressentie prend la forme d’une tache que le regard ne peut contourner. Cette maladie ne rend pas aveugle, mais perturbe la vision du détail.

–          La rétinopathie diabétique : le champ visuel est réduit, perturbé de taches. Survenant dans le cadre d’un diabète, c’est la première cause de cécité avant 50 ans.

–          La rétinite pigmentaire : cette maladie génétique et évolutive atteint la rétine et, débutant par une perte de la vision nocturne, conduit à la cécité par une diminution inexorable du champ visuel. La gêne à la lumière est très fortement ressentie, et le champ visuel se réduit jusqu’à devenir tubulaîre.

–          Le glaucome est une hypertension à l’intérieur du globe oculaire qui entraîne une altération progressive du champ visuel. Celui-ci se réduit jusqu’à devenir tubulaire, comme pour la rétinite pigmentaire.

Au-delà de ces maladies, il faut également prendre en compte les troubles plus courants de la vision comme la myopie (mauvaise vision de loin), la presbytie et l’hypermétropie (troubles de la vision de près), ainsi que l’astigmatisme (vision brouillée, déformée, imprécise) qui, dans leur formes les plus avancées, réduisent fortement l’acuité visuelle.

 

Outils :Ce site propose des simulateurs de déficiences visuelles ou auditives dans différentes situations. http://www.inclusivedesigntoolkit.com/betterdesign/downloads/impairmentsims/

Les aides techniques pour les non-voyants et malvoyants

Dans un premier temps, l’accessibilité doit améliorer la navigation dans un site web, ainsi que la lecture des informations pour les personnes atteintes de déficiences légères. Pour les personnes les plus handicapées, il existe des aides techniques.

Pour les malvoyants :

– zoom, loupe ou clavier visuel intégrés au système d’exploitation ou au navigateur ;

– agrandisseurs de contenu. Pour les non-voyants :

– navigateur en mode texte ;

– synthèse vocale ;

– terminal braille.

L’objectif, en améliorant l’accessibilité d’un site, est de faire en sorte que le contenu soit « lisible » par l’aide technique utilisée, afin que l’informa­tion soit retranscrite fidèlement et dans son intégralité au lecteur, comme elle le serait pour un lecteur lambda.

 

Et les autres handicaps ?

Les personnes souffrant d’un handicap visuel ne sont pas les seules à être pénalisées lors de la recherche d’information sur le Web. Certains handi­caps moteurs, auditifs et cognitifs empêchent également une consulta­tion aisée des contenus web, et doivent être pris en compte dans la conception d’un site.

 

Handicaps moteurs

Les handicaps moteurs peuvent entraîner des difficultés à utiliser un cla­vier ou une souris, l’imprécision des mouvements causant des problèmes pour cliquer dans une zone réduite ou utiliser des menus déroulants. Pour les personnes n’ayant plus l’usage de leurs mains, il existe des périphériques qui utilisent les mouvements d’autres parties du corps (tête, pieds).

Un travail sur l’ergonomie du site améliorera l’accessibilité.

Troubles auditifs

Les personnes atteintes de troubles de l’audition n’ont pas trop de diffi­culté à saisir l’information sur le Web. Il faudra cependant veiller à bien prévoir des alternatives textuelles aux contenus sonores.

Handicaps cognitifs

Les handicaps cognitifs sont très divers, incluant des troubles comme la dyslexie ou les problèmes de mémoire et de concentration. L’utilisation d’un langage simple et clair optimisera l’accès à l’information pour ce type de public.

 

Améliorer l’accessibilité

L’amélioration d’un site web peut se faire en optimisant plusieurs paramètres, parmi lesquels la mise en forme du texte et les contrastes de couleurs. Pour les cas de déficiences plus avancées, une meilleure accessibilité passera avant tout par la compatibilité des contenus avec les différentes aides techniques.

 

L’apparence du texte : choix du caractère et composition

Deux paramètres vont améliorer l’accessibilité d’un texte : le choix du caractère et la composition du texte.

Si le caractère choisi n’est pas parfaitement lisible, c’est-à-dire si les lettres ne sont pas identifiables au premier coup d’œil, l’accessibilité de l’information est mise à mal. On évitera donc pour les textes d’utiliser des caractères cursifs ou fantaisistes, qui nuiraient à la lisibilité de l’information : ces caractères ont, d’une part, des dessins de lettres pas forcément adaptés à des petits corps et, d’autre part, leur rendu en pixels n’est pas toujours satisfaisant.

La taille du texte, son interlignage et la largeur de la justification (longueur des lignes) constituent le second paramètre pour améliorer l’accès à l’information. Il faudra veiller à avoir un corps de texte confortable pour tout un chacun, même si les lecteurs peuvent désormais agrandir le corps lorsque le besoin s’en fait sentir. En effet, deux options d’agrandissement sont offertes par le biais du zoom homothétique incorporé aux versions les plus récentes des navigateurs : agrandir tous les éléments de la page ou agrandir le texte seul.

 

Les couleurs

 

Comment perçoit-on les couleurs ?

La rétine transforme la lumière en signaux nerveux. Elle nous permet de voir dans des conditions très variables, en plein soleil comme à la lueur des étoiles, et de distinguer les longueurs d’onde des rayonnements, c’est-à-dire les couleurs des objets. Sa précision est suffisante pour que nous détections un cheveux ou un grain de poussière à quelques mètres. La rétine est une partie du cerveau ; elle en a été séparée au début du développement embryonnaire, mais elle conserve avec lui des connexions. Le faisceau de fibres nerveuses qui relie la rétine au cerveau constitue le nerf optique. Comme de nombreuses structures du système nerveux central, la rétine a la forme d’une plaque. Elle est formée de trois couches de corps cellulaires, séparés par deux couches de fibres ner­veuses. La couche de cellules à l’arrière de la rétine contient les photorécepteurs : les cônes et les bâtonnets.

La rétine humaine est ainsi une mosaïque de quatre types de photo­récepteurs : les bâtonnets et trois types de cônes. Le nombre de cônes et de bâtonnets varie notablement à la surface de la rétine. Dans la partie centrale, qui nous permet de voir avec le plus de précision, nous n’avons que des cônes. Cette région sans bâtonnets forme la fovéa.

Chaque type de photorécepteur (les bâtonnets et les trois types de cônes) contient un pigment particulier ; les divers pigments, qui ont des propriétés chimiques légèrement différentes, absorbent différemment la lumière.

Les bâtonnets assurent la vision crépusculaire, assez peu précise et en noir et blanc. Ils diffèrent des cônes par leur taille (ils sont plus petits), leur structure, leur nombre (qui varie suivant les régions de la rétine) et les connexions qu’ils établissent avec les relais suivants du système visuel.

Les pigments de chacun des trois types de cônes réagissent aux lon­gueurs d’ondes des couleurs, absorbées par les cônes. Ces trois pigments correspondent respectivement aux cônes « bleus », « verts » et « rouges ». Les cônes sensibles au rouge ne répondent pas uniquement aux lon­gueurs d’ondes de la partie rouge du spectre lumineux, ils répondent seu­lement mieux à ces rayonnements. Le phénomène est identique pour les deux autres types de cônes. La couleur bleue va stimuler de façon maxi­male les cônes bleus, mais pas les cônes vert et rouge ; la couleur jaune va stimuler les cônes verts et rouges, mais pas les bleus.

 

Information : Chez les daltoniens, le problème d’absence de per­ception de certaines couleurs est dû au dysfonc­tionnement d’un des trois types de cônes.

 

Lisibilité des contrastes sur le Web

Le contraste est un élément essentiel de l’accessibilité et de la lisibilité. L’objectif est que le texte soit lisible sans effort particulier. Il est néces­saire que le contraste entre le texte et le fond soit suffisant, un contraste trop faible rendant la lecture difficile. Cependant, un contraste trop important (noir sur blanc ou inversement) n’est pas forcément idéal, dans la mesure où cela entraîne un effet de vibration. Un fond blanc, par exemple, peut provoquer un éblouissement chez certaines personnes, en raison de la forte luminosité de l’écran.

Un texte gris foncé sur un fond blanc ou légèrement coloré est en général une bonne solution, dès qu’il est présenté en quantité importante (long paragraphe, par exemple). Cela évite d’avoir un contraste trop fort et s’avère moins fatiguant pour l’œil lors d’une consultation sur écran.

Cette dernière solution n’est cependant pas universelle, un certain nombre de personnes peuvent être gênées par un fond clair trop lumi­neux. Ces personnes, au delà de toutes considérations esthétiques, pré­féreront un contraste inversé avec du texte clair sur un fond sombre.

Comment choisir dès lors un contraste positif ou négatif? Sans doute est-il judicieux de permettre au lecteur de choisir ce qui est le plus confortable pour lui. Certains sites, comme Libération Next, proposent des alternatives de ce genre, avec une interface de base qui peut être modifiée.

Le W3C propose des formules de calcul permettant d’évaluer si un contraste est correct ou non, d’après les composantes RVB de chaque couleur. Pour être correcte, la différence de luminosité doit être supé­rieure à 125 et la différence de tonalité doit être supérieure à 500.

Pour éviter au concepteur du site web d’avoir à calculer ces ratios, il existe des outils très pratiques, dont le Colour Contrast Check de SNOOK.ca, qui font le calcul et indiquent si le couple de couleur est valide ou non. Il suffit d’entrer le code hexadécimal des deux couleurs.

 

Outils: Color Contrast Check http://snook.ca/technical/colour_contrast/colour.html Color Vision Sur ce site web, des palettes de couleur permettent de visualiser les différents troubles de perception de la couleur : > http://www.iamcal.com/toys/colors/

 

Pour vérifier si un site est compréhensible sans les informations colorées, on peut le passer en niveaux de gris, ce qui permet à la fois de tester si les contrastes sont suffisants, et de voir si les informations sont toujours compréhensibles.

Certains outils permettent également de simuler le daltonisme, à l’instar du CBC (Color Blindness ChecK) ou de Vischeck.

À la lueur de ces observations, on se rend aisément compte que le choix de la couleur peut vite devenir une problématique complexe, à laquelle les diffé­rents intervenants de la conception d’un site se devront de réfléchir. L’essen­tiel étant bien entendu de conserver une bonne lisibilité de l’information.

 

Outil : GrayBit Ce site permet de voir le site web que l’on veut tester en niveau de gris en entrant son URL :  http://graybit.com Simulateurs de daltonisme CBC (Colour Blindness Check) : http://en.q42.nl/color-blindness-check Vischeck : http://www.vischeck.com/vischeck/vischeckURL.php

Une solution intéressante consiste à proposer plusieurs ambiances colorées pour la même interface, comme cela est proposé sur le site web Inclusive design toolkit. Un équilibre doit alors être recherché entre esthétique et pratique : le designer peut réfléchir aux différentes solutions colorées à proposer au lecteur en conservant la main sur le choix des couleurs.

 

Permettre la traduction par une aide technique

Améliorer la lisibilité de l’information en prêtant une grande attention à la composition du texte et aux couleurs est déjà un grand pas vers l’acces­sibilité. Cependant, il est encore possible d’aller plus loin en optimisant la construction de la page de façon à permettre aux aides techniques de retransmettre fidèlement les informations.

Le système alternatif doit pouvoir comprendre tous les éléments de la page, les textes, d’une part, et les autres vecteurs de contenus tels que les images, d’autre part.

Dans un premier temps, il est nécessaire de bien séparer le contenu et la forme. En effet, les aides techniques ne sont pas concernées par la pré­sentation, elles retranscrivent uniquement le contenu. Cette séparation du contenu (HTML ou XHTML) et de la forme (feuilles de style CSS) est une des recommandations principales du W3C.

Dans un second temps, le système doit pouvoir comprendre tous les élé­ments non textuels ; pour cela, il faut attribuer aux images un substitut tex­tuel. Toutes les images ne nécessitent pas de substitut : il ne faut traiter que les images dont le sens est essentiel à la compréhension de l’information.

Les liens doivent également être traités avec beaucoup de rigueur : mieux vaut éviter les liens non explicites, du genre « cliquez ici », qui n’ont pas de signification en dehors d’un contexte visuel. Ou alors, on attribuera à ces liens une balise de titre, qui ne gênera pas la navigation d’un lecteur lambda, mais sera retranscrite par une synthèse vocale par exemple.

Le meilleur moyen de se rendre compte des points à améliorer, et de la com­plexité de l’accès à l’information pour une personne qui utilise ce genre d’aide technique, est sans doute de tester soi même le site web avec une synthèse vocale comme Jaws. Les tests utilisateur permettent également de com­prendre comment les personnes handicapées utilisent les aides techniques.

Loin d’être une contrainte, l’accessibilité doit être considérée comme un point fort pour un site. Un site web accessible sera facile et agréable à uti­liser pour tout le monde, pas uniquement pour des personnes touchées par un handicap. On entre alors dans un cercle vertueux : la qualité du site est améliorée, la cible potentielle est élargie, l’utilisateur est satisfait.

 

Information : Attribuer une alternative textuelle n’est pas seulement utile à la lecture par les aides tech­niques pour les non-voyants. Elle servira tout autant à informer l’internaute rencontrant un problème technique lui empêchant de visualiser l’image dans son navigateur. De même, la présence d’un texte dans la balise d’image lui permettra une meilleure indexation par les moteurs de recherche.

 

Outils : L’outil de synthèse vocale Jaws (Job Access With Speech) est commercialisé sur le site de Freedom scientific : http://www.freedomscientific.com/jaws-hq.asp

 

Références et Ressources

Cet ouvrage détaille tout ce qu’il est nécessaire de comprendre et de savoir pour maîtriser le sujet complexe, mais non moins passionnant, de l’accessibilité :

– Luc Van Lancker, Accessibilité des sites web. Mise en œuvre des directives WCAG 1.0, Éditions ENI, 2008

Ressources en ligne :

Le guide AccessiWeb :

http://www,accessiweb.org/fr/guide_accessiweb/index,html

Évaluer l’accessibilité d’un site web (série de trois articles de Roger Johansson) :

http://www.pompage.net/pompe/evaluer-accessibilite-site-1/