Le blog qui se cherche

Rendre son blog plus accessible à tous

devnul@devnul.com (Terry Laire) — Tue, 25 Mar 2008 19:33:35 +0100

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 :

Aller directement au contenu (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.

Le bureau des pleurs ouvre de nouveau

devnul@devnul.com (Terry Laire) — Wed, 27 Feb 2008 21:12:21 +0100

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 ...

Pouvoir supprimer (renommer au moins) les images dans TinyMCE

Passer le HTML au validator, mais là je deviens vraiment chiant !

Une bannière, et pour 50 francs je vous rajoute ce que vous voulez !

devnul@devnul.com (Terry Laire) — Fri, 09 Nov 2007 18:48:22 +0100

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 :

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.

Une bannière géante en haut de son blog !

devnul@devnul.com (Terry Laire) — Fri, 09 Nov 2007 17:44:31 +0100

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 des mots, toujours des mots

devnul@devnul.com (Terry Laire) — Sun, 28 Oct 2007 16:43:24 +0100

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...

Suggestions, Tome 2

devnul@devnul.com (Terry Laire) — Sat, 25 Aug 2007 20:59:13 +0200

Une deuxième salve de questions et de remarques à propos de karmaOS...

Question : Est-ce que les commentaires pourront être ouverts aux non-inscrits à karmaOS ?

Suggestion : Sur la page d'accueil de karmaOS, il pourrait y avoir un système pour trouver tous les (ou juste les derniers) posts taggés par un certain mot. Pour pousser le truc, il pourrait y avoir un nuage de tags sur la page d'accueil, complet ou basé sur une certaine période...

Remarque : le widget "Derniers blogs actifs" ne fonctionne visiblement pas...

Reloutage : Ca serait si beau d'avoir accès aux gabarits HTML...

0ème anniversaire

devnul@devnul.com (Terry Laire) — Tue, 07 Aug 2007 00:49:19 +0200

Eh oui, c'est le zéroième anniversaire de ce blog ! Ca se fête avec un smiley MSN de gâteau, non ?!

Bon, ce blog juste pour tester KarmaOS... Quelques remarques en vrac après une toute petite exploration (edit : la liste s'est finalement allongée au fur et à mesure des découvertes) :

L'administration sans une grosse interface depuis la page d'accueil, c'est "surréaliste mais sympathique". La question est : est-ce qu'un simple bloc pourra contenir l'ensemble des fonctionnalités que propose traditionnellement un serveur de blog ?

Faute de frappe dans "Mes infos" : il est écrit "Indentification"

Quand on clique sur configs ou css du widget "ce blog", celui-ci disparait, on ne peut pas naviguer entre les rubriques d'administration... Cela s'explique peut-être dans la vision "Un login pour tout créer", mais je ne vois pas encore comment...

On peut éditer la feuille CSS du blog, mais sans voir la page html, ce qui est impossible... (edit : je ne savais pas que les id et les class des div étaient visibles dans le HTML final...)

Super bon point, la création des url ! Note 1 : /post/1 ; note 2 : /post/2 ! Simple, efficace et humain !

Pas encore de décompte de commentaires, mais ça ne saurait tarder..

L'accent de "août" donne un point d'interrogation chez moi (Firefox 2.0.0.5)

Je ne sais pas où il va chercher qu'il est 16h41 quand je poste à 16h09... !

A ce propos, quand on édite une note, même si les champs date et heure sont remplis, il l'enregistre à "maintenant". Et j'ai pas testé à la création d'une note...

Pour forcer à rafraichir (sous Firefox en tout cas), c'est Ctrl + F5, et pas Shift comme écrit sur la page de gestion CSS.

Problème d'implantation des skins : quand t modifies la couleur des box, tu modifies aussi #column a:hover pour l'assortir à a couleur de la box. Mais #column .tag_cloud_body a:hover est aussi affecté, et les tags en nuage et les derniers blogs se retrouvent avec une couleur de fond quand la souris passe dessus. Il faut donc recopier les propriétés de #column .tag_cloud_body a:hover dans la feuille de style du blog lors du choix d'un skin...

Et enfin, c'est un peu austère, quand même, ces barres horizontales pour encapsuler le titre du blog, des notes... Ca contraste avec les widgets qui font tout à fait modernes... Néanmoins, avec la possibilité de modifier le CSS -et qui sait bientot le html ?-, je ne doute pas qu'on pourra ré-arranger à l'envi le design !

Tout ceci étant dit sans aucune méchanceté ni aucune attente de ma part, le créateur de karmaOS gère sa plateforme comme il l'entend... En revanche, s'il y avait une fonctionnalité à réclamer, je choisirais le RSS, afin de pouvoir suivre l'ami Orteil !