Aller au contenu | Aller au menu | Aller à la recherche

Blog Accessibilité

lundi 17 septembre 2007

Tags accessibles pour DotClear 1.2.7

Après le passage à la version 1.2.7 de Dotclear, les tags ne fonctionnaient plus.

C'est Cédric Blancher qui nous propose un joli patch pour remettre tout ça d'aplomb.

Liens à consulter:

Merci Cédric !

samedi 7 avril 2007

OpenOffice et synthèse vocale Jaws

Sébastien Delorme a cherché à utiliser OpenOffice (la suite bureautique libre) avec la synthèse vocale Jaws. Il a résumé les étapes (simples somme toute) pour y arriver dans un billet : Windows, Open Office et Jaws.

Merci Seb pour ce travail de synthèse et de pédagogie !

mercredi 10 janvier 2007

Boursorama: Les champs rouges sont obligatoires

Pour ne rater aucun épisode, merci de commencer par Veuillez cliquer ici pour lire la suite !

Aujourd'hui, nous allons voir si la Bourse s'ouvre à nous, direction Boursorama.

Situation de départ

Je souhaite m'inscrire pour participer aux forums, et arrive sur le formulaire d'inscription de Boursorama

Formulaire d'inscription de Boursorama

On nous précise que les champs à saisir obligatoirement sont en rouge.

Le problème

Je ne distingue pas les couleurs (daltonisme ou autre), comment je fais pour savoir quels champs remplir ?

Formulaire d'inscription de Boursorama (couleurs désactivées)

La solution

La solution est toute simple: indiquer par une astérisque (marque textuelle) les champs obligatoires.

L'astérisque sera visible qu'on voit ou non les couleurs. Cela nous donnerait comme phrase d'introduction: Les champs suffixés d'une astérisque (*) sont obligatoires On pourra éventuellement mettre en rouge la phrase, dans ce cas ce n'est plus génant, puisque cela vient en plus de l'astérisque.

Et on n'oubliera pas d'ajouter l'astérisque juste après l'intitulé du champs (nom, prénom..) et pas après la zone de saisie.

Et voila, nous avons validé le critère 3.1 (L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?)

vendredi 6 octobre 2006

Tags accessibles dans dotclear

MAJ 17/09/2007: tags accessibles pour dotclear 1.2.7

Après la publication du plugin twTags 0.2.2 pour Dotclear, voici un petit tutorial sur la configuration des tags dans Dotclear

Résumé rapide:

  1. installer le plugin Métadonnées de billet
  2. installer le plugin twTags
  3. configurer l'interface d'ajout de tags
  4. configurer son thème pour l'affichage des tags dans le billets
  5. configurer son thème pour l'affichage du nuage de tags

Précaution

Avant de modifier un fichier, faites-en une copie de sauvegarde ;)

installation du plugin Metadonnées de billet

Installation du plugin twTags

Configuration de l'interface d'ajout de tags

Dans le dossier "ecrire" de dotclear, modifier le fichier poster.php. Juste au dessus des commentaires (ligne 527 chez moi), ajouter la ligne :

include(dirname(__FILE__).'/tools/twtags/poster-inc.php');

Affichages des tags dans un billet

  • La commande pour afficher les tags est <?php twTags::show(', ', true); ?>. Le premier paramètre est le séparateur des tags, le deuxième affiche (ou non) les tags technorati
  • ajouter cette commande dans le fichier list.php de son thème. Pour ma part, je l'ai mise juste après le nombre de commentaires et rétroliens ; ça donne ça :
               <p class="post-info-co">
                       <a href="<?php dcPostURL(); ?>#co" title="commentaires pour : <?php dcPostTitle(); ?>">
                       <?php dcPostNbComments('aucun commentaire','un commentaire','%s commentaires'); ?></a>
               <span>::</span>
                       <a href="<?php dcPostURL(); ?>#tb"title="trackbacks pour : <?php dcPostTitle(); ?>">
                       <?php dcPostNbTrackbacks('aucun trackback','un trackback','%s trackbacks');?></a>
               <span>::</span>
                       Tags: <?php twTags::show(', ', true); ?>
               </p>
  • faire de même dans le fichier post.php. Chez moi, juste après </div><!-- class="post-content" --> (ligne 40), ça donne ceci:
       <div class="post-tags">
       <p>Tags: <?php twTags::show(', ', true); ?></p>
       </div><!-- class="post-tags" -->

Affichage du nuage de tags

Pour cela deux étapes: 1) modifier le fichier template.php 2) modifier les CSS dans style.css.

Dans le fichier template.php, ajouter dans la sidebar:

<div id="nuageMotsCles">
     <h2>Nuage de tags</h2>
     <?php twTags::tagCloud($levels = 5, $block ='<ul id="tagcloud">%s</ul>',$item = '<li class="level-%2$d">%1$s</li>'); ?>
