Soyons ouvert, soyons Accessibles

Faire un site c’est bien,on partage, on communique de l’information et on fait participer l’internaute quand il s’agit du Web 2-0. Seulement internet  est un monde où chaque internaute est différent, où il a sont propre navigateur internet, sa propre résolution d’écran, sa propre plateforme et ses propres plug-in. Dans ce monde il est difficile de concevoir un site qui réponde à toute les configurations possibles, mais on peut s’en approcher et c’est le concept de l’Accessibilité.

Je vais vous présenter les différents moyens de tester votre site afin de chercher si il est bien accessible au plus grand nombre et quels sont ses points faibles. Nous parlerons des navigateurs mais aussi de l’accès aux personne déficientes (visuelle, moteur, … ) afin que votre site respecte la norme WCAG ou WAI.

Savez vous qu’en mars 2010 Internet Explorer 6 est encore utilisé par 9% des internautes et 13% pour IE7? (source) Avez vous déjà vu votre site en résolution 600*800 ? Avec Flash ou Javascript désactivé ? Où même sans souris ? Nous allons voir ici les différents moyen d’y remedier. Pourquoi ? Parce qu’un site accessible est d’une part plus visité, et d’autre part pour une question de respect des internautes.

Tester un site sur plusieurs navigateurs internet :

Vous ne souhaiter pas installer le panel IE7, Firefox, Opera, Chrome et Safari ? Pas de problème, tout peut se faire en ligne.
Sachez d’abord que pour Firefox il y a le module IE Tab qui donne l’aperçu sous Internet Explorer.
Pour Windows il existe le logiciel IE-Tester, qui teste le site avec les moteurs IE5.5, IE6, IE7 et IE8.
Vous pouvez aussi tester votre site sur IE  (5.5 à 8) sur l’outil en ligne IE NetRender.
Mais la palme d’or revient au site Browser Shot qui teste sur un très grand panel de navigateur et de version avec même les configuration (écran, flash, …) un MUST ! (Attention le test pour durer plusieurs heures si vous choisissez tout).

Tester sous Lynx :

Lynx c’est un très vieux navigateur internet (et non la dernière monture de chez Ubuntu). Sa particularité est qu’il est en mode texte, c’est à dire qu’il ne charge pas les images, ni la mise en forme, toute la navigation se déroule dans un terminal. Plus grand monde ne l’utilise, mais il faut savoir que les spider (outil de référencement par les moteur de recherche) l’utilisent et qu’il est pratique pour avoir une vue axé contenu de son site. Il est utilisé pour sa vitesse, autant le chargement du logiciel que celui de la page).

Il est disponible sous de nombreuse plateformes sur le site de Framasoft. Mais l’outil en ligne LynxView permet aussi d’avoir un aperçu de votre site, en mode texte.

Visualiser un site en 600*800 ou sur un écran mobile (PDA, Smartphone, …) :

Pour ceci on va utiliser la Web Developper Toolbar, une extension disponible sous Firefox et Chrome.
Dans le menu [Redimensionner] il y a l’option [800*600].
Et dans [Divers] il y a l’option [Rendu sur petit écran].

Désactiver le Flash et le Javascript :

Là il faudra tester sur un navigateur où les options ne sont pas activées. En effet la WDT vous permet de voir le Javascript mais ne peut pas le désactiver.

Les normes (X)HTML/XML et CSS du W3G :

Histoire du W3G :

Le World Wide Web Consortium a été fondé en 1994 par Tim Berner Lee fondateur principal de l’URL, de l’HTTP et de l’HTML. Il veille a la mise en place et au respect de standards concernant les technologies comme l’HTML, le CSS, XML, PNG mais aussi SOAP ou XSLT. Elle est à l’origine de la Web Accessibility Initiative qui cherche à développer l’accessibilité à tous de l’Internet.

L’outil de vérification en ligne :

Le W3C propose des outils afin de vérifier que vos documents (HTML, CSS, …) respectent bien les normes.
L’outil en ligne concernant le CSS et le HTML.
Notez que l’outil est incorporé à la Web Developper Toolbar via le menu [Outil].

Un point pour l’accessibilité aux personnes déficientes :

Les problèmes courants :

  • Visibilité réduite (taille du texte)
  • Mauvaise interprétation des couleurs et contrastes (menu, bannière)
  • Temps de lecture (diaporama)
  • Absence d’affichage des images
  • Sourdité

D’un point de vue légal :

Votre site a tout les droits de ne pas respecter les normes du W3C et de n’être aucunement accessible (c’est triste à dire). Il faut cependant savoir que tout les sites du gouvernement français ou d’organismes public (région, département, commune, …) doivent respecter le référentiel général d’accessibilité pour les administrations (RGAA).

Quelques solutions :

La taille du texte :

A l’aide de script Javascript vous pouvez aisément donner le pouvoir à l’utilisateur de changer la taille de la police pour faciliter la lecture. Cependant veillez à ce que le grossissement de la police ne détériore pas votre site et sa mise en page.

La taille de l’écran :

En utilisant des valeurs relatives, c’est à dire l’unite % dans la déclaration CSS.
Pour plus d’information je vous laisse consulter les articles concernant ce domaine sur AlsaCreation.

Quelques recommandations en vrac :

  • Afin de ne déranger personne avec des couleurs et un contraste peu élevé (police beige sur fond bleu clair) vous pouvez mettre au point un second CSS avec un très bon contraste et donner à l’utilisateur le choix de sélectionner celui qu’il souhaite. comme sur CSSZenGarden.
  • Il doit y avoir des titres h1, h2 …
  • Vous pouvez utiliser les fonctions Javascript on-key-over afin de rendre possible la navigation sans souris.
  • Le tout flash doit être proscrit.
  • Toute les images doivent avoir un attribut alt et une description (normes (x)HTML)
  • Les vidéo et animation doivent pouvoir être stoppées, remises au début ou mises en pause.
  • Lors d’un discours vidéo ou audio le discours doit être disponible en format texte.
  • Le temps de réponse de l’internaute ne doit pas être pris en compte.
  • Il ne dois pas y avoir plus de trois flashs.
  • La langue de destination d’un lien doit être bien visible (description) tout autant que les liens.
  • L’ouverture d’une fenêtre ne doit pas surprendre l’utilisateur.
  • Deux liens pointant sur la même page doivent avoir le même nom
  • Les acronymes et abréviations doivent être spécifiée (balises HTML respectives)
  • Et un plan de site c’est bien !

Des outils pour tester l’accessibilité :

Le site CynthiaSayWave (existe aussi en module Firefox)

Quelques liens :

Le guide AccessiwebLe site Web-pour-tousPlusieurs outils du W3C

Ce que j’ai souvent lu c’est une remarque globale : L’information essentielle ne doit pas être accessible que pour certains mais pour tous.  Vous as désormais les outils pour regarder de plus près votre site, et faire un pas en avant vers le respect de l’internaute différent –

Publicités

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