terrylaire
terrylaire

Rendre son blog plus accessible à tous

Comment rendre mon blog plus accessible aux aveugles ? La question s'est posée à moi après avoir testé l'outil mis à disposition par mon IUT d'informatique qui a recruté cet année un aveugle ! Le but de cette note est de vous montrer pourquoi un blog karmaOS n'est pas des plus faciles à parcourir pour un aveugle, et comment améliorer ça très rapidement.

Votre blog, vu par un aveugle

Pour surfer sur internet, les aveugles utilisent un outil appelé lecteur d'écran, dont voos devinez aisément la fonction. Alors que vous prenez en compte des critères comme la couleur, la grosseur ou la taille des caractères pour définir l'importance et la place des phrases dans le contexte, le lecteur d'écran ne se fie qu'aux balises html, censées donner ses informations. Il les restitue vocalement à l'auditeur, précisant le rôle de ce qu'il lit dès que possible. Il vous dira donc des choses comme "j'entre dans une liste", "Je lis un titre", "je lis une citation", "je lis un lien", ce qui améliore la compréhension générale du texte lu mais ralentit fortement la lecture... En outre, le lecteur d'écran ne voit pas le placement en colonnes sur les pages, il lit tout linéairement, dans l'ordre où c'est écrit dans le fichier html.

Si vous êtes sous Firefox, vous pouvez avoir un aperçu de n'importe quelle page telle que vue par un lecteur d'écran : Cliquez sur Affichage, puis Style de la page, et enfin Aucun style. Vous pouvez alors remarquer quelque chose sur Karmaos : après avoir lu le haut de la page, le lecteur verra la colonne de gauche, puis après l'avoir parcourue, il rencontrera la colonne de droite, et enfin, après avoir lu tout ça, il arrivera au contenu interessant du blog, les notes ! Et si un lecteur d'écran vous lisait ça, vous auriez vite marre des colonnes et aimeriez passer au contenu directement... Et bien c'est possible, ça prend 2 secondes et ça restera invisible !

Envoyer les aveugles au contenu, et rendre les autres aveugles à l'astuce

Pour permettre aux utilisateurs de lecteur d'écran d'aller directement lire les notes, nous allons simplement leur créer un lien vers les notes. Et ensuite, on maquillera tout ça (proprement) pour rendre le lien invisible.

Nous allons placer le lien qui emmène au contenu tout en haut de la colonne de gauche, dans un widget HTML. Ajoutez donc un widget HTML à votre colonne, et amenez-le en haut. Modifiez son contenu, et mettez-y cela :

<a href="#content" title="Allez au contenu" accesskey="c">Aller directement au contenu</a> (raccourci : touche c).

Nous avons ainsi placé un lien qui envoie vers le contenu, que vous pouvez tester : avec le style normal de la page, la page descendra un peu lorsque vous cliquerez, sans aucun style, elle passera visiblement par dessus la colonne. Tant qu'on y était, on en a profité pour ajouter une "accesskey", c'est à dire un raccourci clavier. Selon le navigateur, une petite manipulation de clavier vous permet de suivre ce lien sans cliquer dessus. Sous Firefox, c'est Alt + Majuscule + la touche.

Deuxième étape, on va effacer ce vilain widget HTML tout pas beau !

Pour cela, il faut trouver de numéro qui identifie ce widget. Ouvrez le code source de votre page (Ctrl + U sous Firefox) et cherchez le widget que vous venez d'ajouter. Au dessus de son titre, vous trouverez plusieurs balises contenant son numéro, par exemple box_1515, ou box_show_admin(1515)...

Filez alors dans l'édition de votre feuille CSS, et ajoutez y (en modifiant le numéro selon le cas) :

div.column li#box_1515 {display: none;}

Et votre widget disparait ! Mais ce n'est  heureusement qu'une apparence, et pour les lecteurs d'écran (qui oublient le CSS), le lien est toujours là ! Si vous voulez revoir votre widget, enlevez les lignes de CSS que vous venez d'ajouter.

Si vous voulez tester le système, il est mis en place sur ce blog. Tentez un affichage sans style et un Alt + Majuscule + c (si vous êtes sous Firefox...) !

Pour aller un peu plus loin, vous pouvez lire les quelques règles d'accessibilité que s'est fixé le site Alsacréations.

T_L | 3/25/2008
KarmaOS