</div>

Dans le fichier style.css, ajouter:

/* Tags cloud
------------------------------------------ */
#tagcloud ul {
margin:0;
padding:0 1em;
display:block;
}

#tagcloud li {
display:inline;
margin: 0 .1em;
padding: 0;
background-image: none;
}

#tagcloud li.level-1 { font-size: 1em; }
#tagcloud li.level-2 { font-size: 1.3em; }
#tagcloud li.level-3 { font-size: 1.6em; }
#tagcloud li.level-4 { font-size: 2em; }
#tagcloud li.level-5 { font-size: 2.3em; }
 
#tags {
text-align: right;
}

Et voilà, tagguez bien :)

Plugin twTags 0.2.2 pour Dotclear

MAJ 17/09/2007: tags accessibles pour dotclear 1.2.7

Je publie ici la version 0.2.2 du plugin twTags pour dotclear (avec l'accord de Steve, son ancien mainteneur).

Cette nouvelle version comporte des modifications pour améliorer le niveau d'accessibilité du code HTML généré. Au menu, on trouve:

  • un alt et title pertinent pour l'image des tags technorati
  • un title pertinent pour les tags locaux
  • un title pertinent pour les liens du nuage de tags

Voici donc le lien pour télécharger le plugin Dotclear twTags 0.2.2 au format pkg.

MAJ 09/10/2006: et aussi le lien pour télécharger le plugin Dotclear twTags 0.2.2 au format tar.gz.

mercredi 4 octobre 2006

Publication de KiwiAccess version 0.52

Un mot pour annoncer la sortie de la version 0.52 de KiwiAccess, le plugin pour améliorer l'accessibilité de dotclear.

Au menu, quelques légères corrections:

  • correction d'une erreur de localisation (certains textes en anglais alors que le blog est en français)
  • correction d'un conflit avec le plugin "fil d'ariane" (alias dcQuickNav)

Téléchargement:

Et pour la route, la page d'accueil du projet KiwiAccess.

samedi 23 septembre 2006

KiwiAccess, le plugin pour améliorer l'accessibilité de dotclear

C'est avec un certain plaisir que je vous annonce la sortie de KiwiAccess, le plugin pour améliorer l'accessibilité de dotclear.

KiwiAccess, ça fait quoi ?

Trente secondes de remise en contexte avant d'entrer dans le vif du sujet. Comme on l'a déjà vu, l'accessibilite n'est pas une fonctionnalité mais un processus. De fait pour rendre un site accessible, il convient d'intervenir à différents niveaux. On trouve classiquement trois grandes étapes: l'outil de gestion de contenu, les gabarits de page accessibles, et le contenu. C'est sur ce dernier point que KiwiAccess intervient.

KiwiAccess offre une aide au bloggueur soucieux de l'accessibilité de sa prose :) Pour cela, il automatise les vérifications des points suivants:

KiwiAccess c'est qui derrière ?

KiwiAccess est un travail collaboratif effectué avec Sébastien Delorme et Jérôme Mulsant, qui ne sont autres que les lauréats des Trophées AccessiWeb 2006 avec leur blog tentatives-accessibles.eu, ainsi que votre serviteur.

KiwiAccess c'est libre ?

Maa ben sûr que oui quelle idée ! KiwiAccess est un logiciel libre placé sous licence GPL.

Au passage, on vous encourage à installer ce plugin et nous dire ce qui vous plait, ce qui ne va pas, ce que vous aimeriez avoir dedans. Si c'est du libre, c'est bien pour qu'on puisse tous en profiter ;) . D'ailleurs, cette version est utilisable mais manque encore de fonctionnalités à nos yeux; fonctionnalités qui vont arriver dans les prochaines versions.

Notre but premier était de publier une toute première version utilisable, en suivant un des adages fondateur du logiciel libre: Distribuez tôt, mettez à jour souvent (in La cathédrale et le bazar, de Eric Raymond).

KiwiAccess ça se télécharge où ?

Pour l'installation, il suffit de copier le lien vers le .pkg et de le coller dans l'interface d'administration de dotclear, section Outils > Gestionnaire de plugin puis Installer un plugin.

Pour ensuite y accéder, il faut se rendre dans la section Outils (toujours dans l'interface d'administration), puis de cliquer sur Kiwi. La page présente alors le résultat des tests.

KiwiAccess ça ressemble à quoi ?

Voici quelques copies d'écran:

Titre trop long

Copie d'écran KiwiAccess: titre trop long

Lien trop long

Copie d'écran KiwiAccess: lien trop long

Et maintenant, bonne accessibillité :)

PS: pour les quelques personnes qui ont installé une version antérieure du plugin, il faut la désinstaller avant de placer la nouvelle.

