Initiation à l'accessibilité

ryuran — Thu, 02 Aug 2007 14:33:00 +0200

Varouj m'a demandé des informations sur
l'accessibilité des sites Internet. Je me suis donc rendu compte que sur découpe-fr c'est un sujet dont on parle peu et qui pourtant est important. Je rédige donc cet article pour rappeler des souvenirs à certains et en informer d'autre.

Je vais commencer par vous montrer un site qui n'a aucun rapport avec le codage car il sert à apprendre le japonais mais qui à pris toutes les mesures importantes pour être le plus accessible possible : Rapport d'accessibilité de CrapulesCorp

Tous les liens de cette page sont utiles mais je vais en rapeller certains dans la suite de ce billet.

1/ La validation xhtml

La première chose pour une bonne accessibilité d'un site internet c'est que le html soit valide. Pour vérifier si c'est le cas il y différentes solutions.

La première et la plus simple est le validateur officiel du W3C [en] (Il est en anglais ça risque d'en géner certains). Celui de W3C quebec est en français.

Ça c'était la solution à l'ancienne mais il y a mieux : L'extention "HTML VALIDATOR" Firefox [en] (oui c'est encore en anglais, un jours il faudra bien que vous l'appreniez). En plus de valider le xhtml d'origine il vérifie le html généré par les scripts (javascript) ainsi que les différents niveaux de normes d'accessibilité WCAG du WAI (à régler dans les options). Vous vous rendrez compte que Google Adsence génère à lui seul 28 avertissements xhtml c'est pour ça que je me refuse à l'utiliser sur mon blog.

2/ La sémantique

Quel un mot compliqué ! En gros c'est le sens du contenu. Ha ça reste encore flou !

Enfait on pourais utiliser les balises pour leur effet visuel par exemple :

<p>liste de chose : </p>
truc<br/>
machin<br/>
bidule<br/>

Ça, c'est incorrect car le sens sémantique des balises est mauvais. Une balise <br/> c'est un saut de ligne. Ça ne sert pas pour une liste. Si on corrige ça correctement ça devrait donné ça :

<p>liste de chose : </p>
<ul>
<li>truc</li>
<li>machin</li>
<li>bidule</li>
</ul>

<ul> est bien la balise qui indique une liste et <li> indique un élément d'une liste. c'est sémantiquement plus correct Car les balise on un sens correct. Aucun validateurs ne peut voir une erreur sémantique et la bonne utilisation des balise reste un choix subjectif mais il reste évident qu'un paragraphe n'est pas un titre.

3/ L'interopérabilité

Encore un mot compliqué ! Sa définition est des plus simple. L'interopérabilité d'un site internet c'est le fait qu'il fonctionne correctement avec tous les navigateurs.

Fonctionner correctement c'est pouvoir accéder à toutes les information du site quelque soit le navigateur et les plugins que l'on a.

C'est assez difficile à mettre en oeuvre. Le plus dur c'est quand on utilise des scripts ou des objets nécessitants un plugin.

Il faut toujours prévoir un texte alternatif. (attribut alt="..." pour les images). Si l'image ne s'affiche pas on doit pouvoir comprendre son sens. Si l'image est juste là pour un soucis d'esthétique (ça ne devrait pas être le cas, le CSS est là pour ça), il faut mettre un attribut alt vide alt="".

Si vous voulez vraiment y aller à fond voici la liste de tout les navigateurs [en].

Si vous voulez une capture d'écran de votre page vu par différents navigateurs sur différents systèmes d'exploitation aller voir le site Browsershots.org [en] (on l'utilise assez souvent sur découpe-fr).

On ne devrait pas trouvé sur internet : Site optimisé pour Internet Explorer 7.0 avec une résolution 1024x768 ou Site optimisé pour Firefox 2.0 avec une résolution 800x600 c'est totalement absurde on ne va pas changer de navigateur et de résolution à chaque fois qu'on change de site.

C'est au site de s'adapter aux différents visiteurs et pas l'inverse.

4/ Scripts

Utiliser des scripts ce n'est pas anti-accessible c'est des fois même un bon point mais il faut que le site soit tout de même utilisable en désactivant Javascript.

Le script Lightbox (Slimbox, Tickbox et autres) par exemple qu'on utilise de temps en temps pour les Folios n'empêche pas un fonctionnement normal des pages si on désactive javascript.

Les texte du genres il faut activer javascript pour voir le contenu de la page, ça ne devrait pas exister sur le web.

Pour testez vos script et les déboguer je vous conseil (en plus de DomInspector de Firefox) l'extention Firebug.

5/ Les objets

J'appelle objets les élément qu'on insère dans une page web avec la balise <object> donc les élément Flash et autres. La il n'y a pas 50 solution pour les rendre accessible. Comme les images il faut un texte alternatif mais là, il n'y a pas d'attribut alt="...".

<object type="application/x-shockwave-flash" data="http://www.ryuran.info/post/2007/08/02/..." height="..." width="...">
<param name="movie" value="...">

<p>Là un texte alternatif. Il peut-être aussi long que souhaité</p>

</object>

Évitez de mettre de télécharger le plugin. Si le navigateur est capable de supporter le plugin il le proposera lui-même à l'utilisateur. Sinon c'est que le navigateur est incapable de supporter ce plugin ou que l'utilisateur se refuse à le télécharger alors lui demander de faire un truc qu'il ne veux pas faire ou qu'il ne peut pas faire c'est stupide.

6/ Les outils d'aide à la validation d'accessibilité

Il n'éxiste pas de validateurs d'accessibilité mais des outils d'aide à la validation. L'accessibilité c'est u point de vue humain, il ne faut donc pas prendre ce que disent ces validateurs au pied de la lettre. L'extension HTML Validator de Firefox que l'on a cité précédemment peu déjà faire une vérification des 3 niveaux de normes d'accessibilité WCAG du WAI.

Mais pour moi, le meilleur validateur pour l'accessibilité c'est Ocawa qui propose aussi une toolbar pour Firefox (il y en a d'autres mais celui-là est bien complet et surtout francophone).

7/ Où trouver d'autres informations ?

Les sites les plus importants.

Openweb.eu.org: Les nouvelles sur l'accessibilité. Le menu à droite est très intéressant car il pointe sur des articles d'autres blogs qui traitent du sujet.
Pompage.net: C'est surement une des meilleure source d'information francophone sur le bon codage d'un site internet. Les articles sont très biens détaillés.
Opquast.com: Le site sur les bonnes pratiques d'internet.
Alsacreations.com: Ce site est déjà connu par beaucoup d'entre vous. Il y a de nombreux articles sur l'accessibilité.

Des articles intéressants :

(n'hésitez pas à lire les commentaires qui sont aussi très instructifs)

Si vous avez des commentaires ou des infos à ajouter n'hésitez pas.

Attente des 2 en versions stable.

ryuran — Sun, 12 Nov 2006 13:48:00 +0000

J'attends avec impatience FireFox 2 et Dotclear 2 en version stable. J'espère que ça va arriver vite. J'ai pas envie de me risquer sur les bêta vu que les versions précédentes me suffisent pour l'instant.

Vu les nouveautés de Dotclear 2 je vais pouvoir m'occuper de plus en plus de mon blog avec plaisir. Et si toutes les extensions que j'utilise pour FireFox sont adapté pour FireFox 2 ce serait l'apothéose.

Web Developer 1.0 pour FireFox en français

ryuran — Sat, 07 Jan 2006 17:07:00 +0000

L'extension Web Developer pour FireFox à été récemment traduite en français. À télécharger sur joliclic.free.fr [fr]

J'utilisais déjà la version 9.4 en français mais je ne suis pas déçu de passer à la version 1.0. Il y a de nombreux outils supplémentaires.

Pour les utilisateurs de measurit, cette extension est dorénavant comprise dans Web Developer ainsi qu'un outil pour tracer des repères sur la page.

Moi qui utilisait beaucoup l'outil cssEdit, maintenant il y a aussi htmlEdit qui est très pratique pour corriger un code html d'une page boguée d'un membre de la liste des Pompeurs et de lui renvoyer le code corrigé. Plus besoin de la télécharger pour l'ouvrir sur notepad++, on fait la correction sans quitter FireFox.

Bon développement!

Ryuran.info - Firefox