L’accessibilité Web A11Y

Accessibilité

(Pour voir les liens de cet article dans un nouvelle onglet faites un clic droit.)

Petit rappel l’accessibilité du web, qu’est ce que c’est?

L’accessibilité web est le fait de rendre disponible l’information (tant textuelle que visuelle ou sonore), contenue dans une page web, à toute personne souffrant de handicap. Les handicaps peuvent être lourds ou légers, permanents ou ponctuelles, ils peuvent être de tout ordre, mentaux, moteurs, ou encore liés à l’age. Les personnes handicapées doivent avoir également la possibilité d’interagir avec le site comme le ferait toute personne valide.

Pour faire simple quelques exemples:

  • Une personne aveugle ou mal-voyante doit avoir un accès à l’information contenu dans une image.
  • Une personne sourde doit pouvoir connaitre l’information véhiculée par la bande sonore d’une vidéo.
  • Une personne souffrant de handicap moteur doit pouvoir naviguer aisément sur un site.

Les recommandations.

Les recommandations d’accessibilité ont étaient définies par la Web Accessibility Initiative (WAI) appartenant au World Wide Web Consortium (W3C) au travers des Web Content Accessibility Guidelines (WCAG). La première version de ces recommandations date de 1999, la seconde (celle en vigueur actuellement) date quant à elle de 2008. Ici le lien vers la traduction en français des WCAG 2.0 sur le site de braillenet.

Pour en savoir plus, je vous recommande de visiter la page Wikipédia sur l’accessibilité, et si vous souhaitez revenir sur les bases vous pouvez aisément consulter l’article les bases de l’accessibilité web que j’ai écris sur le sujet il y a de cela quelques mois.

Aller plus loin dans la compréhension.

Afin de se rendre compte de l’importance du sujet, il est important de comprendre les difficultés rencontrées par les personnes handicapées. Le web vu par une personne handicapée par braille.net

Comment se mettre en position de handicap.

  • Débranchez votre souris et naviguez à l’aide de votre clavier.
  • Coupez vos haut-parleurs et tentez de comprendre une vidéo.
  • Désactivez les images (à l’aide de la developper toolbar de Firefox).
  • Zoomez ou dézoomez le texte d’une page web.

En effectuant ces simples actions vous pouvez avoir un aperçu rapide de ce que peuvent ressentir certaines personnes en surfant. Pour se faire une petite idée en France près de 12 millions de personnes seraient concernées par l’accessibilité. Vous pouvez également essayer les outils d’aide aux personnes à handicap comme les lecteurs d’écran par exemple, je vous recommande NVDA téléchargeable gratuitement ICI.

Et le daltonisme?

Le daltonisme touche plus de 8% de la population masculine et près de 1% de la population féminine en Europe occidentale. Plusieurs formes de daltonismes existent, la Deuteranopie, la Protanopie, la Tritanopie…

Dans le tableau suivant j’ai appliqué une désaturation aux couleurs afin de se rendre compte du rendu qu’une page peut avoir pour un daltonien, même si en réalité il en sera différemment, cela reste tout de même une méthode assez efficace.

Images en couleurs Images en niveau de gris
Teintes, luminosités, saturations différentes  image test daltonnisme 1, 3 formes de couleurs  image test daltonnisme 1_1, 3 formes en niveau de gris
Teintes différentes, luminosités et saturations identiques  image test daltonnisme 2, 3 formes de couleurs  image test daltonnisme 2_1, gris uni
Teintes différentes, luminosités et saturations identiques  image test daltonnisme 3, 3 formes de couleurs  image test daltonnisme 3_1, gris uni
Teintes et luminosités identiques, saturations différentes  image test daltonnisme 4, 3 formes de couleurs  image test daltonnisme 4_1, 3 formes en niveau de gris
Teintes et saturations identiques, luminosités différentes  image test daltonnisme 5, 3 formes de couleurs  image test daltonnisme 5_1, 3 formes en niveau de gris

Sans rentrer dans une analyse détaillée, nous constatons tout de même l’extrême importance de sélectionner des couleurs avec des luminosités et saturations différentes. Des formes de couleurs très distinctes peuvent être quasi invisible voire même totalement dans certain cas. Pour le daltonien le contraste prime.

Voici un lien vers un testeur de contraste, une ressource indispensable, pour avoir une idée du contraste entre 2 couleurs et ainsi savoir si elles sont accessibles.