jeudi 21 septembre 2006

Daltonisme, accessibilité et webdesign: deux outils incontournables

Je travaille en ce moment sur le daltonisme, et je tenais à vous parler de deux outils. Ils ne sont pas mentionnés dans le dossier daltonisme (je ne les connaissait pas à l'époque) et ils me semblent incontournables.

  • Colorblind Web Page Filter permet de simuler le rendu d'une page selon un type de daltonisme donné (deuteranope, protanope...). Sa grande qualité par rapport à un classique comme VisCheck, c'est de très bien gérer les images, y compris celles appelées par les CSS. Exemple pour le Blog Accessibilité:

copie d'écran du Blog Accessibilité vu en daltonien

  • Color Simulation Controls offre un nuancier de couleur vu selon un type de daltonisme. L'intérêt ? Pouvoir créer une charte graphique spécifique pour personnes daltoniennes sans pour autant l'être soi-même !

Copie d'écran du "nuancier daltonien"

Et pour la route, un rappel des deux critères d'accessibilité relatifs aux couleurs:

  • critère 3.1: L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?
  • critère 3.2: Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?

mardi 19 septembre 2006

Publication de "Evaluer l’accessibilité d’un site web, partie 1"

L'excellent site Pompage (dont le but est de traduire en français des articles de référence), vient de publier la première partie de l'article Evaluer l’accessibilité d’un site web. C'est très bien fait, synthétique, efficace, et je vous en recommande chaudement la lecture !

jeudi 27 juillet 2006

Accessibility Toolbar pour Opera: essai marqué mais pas transformé

On connaissait déjà la barre d'outils accessibilité pour IE dont j'avais déjà parlé dans le billet Web Accessibility Toolbar pour IE version 1.2.

Les internautes n'ayant pas IE à leur disposition (comme votre serviteur sous Firefox/Linux Mandriva) se réjouiront de disposer maintenant d'une version multi-plateforme grace à la WAT for Opera.

Comme j'avais pu le constater lors de la sortie de la version 1.2, les fonctionnalités sont sympas mais existent déjà en extensions firefox, libres qui plus est ; je pense à web developper extension et accessibility extension.

La seule fonction qui me manquait était la transformation d'une page en niveaux de gris qui opérait même sur les images (ça c'est fort), et en plus en mode offline (déconnecté). Manque de chance cette fonction n'existe pas dans le portage pour Opera, et a été remplacée par un appel à un service web (GrayBit) qui ne fonctionne donc pas en mode déconnecté, et en plus ne gère pas le accents.

Conclusion: les réjouissances ont été de courte durée et je suis un peu chagrin face à cet outil.

lundi 3 juillet 2006

Conférences Ajax et Accessibilité

Voici les diapos de la conférence Ajax et Accessibilité que j'ai donnée lundi dernier lors du séminaire technique Accessiweb.

Séminaire au cours duquel Aurélien, Jean-PIerre et Sylvie Duchateau (BrailleNet) ont aussi présenté un intéressant état de l'art sur WCAG2.

jeudi 22 juin 2006

Ajaxessibilité du web

Encore un titre facile que j'ai honteusement repris sur le billet Ajaxessibility de BestKungFu.

Avec l'ami Jean-Pierre, nous préparons le prochain séminaire technique Accessiweb sur AJAX et l'accessibilité. Je ne sais pas si tout rentrera dans les diapos, alors mieux vaut que ça déborde un peu ici par avance. Voici donc quelques impressions non-ordonnées.

A la lecture de la littérature anglophone, je suis surpris de constaster que l'accessibilité d'AJAX n'est traitée que sous l'angle du handicap visuel. AMHA c'est une vision excessivement réductrice de la démarche d'accessibilité qui, rappellons-le, est un processus (et non une fonctionnalité) traitant tous les handicaps, quelquesoit leur nature et leur graduation.

Dans le cas particulier d'AJAX, je suis surpris de n'avoir trouvé de référence au handicap cognitif. Pour ce type de handicap, il est important de proposer une interface, une navigation, une "expérience" qui, tout le long de la visite, soit cohérente, persistante, stable et prédictible. Si un fragment de la page est modifié, ceci constitue un élément pertubateur pour l'internaute, au même titre qu'une popup ou qu'une gif animée "giryphardesque".

Autre ressenti, on a l'impression que personne n'ose trop prendre position sur le sujet. Et bien, on va le faire de suite. A la question "AJAX est-il accessible ?", ma réponse est claire "non, AJAX n'est pas accessible... cependant...". Il convient d'être très clair sur ce point, avec un outil il est possible de faire n'importe quoi, AJAX ne déroge pas à la règle. Nous verrons lundi les quelques (rares ?) cas où on peut faire de l'AJAX qui passe une certification Label AccessiWeb.

