Aussi avons-nous cherché une solution nous permettant de rendre accessible notre weblogue.

Après avoir décrit les principes de l’accessibilité, nous essaierons de dégager des solutions pour WordPress

Considérations générales sur l’accessibilité

Rendre un site accessible, c’est permettre sa consultation non seulement par des déficients visuels ou moteurs (sans compter les handicapés auditifs, cognitifs ou neurologiques), mais aussi par des internautes disposant d’une connexion en bas débit assurée par Rtc ou par Gsm. Enfin, c’est respecter la navigation et prendre en compte les différences linguistiques. La connaissance de ces contraintes et des solutions correspondantes permet de mieux concevoir ses pages au bénéfice de l’ensemble de ses visiteurs.

Accessibilité pour les déficients visuels

Les déficients visuels correspondent aux mal-voyants, daltoniens et aux aveugles. Pour les mal-voyants, il faut autoriser un redimensionnement du texte en utilisant des tailles de police proportionnelles. Idéalement, il faudrait que l’ensemble des valeurs des feuilles de style soient exprimé en valeurs relatives, par exemple avec l’unité em. Le contraste doit être suffisant entre les entre couleur de texte et couleur de fond pour les daltoniens.

Quant aux non-voyants, ils utilisent des lecteurs Braille. JavaScript ne peut servir à naviguer ou à informer, sans équivalents textuels. Autrement exprimé, le langage JavaScript ne doit ajouter qu’une fonctionnalité supplémentaire mais ne jamais la remplacer. Pour la même raison, les textes ne peuvent être affichés sous la forme d’images. Les images doivent être légendées avec les balises alt et title ; lorsque les images ne sont pas significatives, c’est-à-dire décoratives, les balises peuvent être laissées vides.

Il faut utiliser Css et la sémantique Xhtml en renonçant à l’usage de tableaux pour la mise en page, hormis pour la présentation de données. Pour ne pas pas entretenir la confusion, un lien hypertexte doit s’ouvrir dans la même fenêtre. Il convient de préciser dans le lien hypertexte la langue utilisée, lorsque la ressource est dans une langue différente de celle du texte ; à cet effet, on utilise dans l’appel du lien une balise de forme pour un document en anglais. Enfin, la signification des acronymes doit être précisée, car elle est lue par les lecteurs Braille.

Afin de valider l’accessibilité de son site pour les déficients visuels, la solution la plus probante consiste à utiliser un navigateur en mode texte : si chaque information est affichée, la conception du site est correcte.

Accessibilité pour les handicapés moteurs

Comme les handicapés moteurs ne peuvent recourir à une souris, il faut envisager une navigation spécifique. À cet effet, le concepteur d’un site peut prévoir que la navigation s’opérera à l’aide la touche tabulation du clavier : chaque lien hypertexte (ou entrée de formulaire) est affecté d’une valeur tabindex. Prenons la valeur tabindex= »3″ : depuis le haut de la page, trois appuis sur la touche tabulation donneront le focus à ce lien, qui s’ouvrira en pressant la touche Entrée. Pour informer le visiteur de la valeur, il suffit de l’indiquer dans la balise title du lien. Lorsqu’aucun tabindex n’est défini dans la page, l’appui sur la touche tabulation permet en principe de naviguer de lien en lien, du haut en bas de la page.

Une autre solution passe par la mise en œuvre de raccourcis claviers (ou Accesskeys) : l’utilisateur appuie sur une combinaison de touches pour parvenir à l’information souhaitée. Cette solution, séduisante en théorie, n’est pourtant pas la panacée. En effet, les raccourcis clavier demandent des contorsions digitales à un utilisateur handicapé ! Ensuite, même lorsqu’ils sont reconnus par les agents utilisateurs, les raccourcis clavier peuvent entrer en conflit avec les raccourcis implémentés dans ces navigateurs. Pour cette raison, le nombre d’Accesskeys est fort limité. Le gouvernement britannique fournit des directives d’accessibilité en proposant les raccourcis claviers suivants :

• S – passer la navigation
• 1 – accueil
• 2 – actualités
• 3 – plan du site
• 4 – recherche
• 5 – foire aux questions
• 6 – aide
• 7 – procédure de plainte ou contact
• 8 – conditions d’utilisation
• 9 – retour d’information
• 0 – liste des raccourcis clavier

Ainsi, pour utiliser le raccourci clavier 0, il suffira d’ajouter au lien la valeur Accesskey= »0″.

10/08/2007.

Depuis la rédaction de cet article, nous avons découvert NextGen Gallery d’Alex Rabe… auteur de Wp-Table ! En fait, nous sommes retourné sur son site, car nous nous étions aperçu que la présence de deux tableaux sur la même page avec un identifiant unique invalidait notre code Xhtml par le W3c ! Notre visite de ce matin nous a permis de résoudre ce souci… définitivement !

