Les bonnes pratiques de l’accessibilité Web

Je ne vais pas vous passer la liste des critères des différentes normes. C’est fastidieux, et même si les critères sont normalement agnostiques à la technique, il faut étudier dans le détail chaque cas. Mais si vous voulez progresser dans ce domaine, commencez par appliquer ces grands principes durant le développement de votre site ou application Web. Et si l’on considère que le résultat compte plus que les moyens, vos visiteurs apprécieront.

— dossier en cours de rédaction —

Les grands principes

Gardez en tête qu’il y a une multitude de handicaps, et que certains peuvent arriver à tout le monde (accident, vieillesse, …). L’information doit être accessible, quel que soit le mode de présentation. Il faut donc présenter l’information sous différentes formes (texte, son, …). C’est la multimodalité !

Pour mieux appréhender l’accessibilité d’un site Web, imaginez-vous dans la peau d’une personne âgée qui n’a pas vote dextérité, ou un déficient visuel qui utilise un lecteur d’écran (voir la page sur les outils).

Dans le premier cas, les pages doivent être visuellement propres (pas trop chargées). Les blocs d’images qui clignotent partout, c’est moche et illisible. Même pour le site de la FNAC ! Personne n’aime les sites trop chargés, ça fait perdre du temps pour accéder à l’information pertinente.

Et dans l’autre, l’information est parcourue de façon séquentielle (qui demande du temps !). Si vous appliquez les bonnes pratiques, le visiteur pourra sauter de titre en titre pour arriver au contenu désiré et pertinent. Il ne sera pas frustré et ne partira pas prématurément de votre site. Un bon moyen pour tester ça, est de désactiver les CSS (ajoutez la géniale extension « Web Developper » à votre navigateur) ; vous verrez alors comment votre contenu est séquencé et ce que cela peut donner si vous deviez le parcourir de façon linéaire. Le menu est tout en bas ? c’est nul ! Les titres ne sont pas repérés comme tels ? c’est nul ! Vous devez vous taper les liens vers les 10 réseaux sociaux, c’est nul !

Ne soyez pas sectaire. N’imaginez pas une technique = un handicap (et vice-versa). Ce que vous avez mis en place pour un public particuliers pourrait en intéresser un autre ; alors ne cloisonnez pas vos techniques d’accessibilité. Et rappelez-vous que les déficiences peuvent se cumuler (malheureusement !).

Organisation de l’information

La page ne doit pas être trop chargée avec des animations dans tous les sens. Si le visiteur (même sans aucune déficience) passe du temps à comprendre comment est structurée l’information, il risque partir.

L’information doit être bien ordonnée. Il faut donc absolument hiérarchiser votre contenu, notamment grâce à l’utilisation de différents niveaux de titre (les fameux tags <h1>, <h2>,<h3>, …). De plus, proposez un plan de site avec les titres cliquables des pages.

Une autre pratique est de mettre un lien d’évitement au tout début de la page (donc en haut) et qui doit pointer sur une ancre placée au début de l’information pertinente. Imaginez qu’à chaque page le lecteur d’écran doit relire tous les menus/sous-menus, titres (…). Fastidieux et inutile, non ? Si le visiteur est sur la page d’un article qu’il a précédemment choisi, il veut lire l’article et pas se refaire encore le menu (et autres widgets placés pour faire voir qu’on est hype !). Ce lien va l’emmener directement au début de l’article en question (titre compris).  Ce lien peut être masqué ou représenté par un pictogramme si ça « casse » le design de votre page. Mais des personnes ayant d’autres déficiences pourraient l’apprécier aussi.

Essayez d’imaginer ce que peut être la navigation sur votre site lorsque l’on utilise un lecteur d’écran (déficience visuelle) ou un système de clic par bouton poussoir (déficience motrice). Le balayage de la page se fait séquentiellement. Oui, c’est long et fastidieux (on peut supposer que l’utilisateur est habitué à son dispositif d’aide technique) alors autant ne pas complexifier la navigation.

