L'accessibilité web, des critères et des outils

Bienvenue à vous, nous avons vu ensemble dans la première partie de ce sujet comment évoluent les mentalités autour de la problématique d’accessibilité au web.

Afin de mieux saisir l’intérêt de ce second article je vous invite à lire le premier et pour se remettre dans une le bain, une citation de Tim Berners-Lee fondateur et Président du W3C sur le but de cette organisation.

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, ou leurs aptitudes physiques ou mentales.

Grâce à l’écriture de cette suite d’article et après de nombreuses lectures et discussions, j’ai pris conscience que face à certains handicaps, l’apparition du web est une révolution. A l’heure actuelle, internet est une toute nouvelle fenêtre sur le monde pour les personnes malvoyantes ou malentendantes et ce, sans limite ou discrimination. C’est parfois même le premier vecteur d’insertion sociale, culturel pour un public que le livre, la musique ou le cinéma n’atteignent pas.

Nous verrons dans un premier temps quels sont les outils utilisés pour palier à certains handicaps et face à quelles contraintes il faut être préparé en tant que webdesigner. Ensuite nous verrons de manière plus technique comment nous pouvons améliorer l’accessibilité de notre site et quels sont les éléments clés.

Quelles sont les outils utilisés contre l’inaccessibilité du web ?

Il existe beaucoup d’outils différents pour aider à contrer certaines déficiences ou handicap. Tous ne sont pas forcément accessibles au grand public car chers ou peu commercialisés.

Il existe par exemple des appareils qui permettent de traduire en braille certains textes d’une page, ou encore qui reproduisent en audio un paragraphe (appelé communément “liseuse”). Il existe évidemment des solutions logicielles comme cette extension Chrome de lecture de page Web ou encore des navigateurs reconnus qui mettent en place certaines solutions comme Firefox

Voici un extrait de cet excellent article portant sur les pratiques spécifiques à certains handicaps :

Pour surfer, les aveugles ont le choix entre plusieurs navigateurs, répartis en deux groupes : les spécifiques qui analysent le code HTML et gèrent directement les entrées sorties Braille ou vocales. En gros, ils font une compilation des textes, en ignorant les images. […]. Quel que soit le choix du navigateur, le non-voyant n’a de toute façon jamais une vision globale de la page sur laquelle il accoste. Il la perçoit par fragments qu’il doit manipuler mentalement, comme les différentes pièces d’un puzzle, afin de reconstituer l’information.

Concrètement, qu’est-ce que je peux faire ?

Structure

Sans se borner à faire des sites accessibles en premier lieu aux liseuses, il faut avant tout que la structure de votre site soit lisible et logique.

Ainsi, quelque soit l’utilisateur qui ouvre votre site il recevra le message que vous vouliez passer.

Éviter les iframes qui créent des “blocs” incompréhensibles, aérez vos contenus afin d’éviter les pages trop complexes.

Multimédia

Tout d’abord ne pas créer de vide. Une image, une vidéo, un son, chaque élément multimédia doit être accompagné d’une description. Pour certains éléments il sera aussi plus aisé d’avoir un bouton de lecture.

<img src="image.png" alt="Description courte et précise" />

<audio src="music.ogg" autoplay>
  Ici la description alternative
</audio>

<a click="play_music()">
  Lire le fichier audio
</a>

<video controls src="video.ogv">
  Ou encore ici
</video>

Liens & ancres

Éviter au maximum les liens du type “cliquez ici” qui sorti de leur contexte n’ont aucun sens. C’est rarement très complexe à mettre en place :

<p>Pour accéder à mon site [cliquez ici](#)</a>
<p>[Accédez à mon site](#)</a>

Couleur

Il est évidemment important de gérer les couleurs de façon à ce qu’elle soient lisibles (texte) ou compréhensibles (code couleur) malgré le fait que nous voyons tous des couleurs différentes.

Que ce soit face à la myopie ou au daltonisme il est donc obligatoire de conserver un certain contraste dans nos pages. Comme il n’est pas du ressort de chacun de savoir juger un contraste, je vous propose ce comparateur de couleur.

Parfaitement réalisé, il vous donnera aussi les différentes recommandations que vous respectez (ou non) avec les couleurs que vous lui donnez.

Taille de police

Une bonne hiérarchie de titre / sous-titre / paragraphe permet déjà une lisibilité accrue pour tous les lecteurs de votre site mais si votre paragraphe est écrit avec des caractères de 10px de haut, ça devient vite fatiguant voire impossible à lire.

Sachant que le confort de lecture influe directement sur le passage d’un message, vous avez tout intérêt à le rendre le plus optimal possible.

Une problématique qui revient régulièrement sur les sites spécialisés est celle de la taille par défaut des polices. Chaque navigateur (ou système d’exploitation), dans les préférences utilisateurs, permet de définir une taille de police globale. Si on redéfini la taille des polices, celle définie par l’utilisateur n’a plus d’influence.

Ce point est sûrement l’une des plus grosses contraintes par rapport au design puisqu’il est difficile de prévoir une structure précise sans connaître l’“unité” de base.

Navigation

Les personnes utilisant un lecteur d’écran n’utilisent pas de pointeur (souris / pad) et doivent donc pouvoir accéder à votre site avec le clavier. Pour cela nous pouvons placer la navigation en premier contenu d’un site, accessible avec la touche TAB du clavier qui permettra ensuite d’afficher des ancres vers le contenu ou vers une navigation plus complexe.

Je vous incite à relire le paragraphe concernant le ressenti d’un personne malvoyante face à une page web pour éclairer votre recherche de la navigation idéale ou a regarder cette série vidéo : L’ordinateur des aveugles.

Si les formulaires ne font pas partie à proprement parler de la navigation du site ils sont souvent un élément complexe et dans lequel bien naviguer est primordial. N’oubliez pas d’ajouter des libellés clairs, et si besoin de définir un ordre de navigation avec les tabindex.

Conclusion

L’accessibilité est loin d’être un sujet figé, sa mise en œuvre est toujours perfectible.

Bien souvent on oppose l’accessibilité au design, au motif que mettre en œuvre ces bonnes pratiques d’accessibilité seraient un frein à un bon design.

C’est évident complètement faux. Par ailleurs on fait également souvent à tord un raccourci facile entre l’accessibilité et le handicap lourd, hors la plupart des déficiences sont légères mais n’en demeure pas moins pénalisante.

Par exemple savez vous que dans le monde près de 285 millions de personnes ont une déficience visuelle dont 39 millions d’aveugles ? C’est plus de 4 fois la population de la France.

J’espère que cela vous poussera à réfléchir à l’ouverture de vos contenus à toutes et tous.

Liens

• Une liste de sites labélisés “accessibles”
• Une chaine youtube spécialisée dans l’accéssibilité web

L’équipe Synbioz. Libres d’être ensemble.