PS: le séminaire est réservé aux Experts AccessiWeb, mais les diapos seront mises en ligne afin que chacun puisse en profiter.

jeudi 16 février 2006

Gabarits full-CSS accessibles

Il était temps que j'en parle: les gabarits full-CSS accessibles sont en ligne !

Résumons-nous. Un certain 19 décembre 2005, lors du 3° séminaire technique AccessiWeb, le compère Aurélien et moi-même avons présenté un atelier sur les gabarits de page CSS accessibles. L'idée de ces séminaire est partager nos compétences entres experts, et aussi de les diffuser sur la toile. Voici donc livré au plus grand nombre ces fameux gabarits.

Voici leurs caractéristiques:

  • utiliser un doctype strict
  • être conforme à la grammaire utilisée, i.e. passer le validateur HTML
  • ne pas utiliser de tableaux de mise en page, i.e. être full-CSS
  • ne pas générer de chevauchement de texte, i.e. être résistant à l'agrandissement de texte (CTRL-+ dans Firefox)
  • passer un label AccessiWeb Or ce qui implique entre autres
    • faire en sorte que les CSS respectent l'ordre du code HTML (critère 10.3)
    • utiliser des tailles relatives, tant pour les textes que pour les colonnes (critère 10.4)

Le pari, qui n'était pas gagné d'avance, a donc été relevé. On espère que ces gabarits vous seront utiles pour vos design, et qu'on contribuera ainsi à l'élargissement de la connaissance en matière d'accessibilité.

NB: il n'y a pas de droit d'auteur sur ces gabarits, nous les publions dans le domaine public (on n'a pas inventé l'eau chaude non plus !), maintenant si vous avez envie de faire un lien vers l'un de nos sites, ça fait toujours plaisir :)

vendredi 3 février 2006

Nouvelles photos libres d'aides techniques

Après les photos d'aide technique prise lors du séminaire Accessibilité à la médiathèque de Chambery (une plage braille Alva, une imprimante braille, un clavier à grandes lettres et une machine à écrire braille), voici deux nouvelles photos d'aide technique:

Une plage EuroBraille avec clavier spécial

Plage Braille avec touches spéciales

Une plage EuroBraille avec clavier complet

Plage braille avec clavier complet

Toutes ces photos sont sous licence libre Creative Commons BY-SA, c'est à dire que vous pouvez les utiliser de manière commercial ou non, en précisant l'auteur et la licence. Je n'ai pas mis de restriction commerciale volontairement pour aussi inciter les professionnels à s'en servir (du moment qu'ils respectent la licence évidemment :) ). Elles sont même en pleine résolution pour obtenir une impression de qualité.

Alors dans le plus pur esprit libre, n'hésitez pas à réutiliser !

Toutes les photos d'aides techniques sont rangées dans la catégorie Aides Techniques de WikiMedia

mercredi 18 janvier 2006

Abbréviations: la triplette gagnante ?

La triplette gagnante pourrait être une traduction hasardeuse de l'article The Accessibility Hat Trick: Getting Abbreviations Right sur ALA.

A mon goût, cet article pose un jalon dans le monde de l'accessibilité dans le sens où, comme pour le webdesign, on commence à utiliser des hacks pour arriver à nos fins. On entend par hack, l'utilisation d'erreurs d'implémentation des "agents utilisateurs", qu'il s'agisse de navigateurs graphique ou pas, et c'est bien là la nouveauté.

L'auteur nous propose une technique pour présenter de manière "correcte" les abréviations/acronymes. La manière "correcte" correspond selon lui à trois points:

  • proposer une comptabilité ascendante (gérer IE 6 et les vieilles versions de Jaws)
  • proposer une compatibilité descendante (gérer IE 7, et les navigateurs compatibles XHTML 2.0)
  • présenter l'information au plus haut niveau d'accessibilité.

La technique repose globalement sur le fait de combiner un tag ABBR et un tag A, avec un zeste de CSS.

Comme toute nouvelle technique, elle présente une réelle avancée mais n'est pas sans soulever certaines remarques (voir les commentaires de l'article). Et comme très souvent en matière d'accessibilité, elle n'est pas binaire et demande de bien saisir la portée de ce qu'on fait. En résumé, ce n'est pas une recette de cuisine tout prète.

L'article est assez long, mais très instructif. Par ailleurs, les applications de cette techniques sont intéressantes:

  • phrases étrangères
  • jargon
  • chiffres romains

Au final, une fois bien intégrée, cette technique constitue un bon outil à suivre de près !


Le Blog Accessibilité est le blog professionnel de Matthieu Faure, expert en accessibilité et fondateur de Open-S, prestataire global en accessibilité numérique

Conformité XHTML Strict et CSS.