wMémo Accessibilité

Introduction : l'accessibilité, concilier l'éthique à l'efficacité

Se pencher sur les problématiques d’accessibilité numérique dépasse la simple démarche citoyenne. Rendre son site accessible signifie automatiquement le rendre plus utilisable, plus simple et donc plus efficace. Si l’ergonomie et l’accessibilité sont deux domaines bien distincts, ils se rejoignent néanmoins par certains aspects et notamment par la prise en compte de l’utilisateur. C’est lui seul en effet qui jugera de la qualité de votre site et de sa facilité de prise en main.

Tout utilisateur, quel qu’il soit, doit pouvoir avoir accès à tout type d’information numérique en ligne. Telle est la définition de l’accessibilité pour le web. De la même manière que les architectes doivent se mettre en conformité avec les normes d’accessibilité, tout site doit assurer l’accessibilité à ses utilisateurs : la liberté de circuler de façon autonome à l’intérieur du site, de se repérer, de comprendre et de communiquer.

L’accessibilité et la loi Si la législation est encore permissive pour les sites privés, l’article 47 de la loi pour l’égalité des droits et des chances stipule en revanche que tout site publique doit être en conformité avec les critères d’accessibilité.

Au final , l’accessibilité n’est rien d’autre que le respect des standards du web.

Un initiative à prendre en amont La prise en considération des normes d’accessibilité doit nécessairement intervenir en amont d’un projet web. Tout comme le référencement, l’accessibilité n’est pas une phase à entreprendre une fois le site construit. Je me permets à ce propos d’emprunter l’image utilisée par Arnaud Briand, référenceur et expert en accessibilité numérique, pour qui, engager un travail de mise au normes d’accessibilité après avoir développé un site peut s’apparenter à vouloir intégrer un ascenseur une fois l’immeuble construit. Prendre en compte les critères d’accessibilité dès le début d’un projet permet de gagner du temps et de l’argent.

Dans la même logique, ces problématiques doivent être intégrées à chacune des étapes de la vie d’un site, de sa conception à sa réalisation et elle doivent concerner tous les domaines de la rédaction des contenus au développement en passant par le graphisme.

Sommaire

 

haut de la page

• 1_ Définition de l’accessibilité numérique
• 2_ Une structure html cohérente : claire et organisée
• 3_ Les différents paramètres
• 4_ Accessibilité et ergonomie
• 5_ Conclusion

 1/ Définition de l’accessibilité numérique

 

haut de la page

Vecteur d’intégration sociale, l’accessibilité est surtout un droit et un devoir.   

Avant toute chose, il convient de préciser que l’accessibilité n’implique pas uniquement les personnes handicapées, les seniors ou les malvoyants. On parle d’accessibilité également pour : 

• des connections bas-débits ou des performances d’affichage réduites.
• l’accès aux médias et aux technologies utilisées par un site (flash, Ajax, JavaScript etc.).
• Les personnes navigant via un téléphone portable ou un palm (assistant numérique personnel).

D’autre part, lorsque l’on parle de personne handicapée, il est bien évident que cela ne concerne pas seulement les personnes en fauteuil roulant. Tous les handicaps sont évidemment impliqués :

• Handicaps moteurs (dextérité déficiente).
• Handicaps visuels (daltoniens, protanopie, deutéranopie, tritanopie).
• Handicaps auditifs (surdité).
• Handicaps cognitifs (difficultés de compréhension, de langage).

Et non, ça n’est pas un stéréotype, les personnes handicapées surfent énormément sur internet. Qui plus est, du fait de leur sédentarité, elles représentent un marché important. De même, le secteur des seniors, en plein croissance, est très rentable : les personnes âgées disposent souvent d’un important pouvoir d’achat. Certains annonceurs ou directeurs de programmes TV l’ont d’ailleurs très bien compris (la chaîne Vivolta cible en majorité les plus de 40 ans).

Enfin, l’accessibilité s’adresse également aux moteurs de recherche, qui ont besoin de clarté et de fluidité pour indexer tous les éléments de votre site, le parcourir, le comprendre et ainsi le positionner dans les listes de résultats.

 2_Une structure html cohérente :  claire et organisée

 

haut de la page

séparer le contenu et la présentation. Afin de rendre le contenu de votre site accessible à tous, y compris les robots d’indexation, il faut que celui-ci soit présent d’une manière ou d’une autre dans le code html. Pour faire court, une page html accessible c’est une page qui est compréhensible et navigable même  lorsque l’on désactive les feuilles de style, les images et les médias (vidéos, musique, animations flash). Idéalement, ces derniers ne doivent apporter qu’une contribution graphique ou « cinétique » à votre site. Le cœur, le fond, c’est le code html.