Maintenant que vous avez compris le principe regardez les 2 images qui suivent, je pense que vous remarquerez rapidement laquelle offre une meilleur accessibilité.

Ps: toute ressemblance avec des produits informatiques existants ne serait pas du tout fortuite.

image représentant 3 rectangles à l'intérieur desquels se trouvent des formes différentes rappelant les boutons de fermeture des fenêtre de Windows

image représentant 3 ronds de couleurs rouge, jaune et vert rappelant les boutons de fermeture des fenêtre de Mac

Outre le contraste l’autre chose qui peut vous aider à rentrer en conformité au niveau de l’accessibilité pour les daltoniens, les formes. Les pictogrammes, ayant une signification qu’il est facile d’interpréter, favorisent grandement la compréhension.

Plus généralement.

Quelques recommandations.

  • On ne le répètera jamais assez respecter les standards et la sémantique des balises html.
  • Donnez des textes alternatifs à vos images et vidéos. Exemple
  • Si possible sous-titrez vos vidéos.
  • Optimisez la navigations au clavier sur vos sites.
  • Utilisez des players vidéo permettant la navigation au clavier.
  • Si vous employez des mots dans une autre langue que celle définie pour votre page html, utilisez l’attribut lang pour aider la compréhension lorsque l’internaute utilise un lecteur d’écran. Exemple
  • Faites de la veille, documentez vous, soyez responsable.

Quand travailler l’accessibilité?

Dès le début, afin de réduire les coups de mise en conformité et de réduire la charge de travail. Il serait vraiment impensable, une foi le projet finalisé, de revenir tester le contraste des couleurs, d’ajouter des textes alternatifs ou des focus

Êtes vous obligé de rendre votre site accessible?

Par exemple en France L’article 47 de la loi du 11 février 2005 (dont j’ai brièvement abordé le sujet dans mon précèdent billet) rend la mise en conformité aux normes d’accessibilité obligatoire pour les sites web des institutions. Il faut espérer qu’un jour cette loi s’adresse à chaque site ou mieux encore dans un monde idéal que chaque site soit conforme sans aucunes obligations légales. Vous pouvez également visiter le site de l’institut pour l’accessbilité numérique (IAN).

Malheureusement la question de l’accessibilité reste pour beaucoup un sujet mineur voire inexistant. Qu’il en soit ainsi pour les personnes n’ayant pas de contact direct avec ce milieu soit, mais vous « web worker » soyez conscients, prenez la en compte car elle fait partie intégrante de votre travail, et soyez en l’ambassadeur. Il y a quelques mois j’ai eu une discussion sur le sujet avec un soit-disant graphiste sur un forum, demandant des conseils afin d’améliorer son site, je lui ai fait remarquer que son site n’était malheureusement pas du tout accessible et qu’il devrait donner des alt à ses images, faire un vrai menu et essayer de prendre en compte certain critères de base. La réponse qu’il m’a fournie m’a franchement refroidie, la voici


« Si je puis me permettre c’est un book en ligne, il s’adresse à un monde professionnel. Je conçois qu’il ne puisse pas être vu par tous c’est un choix. »

Au delà du fait que sa réponse démontre qu’il considère qu’une personne ayant une déficience quelconque ne peut pas faire partie du « monde professionnel », venant de la part de quelqu’un qui a la prétention de se définir comme « pro » je trouve cela honteux. Si vous pensez comme cet individu, le seul conseil que je vous donnerais c’est de changer de métier et de devenir pécheur de poulpe! Les recommandations ne sont nullement des contraintes surtout lorsque l’on sait qu’il est même défini que si une mise en conformité coute trop cher ou qu’elle n’est pas applicable à cause de problèmes technologiques elle peut être ignoré.

Je pense que la moindre avancé dans le sens d’une mise en conformité aussi minime soit-elle est une excellente chose.

Et avec un client?

Vous pouvez être assuré qu’à coup sûr votre client tentera de réduire les coûts du site, et il y a de fortes chances que la première chose qu’il décidera de faire passer à la trappe sera l’accessibilité si tant est qu’au départ il a accepté de l’inclure dans le devis. Pour vous aider à lui faire intégré la mise en conformité à l’accessibilité dans la réalisation, prenez note de la discussion fictive suivante.

