Hello à tous !
Aujourd’hui je vous propose cet article invité sur l’accessibilité web, rédigé par Nathalie. Le sujet étant très complexe, Nathalie a fait le choix de vous parler des idées reçues, et de vous donner quelques conseils et astuces pour commencer une démarche accessible.
Nathalie, est chef de projets web et expert accessiweb à l’agence Kinaia, agence web, multimédia sur Nantes.
Bonne lecture !
Vaste sujet que l’accessibilité… Cet article n’aura pas pour objet de vous expliquer comment faire un site accessible, il y a des formations pour cela et expliquer ça en un article me paraît complètement utopique. Non, je vais aborder les idées reçues, les petits pièges à éviter ou les astuces toutes simples. Mais avant ça, remettons à plat le contexte…
L’accessibilité, qui est concerné ?
La question se pose très sérieusement, car bien souvent, on imagine que faire un site accessible, c’est pour les non voyants uniquement. Et les autres alors ? Les daltoniens, les personnes âgées qui ont dû mal à lire ou à s’y retrouver, les handicapés moteurs, les sourds et muets (contrairement à ce que l’ont pourrait croire eux aussi ont des difficultés car le français est une langue étrangère) ou les utilisateurs avec une mauvaise connexion.
Les handicaps sont nombreux et pas forcément physiques comme on l’imagine souvent à tord. Et comme vous l’aurez compris, tous ces handicaps nécessitent de faire attention à des choses bien différentes lors de la construction d’un site : l’organisation des contenus, des aspects visuels et techniques.
Par où commencer ? Une page structurée.
Lecteurs de ce blog, vous connaissez les bases techniques du SEO : une balise title bien faite, une page structurée avec des balises sémantiques et des titres bien pensés, des liens biens nommés, ne pas mettre le texte sous forme d’image. Vous avez la base !
Une personne non voyante navigue à l’aide d’un lecteur écran qui lui lit vocalement ce qui se passe sur son ordinateur ou lui affiche le contenu sur sa tablette braille. Mais ce lecteur d’écran ne lui lit pas forcément la page de bout en bout, il lui permet de naviguer de titre en titre ou de lien en lien par exemple. D’où la nécessité d’avoir un contenu bien structuré.
Les liens “lire le suite” sont à éviter là aussi (même si aujourd’hui le lecteur d’écran peut indiquer le contexte du lien). Pour les images… alors certains SEO aiment peut-être mettre des mots clefs dans leur balises alt, mais c’est à éviter. Si votre image n’est là que pour illustrer votre page, mettez une balise alt vide (alt=””), le lecteur d’écran ignorera cette image.
Je vous invite vivement à tester un lecteur d’écran pour comprendre comment un non voyant navigue : Jaws (et mettez une feuille devant votre écran…)
Naviguez avec votre touche tabulation et désactivez CSS
C’est ainsi que naviguera un handicapé moteur notamment. Testez vos site, et rentrez dans votre menu déroulant qui peut-être ne se déroule pas, complétez un formulaire et faites une erreur…
Très vite vous allez comprendre que c’est un calvaire. Comment les aider ? Car effectivement ce n’est pas simple, mais des accès directs au contact et au plan du site dès les premiers liens, ça aide ! Sur les formulaires donnez les indications avant le formulaire et non pas après comme on le voit souvent. ça évite à tout le monde d’arriver en bas du formulaire et de devoir tout reprendre parce qu’il manque quelque chose.
Construisez logiquement votre site : désactivez votre feuille de styles et vérifiez si la structure affichée sans style est cohérente avec celle qui s’affiche avec les styles. Sans votre feuille de styles votre site doit apporter les mêmes informations.Un titre H1 est plus important visuellement qu’un titre H2 ? C’est une erreur. Votre liste n’est pas mise en forme avec les balises ul li ? Là encore, c’est une erreur. Et, il est vrai que l’on peut en faire pas mal comme ça. En désactivant la feuille de styles, pas de tricherie visuelle, vous voyez réellement le contenu de votre page.
Désactivez Javascript
Désactivez aussi javascript et testez… Vos interactions (menu déroulant, slide notamment) ne fonctionnent plus ?
Il faut effectivement penser à préparer des alternatives pour les personnes non voyantes qui ne voient pas l’interaction, pour les personnes qui désactivent javascript, pour les personnes qui ne peuvent pas utiliser l’interaction (comme le survol à la souris) et on peut imaginer d’autres soucis selon les interactions créées.
Agrandissez les textes de votre site
Les navigateurs ont tous cette fonction d’agrandissement du texte, et quand ma vue commencera à se dégrader, j’agrandirai tous ces sites écrit avec des textes microscopiques. Et je me retrouverai à lire du texte blanc sur blanc…
Car un texte avec un beau fond de couleur ne s’agrandi pas avec le texte, ce n’est pas pratique. Le mieux c’est de mettre une couleur de fond ou de prévoir que le fond s’agrandisse aussi (puisque c’est désormais possible avec CSS3.).
Pour conclure
Cet article est très loin d’être exhaustif. L’accessibilité touche tous les métiers de la création web : la conception, la rédaction, le design, l’intégration et le développement.
Pour ceux qui veulent vraiment réaliser des sites de qualité accessibles, je ne peux que recommander les formations Braillenet. Vous pouvez consulter les deux référentiels de tests français : AccessiWeb et RGAA, mais je trouve qu’ils sont difficiles à aborder seuls.
Quelques ressources
Passionnée par le référencement naturel et la rédaction web ! Blogueuse depuis 2012 ! Coauteur du livre “Techniques de référencement web” et “Stratégie de contenu e-commerce”.
Découvrez mes “Prestations SEO” et contactez-moi pour échanger sur votre projet SEO.
Un article intéressant, ce sont pas mal de chose qu’on ne sait pas ou du moins qu’on applique pas quand on les connait…c’est un peu comme dans la vraie vie-personne ne s’en soucis avant d’avoir quelqu’un de son entourage concerné 🙁
Personnellement je ne fais que décrire les images dans la balise “alt”, j’ai consulté la liste des 81 points à vérifier que je trouve un peu barbare à certains endroits pour un novice.
Je me demande aussi, si la solution ne serait pas de faire plus simple et de donner la possibilité aux visiteurs non voyants d’écouter un article (posdcast ) plutôt que de ce casser la tête à vouloir vérifier tout cela qu’en pensez-vous ?
Amicalement
franckwylliams@piwik analytics Articles récents..Piwik Analytics le Tutoriel d’installation
C’est essentiel d’adapter son site à tous les types de populations, à plus forte raison quand elles n’ont pas facilement accès aux informations qu’on veut promouvoir.
adam@source Articles récents..Fréquence cardiaque pour maigrir : gérer son rythme caradiaque minceur
Merci Nathalie pour ce petit rappel à l’ordre.
Après avoir parcouru ton article, je me suis interrogé pour savoir si le notre respectait tout ceci. Il semblerai que oui … Donc nous sommes accessible pour tous 😀
Par contre, seule petite chose, je ne vois pas en quoi une personne sourde ou mal entendante, ou même muette puisse être bloquée sur internet. Certes ils ne maitrisent pas le français oral, mais le français écrit, je n’arrive pas à imaginer.. Merci ++
En voilà une problématique intéressante ! Ces normes sont souvent délaissées lors de la création d’un site web et seules les bases sont implémentées, et encore.
Les municipalités, dans leurs appels d’offre, demandent très souvent une version spécifique de leur site pour donner un accès handicapé.
Nous nous rapprochons alors des normes WAI, et faisons une structure du site différente et une feuille de style épurée dédiées à cet accès handicapé.
Je pense que ceci est plus simple de ne pas mélanger les deux et vouloir répondre à tous les standards au sein du site lui-même, à voir l’avis des spécialistes …
@franckwylliams excellente problématique que les podcasts. J’ai hésité à en parler dans l’article… Juste une question : comment une personne non voyante arrive sur ce postcast ? Elle a besoin d’un lecteur d’écran. Le podcast ne fait que lire l’article tout comme le fait le lecteur d’écran, ce postcast ne permet pas non plus de naviguer dans le site. Le postcast est une solution de voyants qui ne connaissent pas les problématiques rencontré par les non voyants.
@Yura Attention, ce n’est ici qu’une approche de l’accessibilité, il existe différents niveaux A, AA et AAA dans le RGAA par exemple, qui permettent d’évaluer le niveau de travail effectué pour le rendre accessible.
Pour les sourds et muets, le français est une langue étrangère… et quand on lit un texte dans une langue qui ne nous est pas familière, c’est toujours plus compliqué de se plonger dans un texte long et fastidieux.
@Fred Tous les experts AccessiWeb vous répondrons la même chose : On ne fait pas de site à part ! Pourquoi faire un site à part quand un site simplement construit et bien structuré peut être accessible à tous ?
@Yura je viens de regarder la page d’accueil du site et elle invalide. Si on prend l’exemple des images d’illustration : elles ont des balises alt remplies alors que ces images ne sont là que pour illustrer. Elles devraient avoir des balises alt vide (alt=””).
@Nathalie
Bonjour Nathalie,
Tu as sans doute conscience de barrières dont je n’ai pas idées car je ne suis pas spécialiste 🙂
c’est une solution qui m’est venu à l’esprit parce quelle me semble judicieuse.
Effectivement, je concède que pour un non-voyant cela risque d’être compliqué, mais pour un mal voyant ça reste une solution bien vue, NON?
Amicalement
franckwylliams Articles récents..Positionner en premiere page …. référencer son blog ce n’est pas du gâteau !
@Nathalie : Je comprend ce que vous voulez dire lorsque vous parlez de structuration et construction du site au niveau HTML qui correspondent pour tous.
En outre, je vois souvent des recommandations particulières demandées par les collectivités concernant les contrastes de couleurs à mettre en avant.
Celles-ci nécessitent alors une feuille de style particulière car d’autres recommandations sont effectuées pour l’internaute lambda.
N’y a t-il pas alors plusieurs niveaux d’accessibilité ?
Mettre le Web et ses services à la disposition de tous les individus, particulièrement les handicapés et les personnes âgées dont le vieillissement entame les capacités, est essentiel avant de commencer n’importe quel projet web. Merci pour ce partage !
@Nathalie d’accord, je ne savais pas qu’il y avait autant de niveaux.. Je commence seulement à comprendre. Merci pour ta réponse et pour avoir mit cette problématique en lumière 🙂
Yura @référencement nice Articles récents..Site responsive mieux positionné?
@franckwylliams Il faudrait demander à un mal voyant son avis. Tout dépend aussi du niveau de difficulté de lecture : est-ce qu’un agrandissement de la police peut suffire ? si ça n’est pas le cas, il utilise sûrement un lecteur d’écran. A mon sens, le lecteur est inutile, voire peut poser d’autres problèmes d’accessibilité. Mais, certains peuvent exprimer l’inverse.
@Fred Effectivement, les contrastes sont à mesurer. Certaines couleurs sont moins lisibles sur d’autres et plus ou moins lisibles selon la taille de la police. Mais, c’est à expliquer au graphiste pour qu’il en tienne compte. Personnellement, je lis très difficilement un vert clair sur un fond blanc par exemple, ce type de correctif est donc très important pour ma lecture. Et je n’irai certainement pas voir le site dans une autre version, qui du coup, n’aura été faite que pour respecter la réglementation et pas l’utilisateur… Concernant les niveaux, il existe effectivement 3 niveaux de travail (avec RGAA ou AccessiWeb). Pour les collectivités par exemple, elles sont sensées respecter le niveau AA (deuxième niveau).
@franckwylliams : c’est une piste pour apprendre à “designer accessible”, mais c’est beaucoup trop limitatif. Par contre, oui, voir quelqu’un utiliser une aide technique comme une synthèse vocale permet de se rendre compte de plein de choses.
Ajoutons à cela que la situation de handicap n’est pas toujours là où l’on pense : http://www.nicolas-hoffmann.net/source/1423-L-accessibilite-pas-toujours-la-ou-on-pense.html (on se retrouve tous plus ou moins dans une situation de handicap de temps à autres)
Nico Articles récents..Des guides de styles pour votre intégrateur
Bonjour Nico,
Effectivement, le mieux est de faire des tests, mais en fait je n’ai personne de mon entourage qui soit non-voyant.
En fait, il ne faut pas se voiler la face, et surtout lorsqu’on est autodidacte, je ne pense pas que l’accessibilité soit une des premières choses à laquelle on pense lorsqu’on démarre un blog (surtout si vous n’avez que quelques visiteurs, d’ailleurs, on en parle très peu sur le web sous cette forme)
Je ne sais pas si cela vous sera d’une utilité, mais tout comme vous je suis de nombreuses heures sur mon écran et j’utilise f-Lux pour épargner mes yeux (pour en savoir plus : http://www.366jourspour.co/f-lux-une-appli-rien-que-pour-vos-yeux/3260
Amicalement
PS: votre site est un modèle qui me donne des idées.
franckwylliams Articles récents..Logo, installer la licence Creative commons sur votre blog
Vous avez parfaitement raison d’insister sur le fait que les handicapés ne désignent pas uniquement les cas extrêmes et que par conséquent il faut y penser.
Un article intéressant, ce sont pas mal de chose qu’on ne sait pas ou du moins qu’on applique pas quand on les connait.
il est important d’avoir du contenu pour toute les personnes sur sont site.