Généralement, les meilleurs spécialistes CSS le confirmeront, on ne commence les feuilles de style qu'une fois la structure HTML terminée.

En clair, l’ordre d’affichage sur un navigateur graphique (Explorer, Firefox) devrait être le même que celui proposé par des navigateurs vocaux, ce qui est souvent impossible lorsque l’on réalise un site en mode tableau. Ces navigateurs liront chaque élément de votre code. En conséquence, la logique sémantique impose que la structure html respecte la hiérarchisation de l’information (comme l’enchaînement des balises de titres intermédiaires h1, h2, h3 …). 

Un travail sur la structure des contenus d’une page permet bien souvent d’en révéler les failles : la présence d’une seule sous-partie, l’absence de titres pour certaines sous-parties, une catégorisation bancale etc. Prenez le temps de « ranger » votre page, de corriger les incohérences. Vos visiteurs comprendront plus intuitivement vos pages et arriveront plus facilement à ce qui les intéresse.

structuration des éléments Le menu de navigation étant le système nerveux de votre site, il doit être donc être l’un des premiers éléments constitutifs de la page. Sa place est, avec le logo, tout en haut du code source, dans la balise <body>. Libre ensuite de le positionner à l’aide des CSS, n’importe où dans la page, même tout en bas, comme sur le site de Charlotte Gainsbourg (qui est pour le coup réalisé en flash, je vous l’accorde) :

A la suite du logo, du menu de navigation (et éventuellement d’un module de recherche), la page se compose du contenu éditorial proprement dit : la titre de la page (h1), puis des titres intermédiaires et des paragraphes correspondants. Les titres h2, h3, h4 doivent être dans l’ordre et implémentés de façon pertinente (deux h2 correspondent à deux titres du même niveau). Il ne doit y avoir qu’un seul h1 par page et celui-ci doit être proche du titre de la balise title. Naturellement, il n’y pas de titre h4 sans titre h3 ni h2.

L’organisation d’une page html s’articule comme ceci :

Il est important de savoir que la structuration d’une page en différents niveaux d’information permet indirectement d’influer sa visibilité dans les outils de recherche. En effet, Google donne plus ou moins d’importance aux différentes balises d’une page. D’une manière générale les titres, liens et termes en gras représentent des facteurs de pondération importants. Il est difficile de connaître précisément leur échelle d’importance, mais certaines choses sont sûres : les titres h1 sont mieux référencés que les h2 et ainsi de suite. En toute logique, un titre, même un h6, aura plus de poids qu'un simple paragraphe.

C'est ici que l'on voit se dessiner la corrélation entre sémantique, ergonomie, accessibilité et référencement : dans un site web, chaque page se doit de posséder un objectif bien précis et donc proposer un contenu en cohérence avec celui-ci. L'optimisation du contenu et de la structure d'une page permettra non seulement d'améliorer l’indexation du site mais également de rendre la navigation claire et précise. En nommant une page "Musique and Co - Logiciels de mixage" vous aurez fait une pierre deux coups : permettre à l'internaute de savoir précisément où il se trouve et vous aurez simultanément optimisé le référencement de la page.

 3_Les différents paramètres

 

haut de la page

Mise en page en mode tableau Les mises en pages en mode tableau sont évidemment proscrites car elles ne respectent pas la structure sémantique d’une page. En privilégiant l’organisation visuelle, le mode tableau peut aboutir à des aberrations en termes de logique sémantique. Une page HTML étant lue de haut en bas par les navigateurs textuels et les robots d’indexation, une page construite en mode tableau peut donc être totalement incompréhensible, bien que visuellement cohérente : les robots lisant les cellules du tableau une par une, de gauche à droite et de haut en bas.

Les mises en page en mode tableau, en plus de nuire à l’accessibilité, présentent de nombreux autres désavantages comme celui d’alourdir les pages et d’être très contraignants en termes de maintenance). Je vous conseille à ce propos l’article d’Openweb sur les inconvénients de la mise en page en mode tableau.

Ces observations ne signifient pas pour autant qu’il ne faille pas utiliser les tableaux pour les tableaux de données, ce pour quoi ils sont faits à la base. Au début du web, les feuilles de stye n’existaient pas encore et les tableaux constituaient pour les développeurs une méthode somme toute rapide de positionner les éléments. Des logiciels graphiques comme Photoshop ou Fireworks ont d’ailleurs longtemps contribué à la généralisation de cette méthode en proposant des exports de maquettes graphiques en html, sous forme de découpages-tableaux

