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.

Découpe-fr.net Victime du succès

ryuran — Tue, 26 Jun 2007 23:13:00 +0000

Il y a de plus en plus de commandes sur Découpe-fr.net [fr]. Ça devient dur pour le peu de codeurs que nous sommes. Alors que Nous avons chacun d'autres projets en cours. Voilà quelques découpes que j'ai récemment réalisées pour la communauté. Si ça vous intéresse lisez la suite. J'ai ajouté les difficultés rencontrées.

Végéto93 studio

Le résultat

Aucune difficulté particulière à part les boutons avec effet au passage de la souris. Le script Lightbox 2 [en] est plutôt facile à installer. (j'utilise shadowbox)

Crowd

http://www.crowd.fr/

Le résultat

Plutôt simple. J'ai découvert qu'on ne peut pas mettre un chiffre en tant que class ou id d'une balise xhtml sinon le css ne fonctionne pas.

YDBP

Le résultat

Celle là était plutôt sympathique à découper. Les positionnements changeaient un peu par rapport aux découpes habituelles. Les difficultés rencontrées sont celle qu'on a habituellement avec les éléments flottants et les différents navigateurs.

Regardez comment est codé le header ! Je me suis amuser sur ce détail.

Conclusion

J'aimerais savoir si vous avez des commentaires à faire ou si vous auriez fait différemment. Est-ce que vous voyez des erreurs ou des truc à me reprocher ?

Tout ce travail m'empêche de penser à mon blog que je dois remettre à neuf cet été.

Ryuran.info - xhtml

Initiation à l'accessibilité

1/ La validation xhtml

2/ La sémantique

3/ L'interopérabilité

4/ Scripts

5/ Les objets

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

7/ Où trouver d'autres informations ?

Les sites les plus importants.

Des articles intéressants :

Découpe-fr.net Victime du succès

Végéto93 studio

Crowd

YDBP

Conclusion