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.

Après l'ouverture d'un n-ième blog sur Karmaos, voilà quelques nouvelles (ou pas !) suggestions destinées au Grand Manitou à propos de la plateforme...

• Pouvoir éditer l'en-tête du blog, que tout le modne fasse péter son énorme bannière !
• En tant qu'auteur, pouvoir voir dans la liste des derniers commentaires les comm's pas encore validés
• Depuis la page d'un tag, pouvoir accèder à la page de ce tag sous une de ses classes. Par exemple sur /tag/Java, avoir un lien vers /tag/Programmation:Java et /tag/Musique:Java
• Dans TinyMCE, le bouton "gras" met des balises <b>...
• Pouvoir supprimer (renommer au moins) les images dans TinyMCE
• Passer le HTML au validator, mais là je deviens vraiment chiant !

Depuis la précédente note, il est toujours impossible de modifier directement le bloc d'en-tête de son blog pour y coller le code HTML qu'on veut. Pour ajouter une simple abnnière avec un lien vers l'accueil dessus, reportez-vous à la note précédente. Mais si vous voulez ajouter autre chose qu'une simple bannière, du genre une petite accroche, une barre de navigation, ou le temps qu'il fait chez vous, il faut pouvoir ajouter du code HTML ! C'est là qu'entre en jeu javascript, et accrochez-vous bien pour aller au bout de ce guide !

Javascript permet de modifier à peu près n'importe quel bloc de la page à partir de n'importe quel autre endroit de la page. C'est ce que nous allons faire. On va fournir le code HTML que l'on veut ajouter dans le bloc d'en-tête à notre javascript, et il va se charger de le placer.

Première étape, faire son HTML. tapez-le, récupérez-le, volez-le à un camarade, faites ce que vous voulez, mais venez avec un code HTML. Pour une sombre histoire (sans doute carcérale) de chaines et d'échappement inhérente à Javascript, il faut que vous remplaciez dans votre code tous les guillemets, les apostrophes et les antislash, afin de placer devant eux un antislash. Clairement :
" devient \"
' devient \'
\ devient \\
Note : D'incroyables bijoux de technologies tels que le bloc-note de Windows sont capables de faire ces remplacements en 2 secondes. Fouillez donc "Edition/remplacer" ;)

Votre code HTML est prêt ! Il faut maintenant l'insérer dans le javascript qui va l'utiliser et là le code ne s'invente pas, le voici :

<script type="text/javascript" language="javascript"> document.getElementById('head').innerHTML = maFonctionQuiRenvoieLeCodeHTML(); function maFonctionQuiRenvoieLeCodeHTML() { codeHTML = " Entrez entre ces guillemets le code HTML à insérer dans l'en tete de votre page, en faisant bien attention de mettre un antislash devant les guillemets, apostrophes et antislashs "; return codeHTML; } </script>

Insérez donc votre HTML à l'endroit indiqué. Sauvegardez ce javascript quelque part, pour pouvoir le modifier sans problèmes. Ajoutez ensuite à votre blog un Widget HTML, dans lequel vous collez ce javascript. Sauvegardez, et admirez !

Enfin, faisons disparaitre le Widget tout moche qu'on vient d'ajouter. Votre widget possède un numéro unique, que vous pouvez trouver dans le code source de votre page. Ouvrez dans Firefox le menu Affichage > Code source de la page, et cherchez votre javascript, il doit se trouver dans le bas de la page de code... Juste au-dessus de ce javascript, vous devez voir quelques lignes avec plusieurs fois le même numéro, souvent entre parenthèses avec devant des mots du genre box_show_admin... Ce numéro est le numéro de votre widget. Imaginons que ce soit 42. Ajoutez alors dans votre CSS :

#column #box_42 {display: none;}