Les tableaux de données L’utilisation des tableaux est bien sûr parfaitement adaptée pour la mise en forme de  tableaux de données (ex: statistiques). Pour rendre un tableau de données accessible, il est essentiel de nommer explicitement les différents éléments (les balises summary, caption, header, abbr, tfoot, tbdoy, et thead) afin de permettre à un navigateur vocal (comme Lynx ou Jaws) de mettre en relation les cellules et de fournir à l’internaute une lecture cohérente du tableau.

Les formulaires Le traitement de formulaires exige également un codage particulier : 

• la balise « label » et ses attributs correspondants (id, for) doit être présente.
• Bien veiller à donner la fonction exacte de l’intitulé des champs.
• Les champs et les textes qui leur sont associés doivent être disposés de façon à ne poser aucune ambiguïté.
• Les intitulés doivent toujours précéder les boutons ou les champs.
• Si l’on utilise un pictogramme pour les boutons, penser à donner à l’attribut « alt » la fonction précise du bouton.
• Pensez à fournir un commentaire du bouton submit comme «valider les informations et envoyer le formulaire».
• la balise « fieldset » doit être présente pour encadrer les blocs d’information de même nature.
• La Balise « legend » doit être correctement renseignée.
• Evitez de placer un bouton reset à proximité du bouton « envoyer ». Généralement les internautes cliquent sur ce qui ressemble à un bouton d’envoi placé en fin de formulaire sans véritablement lire l’intitulé !

Pensez également à toutes les étapes subséquentes à la validation du formulaire :  

• sur quelle page se retrouve l’internaute ensuite ?
• les messages d’erreur sont ils visibles et compréhensibles ?
• les champs incomplets sont ils bien mis en avant par d’autre moyen que la couleur ?
• Ne pas effacer tous les champs après l'envoi du formulaire lorsqu’un seul champ à été incorrectement rempli.
• Montrer de façon évidente à l’utilisateur que son message a bien été envoyé (évitez un texte imperceptible dans un endroit excentré qui se fond aux autres informations).

Les couleurs : Certains handicaps visuels portent sur la perception des couleurs (daltonisme, chromatopsie, deutéranopes, protanopes). Il est donc essentiel que les couleurs ne soient pas nécessaires à la navigation ou à la compréhension d'un site. En clair, l’information ne doit pas passer uniquement par la couleur.

Sur ce formulaire du site diesel.com, la couleur rouge est utilisée pour interpeller l'internaute sur un champ mal rempli. Sans cette indication chromatique, il se peut qu'un internaute ne comprenne pas immédiatement où se trouve l'erreur. Intelligemment, Diesel a pris soin de renforcer l'information par un texte explicite.