Pas bien Bien
Client Bonjour, pouvez vous me faire un devis, je souhaite avoir pour mon entreprise un site internet.
Vous Bonjour Monsieur, tout à fait alors voila le devis

  • Conception graphique = 1600 euros
  • intégration = 1800 euros
  • Référencement = 2400 euros
  • conformité aux normes d’accessibilité = 2100 euros
  • Total = 12400 euros hors taxes
Client Excusez moi mais l’accessibilité, qu’est ce que c’est?
Vous Et bien il s’agit de rendre votre site accessible aux personnes ayant un handicap afin de leur faciliter la vie sur internet. C’est très important de prendre en compte ces personnes vous comprenez il n’ont pas la vie facile alors si on peu les aider. Et bien ce travail consiste à rendre votre site conforme aux normes en vigueur, de plus outre le simple fait de favoriser l’accès aux personnes handicapées et vous offrir un bonne réputation auprès du publique. Cela peut tout de même vous apporter de 20 à 30% de trafic supplémentaire, ce qui n’est pas négligeable pour augmenter le chiffre d’affaire d’un site marchand comme le votre. Une autre chose importante les moteurs de recherche sont aveugles, et ce travail aide grandement le référencement.
Client Oui je comprend, mais vous savez ce publique ne fait pas vraiment partie de notre cœur de cible, vous pouvez laisser ça de côté ça ne nous intéresse pas. Effectivement ce n’est pas une chose à négliger, n’hésitez pas à tout faire dans ce sens.
Résultat Défaite Victoire

Pour en savoir plus.

En plus des références déjà citées dans cet article, voici une liste de ressources indispensables:

      • Je vous recommande vivement d’aller jeter un œil sur le site de Temesis des experts en accessibilité francophones, et plus précisément sur cette page où se trouve 2 vidéos d’un webinar très intéressant sur les RGAA.
      • Un autre site indispensable est celui de Paris-Web vous y trouverez énormément de compte-rendus de leurs conférences et même des vidéos sur le sujet dont voici un exemple: je veux un vrai sous titrage.
      • Un site de référence sur l’accessibilité à consulter absolument celui d’accessiweb, portez un intérêt particulier à la page du référentiel.
      • Les WCAG étant assez complexes, vous pouvez consulter sur le site d’Opquast les documents intitulés Accessibility First Step, une liste de 81 erreurs en accessibilité, et Accessibility Second Step une liste de 49 actions risquées. Ces 2 références, à l’initiative de Temesis, étant énormément plus synthétiques elles se trouvent être beaucoup plus assimilables, néanmoins elle ne constituent que les bases à prendre en compte. Opquast : les bonnes pratiques 2010
      • Pour vous faire une idée du niveau de respect des normes d’accessibilité d’un site vous pouvez utiliser le validateur toujours sur le site d’Opquast.
      • Sur twitter vous pouvez jetez un œil aux personnes que je follow bon nombre sont des experts accessibilité ou web en général.

Exemples de code.

<li> Utilisez des <span lang="en">players</span> vidéo permettant la navigation au clavier. </li>

<img alt=« image représentant 3 rectangles à l’intérieur desquels se trouvent des formes différentes rappelant les boutons de fermeture des fenêtre de Windows » src=« rectangles.png » />

En conclusion.

Le sujet étant important et comme je ne suis pas un spécialiste de la question,  je suis ouvert à tout commentaire pouvant permettre de compléter ou de corriger cette article. N’hésitez pas  apporter votre aide. Pour ma part j’essaye (dans la limite de ce que ce petit blog.wordpress me permet) de faire en sorte de prendre ne compte ces questions et de corriger mes erreurs.

RodLeg

7 réflexions au sujet de « L’accessibilité Web A11Y »

  1. Matthieu Faure

    Bel article de synthèse pour un sujet aussi vaste que l’accessibilité !
    Sur le référentiel AccessiWeb, beaucoup de développeurs et de chefs de projet l’apprécient aussi pour sa structure « orientée implémentation ».
    Et pour compléter le sujet des outils, tu peux vérifier l’accessibilité d’un site avec Tanaguru, le logiciel libre, ou directement le service en ligne http://www.tanaguru.com si tu n’as pas le temps de l’installer.
    Bienvenue dans le monde passionnant de l’accessibilité !
    Matthieu

    Répondre
    1. Rod Leg Auteur de l’article

      Merci pour ton commentaire et pour tes compléments, je ne connaissais pas Tanaguru je vais le rajouter à ma boite d’outil ;-) .

      Rodleg

      Répondre
  2. Ping : Les bases de l’accessibilité web | Rod-Leg

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s