Nous reviendrons prochainement sur le Plugin NextGen Gallery. En attendant, et plutôt que supprimer cet article, nous modifions légèrement le texte suivant et en supprimons les images, car il peut donner des idées d’application de Wp-Table à des utilisateurs de WordPress.

</addendum>

Dans notre quête du weblogue idéal, nous nous sommes penché sur la création d’une galerie d’image avec WordPress Nous avons testé (presque) tous les modules d’extension proposé sur WordPress, sans y trouver notre bonheur : soit leur présentation ne nous convenait pas, soit leur fonctionnement était erratique.

Nous nous sommes souvenu alors de nos premiers pas avec Html… En effet, avant de maîtriser les feuilles de style, nos mises en page étaient basées sur des tableaux sans bordures. Ainsi étions-nous sûr de voir les éléments de notre page affichés à l’endroit prévu. Cette technique de présentation est aussi valable avec les logiciels de traitement de texte.

Certes, le recours à des tableaux est discutable, comme le démontre avec talent Mathieu Pillard d’Openweb, mais… faute de grives, on mange des merles.

Nous avons donc cherché dans cette direction… Initialement, nous nous sommes fourvoyé avec Miwa Editor Mu, qui ajoute des boutons à l’interface TinyMce permettant de créer des tableaux. Hélas, ce plugiciel, de plusieurs Mega-octets (!), n’a jamais voulu fonctionner !

Nous avons découvert Wp-table. C’est une « solution » !…

Le téléchargement par défaut comprend une traduction approximative en français.

Lorsque le module d’extension est installé et activé, Wp-Table s’administre depuis le menu Gérer avec l’onglet Tables. L’interface permet d’ajouter un nouveau tableau : il suffit de le nommer et de choisir le nombre de colonnes et de lignes (la traduction en français de ces champs est incorrecte, il ne s’agit pas de numéro mais de nombre !). Curieusement, le menu déroulant ne permet pas de créer un tableau avec une seule ligne ou colonne, mais ces caractéristiques pourront être modifiées ultérieurement. Lorsque le tableau est prêt, son nom apparaît dans la liste Gestion de la table. Un clic sur Editez permet à présent de modifier la présentation et le contenu des lignes et des colonnes.

Ici, imaginons que l’on veuille aligner deux images de Paris : la première sera une photo du musée du Louvre et la seconde représentera le quartier de la Défense. Deux colonnes sur une seule ligne seront donc nécessaires. Un clic sur Supprimer à la deuxième ligne permet de ne travailler qu’avec une seule ligne, après un message de confirmation.

À présent, il ne reste plus que deux cases, où l’on va insérer le code appelant chaque image.

Pour la première photo…

<img border="0" width="67" height="100" src="http://www.iptima.com/wp-content/uploads/paris/paris_a.jpg" alt="le musée du Louvre" title="le musée du Louvre" />

Pour la seconde photo…

<img border="0" width="75" height="100" src="http://www.iptima.com/wp-content/uploads/paris/paris_b.jpg" alt="le quartier de la Défense" title="le quartier de la Défense" />

Comme le champ de saisie est réduit, il sera judicieux de recourir à un éditeur de texte, comme l’excellent Pspad afin de « copier-coller ».

Dans le cadre de ce premier travail, on ignorera la proposition Editer la largeur ; en fait, cette option permet non seulement de modifier la largeur, mais aussi de spécifier l’alignement dans chaque cellule (à gauche, au centre, à droite).

Maintenant, un clic sur la case Mise à jour permet d’enregistrer les codes Html des deux images, avant de modifier les caractéristiques du tableau.

Dans option de la table, il convient de décocher chaque case.

Dans option générale, largeur de bordure, on peut indiquer 0. Ainsi, il sera inutile de modifier les couleurs de bordure et de ligne de titre. En revanche, pour obtenir un résultalt plus agréable à l’œil, on doit inscrire les valeurs 10 dans Largeur de cellules et Marge de cellules.

Un clic sur Mise à jour permet de finir le travail.

Dans l’éditeur visuel TinyMce, une icône $lang_wpTable_desc est désormais installée. Un clic sur ce bouton permet d’ajouter la tableau. Une fenêtre s’ouvre et propose Selectionner table via un menu déroulant. Lorsque le tableau est choisi, il faut cliquer sur Gestion de la table. Le code s’insère alors dans l’article ou dans le billet avec une syntaxe de forme :

[TABLE=1]

Comme nous n’avons pas trouvé le moyen de centrer le tableau avec Wp-Table, nous avons tenté de contourner la difficulté en écrivant :

<center>[TABLE=1]</center>

Le centrage fonctionne, mais sa syntaxe n’est pas valide !

Certes, la présentation du tableau demande à être améliorée (modification de couleurs, ajout de légendes…) mais, pour débuter, nous pensons que cette approche est intéressante.

Sans doute peut-il sembler contraignant d’entrer le code Html des images à la main (ou de copier-coller le code généré dans un brouillon), mais le jeu en vaut la chandelle.