Pour indiquer que l’intitulé d’un champ de formulaire n’a pas été rempli, il ne suffit pas de changer la couleur de la police (passant du noir au rouge par exemple). Une personne ayant un handicap visuel lui empêchant de distinguer les couleurs ne verra pas cette indication. Soit l’on doublonne ce changement de couleur d’un astérisque soit on a recours à une indication textuelle, ce qui est préférable (ce qui est de mise sur l'exemple ci-dessus).

Les contrastes Les contrastes sont également très importants. Même pour une personne voyante, distinguer un texte blanc sur un photo claire peut être problématique. Au graphiste de tester son image en niveaux de gris dans un logiciel de retouche d’images. Faites de même avec votre propre site, faites un screenshot (une capture d’écran) et passez l’image en noir et blanc pour vérifier si le contraste est suffisant. Veillez particulièrement au contraste entre la couleur du texte et la couleur de fond. De même, évitez les combinaisons de couleurs détonantes qui fatiguent l’œil et gênent la lecture. Ce petit outil en ligne vous permettra de savoir si le contraste entre deux couleurs est suffisant : juicystudio.com.

L’application de nombreuses autres règles d’ergonomie (loi de Fitz, théories de la Gestalt) permettront de rendre votre site plus confortable à la navigation et d’orienter vos visiteurs vers vos contenus stratégiques. Vous l’avez compris l’accessibilité sert de signalétique et peut donc permettre de contrôler le parcours de vos visiteurs !

Les images : Comme le formule très justement Laurent Denis, d’Openweb : « Les images constituent le premier obstacle majeur à l'accessibilité des pages Web ». Qui plus est, elles sont aussi invisibles pour les personnes souffrant de cécité que pour les robots d’indexation. Et oui, les robots sont aveugles !

L’idéal est donc de fournir un substitut textuel aux images. Hors, dans un site, toutes les images ne représentent pas le même intérêt. Il est en effet important de distinguer les images décoratives (utilité graphique) à mettre dans le CSS, des images qui véhiculent une information (utilité sémantique) à mettre dans le flux HTML.

A titre d’exemple, les logotypes ne fournissent pas d’information autre que celle de figurer le nom d’une marque ou d’un titre. Il convient donc de les implémenter dans les feuilles de styles et non dans le code html, puis de les associer à un texte (par exemple le nom de la marque) et d’insérer ce dernier dans des balises <span> auxquelles on a donné la propriété «invisible » comme le montre l’exemple ci-dessous.

En suivant la même logique, les éléments de pure décoration (angles de menu, dégradés, fonds etc.) sont à intégrer dans les feuilles de style pour ne pas fournir à l’internaute des informations superflue et inintelligibles : le code html est réservé au noyau sémantique.

Si l’image est illustrative, qu’elle possède une fonction (de lien par exemple), ou qu’elle donne une information, l’attribut alt doit être renseigné (60 caractères maximum). Dans le cas d’un lien graphique (un lien-image) il faut décrire l’intitulé du lien dans l’attribut alt (80 caractères maximum). En revanche si l’image est juste décorative, qu’elle n’apporte rien à la compréhension, il est recommandé de laisser l’attribut alt vide. Si l’image intègre un texte, le contenu de l’attribut alt doit être équivalent au texte inscrit dans l’image. Tout élément graphique devant être commenté, on laissera l’attribut alt vide pour les images qui n’ont aucune valeur informative.

On voit ici l’intérêt non négligeable d’utiliser des liens-images pour le référencement : l’attribut alt (pris en compte par les robots d’indexation) permettant de multiplier les mot-clés dans vos pages tout en améliorant la navigation et l’accessibilité. Ainsi, pour marier l’accessibilité et le référencement naturel, il est judicieux de rendre cliquable les images (afin de renseigner l’attribut alt par la fonction du lien)

Typographies bitmap Les images sont très pratiques si l’on désire utiliser une typographie plus exotique ou une police bitmap pour des titres ou des menus de navigation. Toutefois, il conviendra de bien veiller à ce que le texte qui utilise une police fantaisie soit compréhensible par tous. Les images servant de texte n’ayant qu’une utilité graphique (et non sémantique) puisqu’elles remplacent un texte déjà présent dans le code html, elles doivent être implémentées via les feuilles de style CSS.

Pour les images nécessitant une description détaillée (par exemple un tableau de données), l’attribut « longdesc » sera conseillé. Dans ce cas la description devra être pertinente et apporter plus de renseignement que l’attribut « alt ».

L’attribut alt : L’Attribut alt (Alternative textuelle) pour chaque image (limitée à 60 caractères, espaces et ponctuation compris) doit être à la fois précis et descriptif. Pour citer le guide Accessiweb: « L'alternative textuelle associée à un élément graphique est la seule information restituée à l'utilisateur lorsqu'il désactive le chargement des images. » C’est donc la seule information disponible à un utilisateur aveugle ou malvoyant et aux robots.

Le champ « alt » doit donc être concis et surtout cohérent par rapport à l’image. Dans le cas d’un pictogramme ou d’un symbole, c’est bien évidemment le sens qu’il faut décrire, non le graphisme.

Le Texte : La lecture à l’écran est un sujet toujours en débat, rappelons simplement que le lire un texte sur un écran implique de regarder une source de lumière pendant une longue période, c’est pénible et fatiguant pour l’œil (c’est d’ailleurs une des raisons pour lesquelles j’ai choisi pour mon site un fond d’écran sombre et une police grisée pour éviter un contraste trop détonant). Lire à l’écran est plus dur que lire sur papier, c’est un fait.

Malgré tout, pour faciliter la lecture à l’écran, certaines principes méritent d’être rappelés :

• L’être humain ne lit pas, il balaye une page, et « reconnaît » la forme des mots.
• Transposer un texte papier à l’écran est à proscrire. Réduisez d’environ 40% votre contenu rédactionnel lors d’un transfert sur le web
• Evitez les phrases trop longues, trop alambiquées et les termes trop subtils. Amateurs de stylistique Proustienne passez votre chemin. A savoir : Nous ne connaissons en moyenne que 20% du dictionnaire…
• Adoptez un style journalistique : phrases courtes, phrases slogan, accroches, redondances des termes (mots-clés ?).
• Evitez autant que possible les phrases entièrement en majuscule : Les minuscules sont plus faciles à lire, c’est un principe bien connu du graphisme. L’utilisation de majuscule pour des titres très succincts est bien entendu possible.
• Evitez une taille de police trop petite avec un graisse forte.
• Préférer les polices sans serif et simples (Arial, Verdana). Une police sans serif est plus lisible sur écran, contrairement au papier où les polices à empattements sont très bien acceptées .

Les scripts,  flash et les médias. Pour les portfolios en flash ou les sites artistiques intégrant de multiples médias, l’idée de rendre son site accessible peut sembler vaine tant l'intérêt du site repose sur l'aspect graphique ou les animations. Pensez maintenant l'accessibilité en terme de référencement : un site flash doublé d'un contenu texte bien construit et pertinent disposera d’une plus grande visibilité dans les outils de recherche. D’autre part, il convient de souligner que l’accessibilité ne représente pas nécessairement 100% du site, mais seulement les éléments les plus importants comme la navigation, les textes et les mentions légales. 

En matière d’accessibilité, certains règles sont toutefois de mise pour les supports médias et les scripts :

• Pour une vidéo ou une animation pédagogique, l’utilisateur doit pouvoir interrompre à tout moment le lecteur (en cas de problèmes cognitifs ou d’épilepsie).
• Tout comme les feuilles de style ou les éléments flash, la désactivation des scripts ne doit pas être un frein à la compréhension d’une page.
• Les menus déroulants doivent être détaillés dans le code html lorsque l’on désactive le Javascript.
• une navigation alternative en html doit toujours pouvoir être proposée.

Pour l’intégration d’un élément flash ou vidéo dans un site html, utiliser la méthode swfobject vous permettra d’intégrer facilement un contenu textuel de remplacement. Une dernière chose : pensez à insérer un lien vers flash, Acrobat (ou Silverlight !)

 4_Accessibilité et ergonomie

 

haut de la page

Homogénéité et cohérence L’homogénéité d’un site est l’un des principes de base de l’ergonomie pour le web. Il est essentiel que les éléments récurrents d’un site (menu de navigation, rubriques, footer, module de recherche, logo) aient la même apparence et soient au même endroit sur chaque page. Se familiariser avec l’organisation d’une page peu prendre un certain temps, d’autant plus pour les personnes souffrant d’handicaps cognitifs, c’est pourquoi la structure du site doit être simple, cohérente et persistante au fil des pages.

Les différents éléments d’une page fonctionnement comme des points de repères, (les spécialistes de l’ergonomie utilisent le terme « organisateurs paralinguistiques »). Plus une page est cohérente et bien organisée, plus les internautes la mémoriseront vite et seront à l’aise dans le site. Dans le même ordre d’idée, il est capital que chaque lien menant vers une même page aie exactement le même intitulé et que celui-ci soit explicite. Afin de faciliter le repérage pensez à mettre en exergue la page visitée sur la barre de navigation.

Pour les sites complexes, possédant plusieurs niveaux de profondeur, Il est conseillé d’intégrer un fil d’Ariane. Celui-ci fonctionne comme un menu de localisation et permet à l’internaute de savoir à tout moment où il se trouve à l’intérieur du site, quel est son parcours jusque-là.

 5_Conclusion

 

haut de la page

Braillenet est l’une des associations en France à certifier l’accessibilité d’un site web. Leur étude, fondée sur les recommandations du W3C/WAI comprend 92 critères et discerne 3 différents labels : or, argent ou bronze. Le label or étant extrêmement exigeant et très dur à mettre en œuvre : intégration d’un moteur de recherche interne sophistiqué, poids de page inférieur à 70kb,  liens importants accessibles via les raccourcis claviers, anglicismes et acronymes traduits, etc.).

Le site de Braillenet propose par ailleurs de nombreuses informations, des formations et une évaluation en ligne de votre site.

Ce mémo sur l’accessibilité ne tient pas lieu de guide exhaustif, de nombreux points n’ont en effet pas été étudiés (l’utilisation des balises, l’intégration d’une rubrique d’aide, les ancres internes etc.). L’objectif ici est de vous fournir un bref aperçu de ce que recouvre le domaine de l’accessibilité numérique. La liste de sites en haut de page vous permettra d’approfondir tous ces paramètres.