Les ergonomes savent que l’oeil parcourt l’écran en zigzags et donc qu’il repère ce qui intéresse le visiteur. Les agences de communication/marking savent également ça, mais c’est un autre débat. Entre autres grâce à des tests utilisateur avec occulométrie (mesure et analyse du comportement de l’oeil), les ergonomes conçoivent un agencement de page optimal. Pour certaines déficiences, il faut revoir sa copie pour tenir compte de ces nouvelles contraintes. Évidemment le bon ergonome connaît ces contraintes.

L’avantage du Web et du système de code source HTML lisible, c’est que l’on peut tenir compte du comportement du visiteur par ces 2 plans (au sens technique) :

  • la façade avec les éléments visuels (et sonores) et tous les éléments d’animatiin et d’interaction,
  • l’envers du décor avec l’organisation du code pour ceux qui n’ont pas accès au premier plan.

C’est avec cet « arrière plan » que l’on va pouvoir s’adresser correctement à un public déterminé qui utilise des aides techniques. La première action est donc de respecter les normes en vigueur puisque les aides techniques en tiennent compte !

Les liens et éléments d’interaction

 

Les couleurs

L’information ne pas être diffusée que par la couleur. Par exemple, si vous classez des articles par catégorie, celle-ci doit être également écrire en lettre ou identifiée.

Une autre notion importante et évidente, et qui pourtant échappent à certains webdesigners : le contraste suffisamment élevé entre le premier et l’arrière-plan ! Si votre premier plan doit être correctement perçu (donc à caractère informatif), vérifiez que sa couleur soit contrastée par rapport au fond devant lequel il est. Mettre un texte bleu ciel avec un fond bleu marine, même pour un blog de marin d’eau douce, c’est illisible ! On voit de plus en plus du design mélangeant le noir, l’anthracite et le gris (pour un effet style « alminium brossé » à la Apple). C’est beau de loin, mais c’est loin d’être lisible. Et y’a pas besoin d’avoir une déficience visuelle pour avoir du mal sur certains sites. Y’a des outils pour tester les contrastes (comme l’extension « Color Checker » pour votre navigateur).

Les illustrations visuelles

Pour faire simple), on peut classer les illustrations visuelles (images, photos, pictogrammes, …) en deux catégories.

Les illustrations informatives, qui apportent donc une information pertinente au visiteur. Celles-ci doivent avoir absolument une alternative textuelle pour ceux qui ne peuvent les voir correctement. Un lecteur d’écran pour lire l’alternative. La technique de base en HTML consiste à renseigner l’attribut « alt » du tag « <img> » avec une texte décrivant l’image ; en évitant les termes inutiles (« photo », « image », « logo »). L’attribut « longdest » est obsolète en HTML 5.

Les illustrations décoratives, qui sont là pour égailler la page, la rendre agréable et compréhensible d’un coup d’œil. Par exemple un bandeau avec un titre comportant des arabesques, ou des étoiles servant de puces dans une liste. Ou la photo du rédacteur (un classique avec le Web collaboratif). Tout ça est bien sympathique mais ne sert à rien pour le contenu de votre article si votre visiteur a une déficience visuelle. Savoir que vous êtes en photo alors qu’il ne peut la voir : inutile ! En HTML, pour le tag « <img> », il faut créer l’attribut « alt » et le laisser vide ; ça permet au lecteur d’écran se savoir que l’illustration n’est pas pertinente.

Les animations

Il ne doit pas y avoir trop de changements fréquents. Et le visiteur doit s’en apercevoir. Évitez également les pages qui se rechargent et les liens qui s’ouvrent dans d’autres onglets sans prévenir le visiteur. Le visiteur doit pouvoir garder le contrôle sur les éléments multimédias de la page. Donc, a minima, si vous lancez automatiquement une vidéo ou un son (c’est déconseillé), proposez des boutons de contrôle (pause, stop, lecture) pour que l’utilisateur puisse arrêter l’animation et la reprendre comme il le souhaite.

Pour les bandeaux qui clignotent et autres présentations animées, la norme qui qu’il faut laisser s’écouler plusieurs secondes entre chaque changement. Oubliez les panneaux fluos qui clignotent à 5 images/seconde.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.




Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.