Créer des sites accessibles, c’est facile

Dans cet article nous allons parcourir quelques règles d’accessibilité qui concernent le code HTML, l’écriture des contenus, ainsi que les phases de conception et de design. Ces règles rendent service à une multitude d’utilisateurs. En parallèle, elles favorisent un bon référencement naturel, ce qui n’est pas négligeable. Il y a donc tout à gagner en les implémentant.

Accessibilité web : qui est concerné ?

Selon Wikipedia, l’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Avec 22% de plus de 60 ans (INSEE) et environ 18% de personnes ayant un certain degré de handicap (Mise à jour du 18/04/2012), on s’attendrait à ce que la majorité de sites web soient accessibles. Ils sont pourtant une faible minorité en ce début d’année 2011.

Il y a plusieurs causes à ce manque d’accessibilité du paysage web actuel :

  • Les développeurs et intégrateurs ne sont pas formés en accessibilité ou ils ont du mal à communiquer au reste de leur équipe l’importance de l’accessibilité.
  • Les clients ne sont pas sensibilisés à ce sujet ou pensent que ça va leur coûter trop cher.
  • Les designers pensent qu’un site accessible ne peut pas être esthétique et que leur liberté de création va être réduite.

Il y a probablement d’autres causes en jeu, mais un des problèmes certain est le manque d’information de tous les partis concernés. En réalité, il est relativement facile de créer des sites accessibles en respectant quelques règles de base.

Règles de base pour un site accessible

  • Une syntaxe HTML impeccable
    C’est une évidence ! Il s’agit par exemple de n’utiliser des tableaux que pour les données tabulaires ; d’utiliser des balises de titres pour les titres etc. Une bonne syntaxe sera aussi bénéfique pour les moteurs de recherches donc il y a tout à gagner.
  • Des titres descriptifs
    Selon un sondage réalisé par WebAIM en 2009 sur l’utilisation faite des lecteurs d’écrans, 50% des personnes interrogées utilisent la fonctionnalité qui leur permet de naviguer d’un titre à l’autre lorsqu’ils cherchent une information. C’est leur manière de « lire en diagonale », d’où l’importance d’utiliser le bon marquage, et de choisir une formulation qui décrira le contenu qui correspond à cette section.
  • Des liens descriptifs

    De la même manière qu’un utilisateur de lecteur d’écran peut lister tous les titres d’une page, il peut aussi lister tous les liens qu’elle contient. 16% des personnes interrogées dans le même sondage utilisent cette fonctionnalité. Il est donc important de choisir la formulation de chaque lien avec soin, pour qu’il ait du sens une fois sorti de son contexte. Il faut éviter à tout prix les libellés de type « cliquer ici » ou « en savoir plus ».

    Une méthode possible est de rajouter dans un span caché des internautes voyant une partie du lien : Par exemple considérons le lien suivant :

    <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_Web">
    en savoir plus <span class="lecteurDecran"> sur l'accessibilité du web</span>
    </a>

    Dans la feuille de style, définissons un style qui masquera à l’écran le texte contenu dans le span, mais le laissant « visible » pour les lecteurs d’écran :

    .lecteurDecran {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px); }

    Dans cet exemple, les personnes utilisant un lecteur d’écran entendent la totalité du lien, au lieu de seulement « en savoir plus » qui ne veut rien dire une fois sorti de son contexte. Cependant, les personnes utilisant un navigateur classique ne voient que « en savoir plus » à l’écran.

  • L’importance des listes
    Les listes sont très utiles car les lecteurs d’écrans annoncent le nombre d’items qu’elles contiennent avant de les énoncer. Ne pas oublier de créer des listes pour les menus de navigation. En fait, les listes sont assez fréquentes et elles ne doivent pas nécessairement être accompagnées de puces ou des numéros à gauche.Une petite astuce consiste à se poser la question suivante : est-ce un titre ou un paragraphe ? Si la réponse est négative, il y a de grandes chances pour qu’il s’agisse d’une liste.
  • Mettre les contenus importants en haut de page
    Dans le code HTML, il est préférable de mettre le contenu important avant les contenus contextuels ou secondaires. Les lecteurs d’écrans lisent les pages de haut en bas, il est donc logique de leur présenter les contenus importants en premier. Pour les internautes voyants, on se sert de CSS pour placer les différents contenus où on le souhaite sur la page.
  • L’attribut ALT
    Toutes les images qui ne sont pas des images de fond (ces dernières sont définies dans les feuilles de style), doivent impérativement avoir un attribut ALT. Si ces images sont purement décoratives cet attribut doit être laissé vide. De cette manière, le lecteur d’écran l’ignorera totalement.
    Si en revanche une image apporte du sens, le texte contenu dans l’attribut devrait être descriptif mais bref. 77% des utilisateurs de lecteurs d’écrans veulent savoir qu’une photo représente une jeune femme qui sourit, contre seulement 12.8% qui préféreraient que ce genre d’image soit totalement ignorée par le lecteur d’écran. Ce type de visuel peut apporter une information sur le ton et l’image de marque d’une entreprise par exemple.
  • La conclusion en premier
    Pour chaque paragraphe, il est conseillé de résumer le contenu de celui-ci dans la première phrase, pour que l’utilisateur de lecteur d’écran soit en mesure de décider s’il souhaite continuer à lire ou passer à une autre partie de la page. Tous les utilisateurs bénéficieront de ce style d’écriture.
  • Des titres de pages descriptifs
    Le titre de la page web est le premier élément que lit un lecteur d’écran, c’est pourquoi il est essentiel qu’il soit pertinent et descriptif.