Le widget disparait, et votre page est propre ! Pour éditer votre javascript, et donc votre en-tête, vous devez supprimer ces lignes du code CSS, pour que le widget réapparaisse. Ouvre son interface de modification (en cliquant sur le point d'interrogation qui s'affiche lorsqu'on passe sur le titre du widget), et ollez-y votre javascript modifié. Notez qu'à chaque fois que vous voulez modifier le contenu du widget, celui ci a disparu ! C'est un bug dû au javascript, et c'est pour ça qu'il est important de sauvegarder son javascript avant de l'envoyer sur le blog.

Pour le moment, il n'est pas possible de modifier directement l'en-tête de son blog. il contient la petite image du blog, son titre, et sa description, point. Impossible d'y mettre une grande image qui sert de bannière ou une barre de navigation, par exemple, comme on pourrait le souhaiter. Le Suprême qui s'occupe de faire évoluer KarmaOS a dit que ça allait venir, mais en attendant, si vous le voulez bien, on va mettre les mains dans le cambouis.

Si vous voulez seulement ajouter une bannière en haut de votre blog, comme sur le blog de Matys on va "simplement" modifier le CSS de votre page. Hé, mais revenez, c'est simple ! Si vous voulez ajouter une barre de navigation ou des trucs plus bizarres encore, comme sur Culture Kaamelott va falloir jouer au javascript, mais aussi regarder la note suivante ! Ajoutons d'abord une bannière seule.

L'espace que prend votre blog en largeur mesure initialement 760px. Pour votre bannière, vous devriez donc avoir une image de cette largeur, ça sera plus beau.

Imaginons maintenant que votre bannière mesure 200 pixels de hauteur (et 760 de largeur). Il faut agrandir l'en-tête de votre blog afin que la bannière soit entière et ne dépasse pas sur vos notes. Nous allons faire cette modification et ajouter la bannière. Ajoutez à la feuille de style CSS de votre blog cette ligne :

#head {height: 200px; background: url(http://votreblog.karmaos.com/Image/votrebanniere.jpg);  padding: 0;}

Ainsi, nous fixons la hauteur de l'en-tête à la hauteur de la bannière (height: 200px;), et nous précisons que le fond de l'en-tête est l'image qui se trouve à l'url http://votreblog.karmaos.com/Image/votrebanniere.jpg. Bien sûr, modifiez cette URL en la remplaçant par celle de votre bannière. Dernière chose, nous disons au bloc d'en-tête de se coller à son contenu (padding: 0;).

Déjà en sauvegardant, vous pouvez admirer votre bannière ! Reste que les éléments qui étaient là avant elle restent par dessus ! On va leur signaler qu'ils ne sont plus les bienvenus :

#head img, #head p, #head h1 {display: none;}

Et voilà, vous avez une belle bannière !

Mais j'en entends qui râlent, "et mon lien vers la page d'accueil, il ne marche plus !". C'est vrai, mais c'est réparable ! A la place de ce que vous avez ajouté à la dernière étape, ajoutez plutot ceci :

#head img, #head p {display: none;}
#head h1 {opacity: 0;}
#head h1 a {display: block; height: 200px; width: 760px;}

Dans ce code, on efface l'image et la description du blog, comme avant. Par contre, on laisse le titre du blog (#head h1), mais on lui dit d'être totalement transparent (opacity 0;) ! Vous ne le voyez pas, mais il est toujours là, et le lien qu'il porte (#head h1 a) aussi ! on dit ensuite à ce lien de s'afficher comme un bloc (display: block;), et de prendre la même taille que l'image (height: 200px; width: 760px;). Ainsi, le lien recouvre l'image sans qu'on ne voie le texte !

Ch'est bieau, non ?!

Encore quelques suggestions concernant karmaos (visiblement, ce blog n'a aucune vocation à part discuter de la plateforme...) :

• Remplir les balises Meta des documents HTML (Terry, tu ne penses donc qu'à ton nombre de lecteurs ? - Mais non, mais non !), d'autant qu'on fournit un titre et une description au blog dans les configs...
• Ajouter une classe au conteneur qui contient "hébergé par karmaos". Je demande ça parce que sur mes blogs, il ne se voit pas bien, mais en fait je vois bien que c'est pas une bonne idée, parce qu'on pourrait du coup l'enlever facilement...