CSS : Vérifier l'accessibilité de votre site pour les déficients visuels : 1re approche

Une personne ayant un handicap visuel peut accéder à internet via différents outils permettant de pallier à son handicap. Lorsque vous concevez un site, ayez toujours à l'esprit dans l'écriture du code que ce type d'internaute "voit" votre site avec les yeux d'un "spider" (tel googlebot).

Pour débuter je vous propose de lire cet article de l'INJA, "L'ergonomie des interfaces à l'usage des publics déficients visuels" : http://www.inja.fr/inja/htmgen/SimHTMLGen.asp?STYLE=2&URL=%2Fpages-infos%2Fpages%2Finformations_generales%2Factualites%2Farchives%2F2003%2Fdefi_informatique%2F12ernu.xhtml

Il vous faut donc vous assurer en premier lieu d'une compatibilité maximum avec les standards du W3C. Et surtout, veillez respecter à la lettre la valeur "sémantique" et hierarchique des balises ! Ensuite, il vous faudra vous assurez que les couleurs utilisées présentent un contraste suffisant pour être correctement distinguées par un déficient visuel. Enfin sachez que les déficient visuels n'ont souvent pas de souris à leur disposition, oubliez donc l'utilisation d'événements javascript impliquant la souris (onMouseOut, etc.)

D'autre recommandations peuvent être utiles, tels que :

• ne jamais utiliser de taille de police fixe (en px par exemple)
• mettre en place des accesskey dans les formulaires, etc.

Si vous souhaitez établir un diagnostic de l'accessibilité de votre site pour les personnes ayant un handicap visuel, voici une liste d'outils permettant de travailler dans ce sens. Ne sont mentionnés ci-dessous que les outils disponibles en ligne (il en existe d'autres à télécharger gratuitement ou pas).

- Service Ocawa :
Il semble le plus connu des site de test d'accessibilité en langue française. Attention toutefois : le nombre d'audits par mois est limité...
http://www.ocawa.com

- Le validateur d'accessibilité de l'APINC (Association pour un internet non commercial) :
http://validateur-accessibilite.apinc.org/

- Enfin pour finir, les extensions de Firefox :
Web Developpeur Toolbar : https://addons.mozilla.org/fr/firefox/addon/60
Firefox Accessibility Extension : http://firefox.cita.uiuc.edu/index.php

Comments

[Guyrus]

J.ai vérifié l'accessibilité de cette page sur http://www.ocawa.com que tu suggère et l'on a trouvé plusieurs lacunes importante, des erreurs de débutant. Pas de texte alternatif pour les images et trop peu de contraste rendant la lecture difficile même pour les personne ayant une bonne vison. Cordonnier mal chaussé ...

[Pol]

Thanks for this. Good reading (should be obvious for most) nice that its been addressed.
Admin Cnet

[mac]

hello
Votre tuto sur les déficients visuels , franchement vous devriez regarder le votre, la couleur orange sur du blanc c'est illisible franchement relou