Une multitude de déficiences et de handicaps

Nous nous sommes focalisés sur les utilisateurs non voyants utilisant des lecteurs d’écrans, mais il existe bien d’autres profils d’utilisateurs handicapés auxquels il faut penser.

Selon une étude publiée en 2004 sur les handicaps (Mise à jour du 18/04/2012), il y a en France environ 12 millions de personnes souffrant d’un handicap, à des degrés très variés. Cela correspond à environ 15% de la population. De plus, ces chiffres ne prennent pas en compte des déficiences assez répandues qui ne sont pas des réellement des handicaps, mais qu’il faut tout de même inclure dans la problématique de l’accessibilité web. Il y a par exemple le daltonisme (8% de la population), la dyslexie (10% de la population) et l’épilepsie (environ 1% de la population).

Pour faciliter l’expérience de ces utilisateurs ainsi que de tous les autres, on peut ajouter quelques règles pour les phases de conception et de design :

  • Utilisation de contrastes forts

    Le contraste entre le texte et la couleur de fond doit être important pour être facile à lire. De plus, il est recommandé d’utiliser des fonds clairs avec du texte foncé plutôt que l’inverse pour les sites avec beaucoup de contenu.

    Il existe plusieurs outils en ligne pour vérifier que l’on a fait un bon usage des couleurs, comme Check my colours et Contrast-A

  • Utilisation des couleurs avec parcimonie
    Il peut être tentant, pour le web designer débutant, d’utiliser une palette chromatique large, cependant trop de couleurs peuvent nuire à la lisibilité de la page et distraire l’oeil. De plus, éviter les associations de couleurs telles que le rouge avec le vert car les daltoniens auront des difficultés à discerner les deux.
  • Eviter à tout prix les animations rapides et répétitives
    Avez vous essayé de lire un article avec plein de bannières de publicité animées à côté ? C’est très pénible pour beaucoup d’utilisateurs. Autant que possible, il faut éviter ces animations rapides et répétées. Si vous devez mettre de la pub sur une page, préférez des versions statiques ou des animations lentes et qui s’arrêtent au bout de quelques secondes.

Conclusion

Rendre un site web accessible, ce n’est pas très difficile, il y a quelques bonnes habitudes à prendre mais une fois qu’elles font parties de nos méthodes de travail, on ne peut pas dire qu’il y ait un travail supplémentaire à fournir.

Cependant l’accessibilité devient plus difficile à implémenter lorsqu’il s’agit d’applications internet riches plutôt que de simple sites web. En effet, celles-ci utilisent souvent des éléments de javascript et de AJAX qui permettent de rafraîchir une partie de la page seulement. D’autre part, ces applications comportent généralement des formulaires qu’il faut savoir intégrer correctement afin qu’ils soient accessibles. Nous explorerons ces domaines dans un prochain article.

Ressources utilisées pour la rédaction de cet article

Rétroliens

  1. […] un précédent article sur l’accessibilité nous avons vu qu’il était facile de créer un site accessible s’il est assez simple. […]

Exprimez vous!

*