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

En effet, nous cherchions un Plugin de WordPress qui pouvait gérer les acronymes, sans avoir à les recopier dans nos articles. Les acronymes permettent d’ajouter du sens au texte (certaines abréviations peuvent ne pas être comprises) et sont interprétées par les navigateurs à synthèse vocale utilisés par les malvoyants.

Nous souhaitions aussi trouver un deuxième module d’extension me permettant de générer à la volée les adresses. Ainsi, par exemple, lorsque nous saisissions Google, nous voulions que la page renvoie automatiquement :

http://www.google.com

Enfin, au fil de la rédaction de cet article (nous débutons !), nous nous sommes aperçu que WordPress ne permettait pas la saisie littérale de code. Nous avons pensé contourné le problème en utilisant les entités des balises < et >, mais WordPress continuait parfois à modifier notre code. Aussi nous fallait-il trouver une solution…

Pour répondre à notre première préoccupation, nous avons voulu utiliser le Plugin Acronyms… Hélas, la stabilité de ce plugiciel ne nous a pas convaincu. D’un weblogue à l’autre, il fonctionnait différemment. De plus, lorsque nous voulions modifier la liste des acronymes, certains termes étaient refusés ! Quand à la feuille de style, elle donnait des résultats aléatoires selon les thèmes utilisés.

Eurêka ! En continuant nos recherches, nous avons découvert le Plugin Text Replace, qui permet de remplacer automatiquement certains mots par d’autres occurences.

Ainsi, écrire W3c transforme le code en :

<acronym title="world wide web consortium">W3c</acronym>

Comme les possibilités de ce module d’extension sont infinies, nous avons trouvé comment nous en servir pour que Google soit remplacé par :

<a href="http://www.google.com/">Google</a>

En revanche, son ergonomie est limitée : pour chaque occurence, il faut modifier le fichier Php et l’envoyer sur le serveur avec Ftp.

Par exemple, pour créér un acronyme, il convient d’inscrire dans le fichier text_replace.php vers la ligne no 88 :

":edf:" => "<acronym title="électricité de france">Edf</acronym>"

(Par convention, nous écrivons toujours les acronymes en minuscules.)

Pour générer un lien automatique, il faut écrire :

":gdf:" => "<a href="http://www.gdf.fr/">Gdf</a>"

Idéalement, la balise href devrait comporter les attributs title, lang, accesskey (cette dernière propriété permet aux utilisateurs handicapés de naviguer gâce au clavier sans recourir à une souris…), mais nous ne savons pas encore l’utiliser avec WordPress.

Pour faciliter la lecture, nous n’avons pas échappé les doubles quotes dans les codes présentés ici. On peut se contenter des simples quotes, même si cette utilisation ne me semble pas logique sur le plan de la syntaxe. Une autre alternative, pour la présentation de code, consiste à recourir à l’entité Html exprimée en décimal.

<nota>

Il est surprenant de constater que WordPress utilise à la fois les entités exprimées par leur nom et en décimal. Peut-être serait-il judicieux d’unifier l’utilisation de ces entités au profit de la représentation Unicode, qui semble être universellement reconnue.

</nota>

Une virgule est à placer après chaque ligne, sauf la dernière.

Pour utiliser les occurences définies dans le fichier text_replace.php dans un article, il suffit de saisir…
pour l’acronyme…

:edf:

pour le lien automatique… :yahoo:

Pour (essayer d’) être exhaustif, ajoutons que la balise <acronym> n’est pas correctement implémentée dans Msie. En revanche, Firefox souligne les acronymes pour attirer l’attention du lecteur. Afin de résoudre le problème, on peut inclure à une feuille de style la règle suivante :

acronym
{
  cursor: help;
  border-bottom: #000000 1px dotted;
}

Néanmoins, il est dommage que les acronymes n’apparaîssent pas à l’impression d’une page. On pourrait imaginer de définir littéralement l’acronyme lors de sa première citation puis d’utiliser la balise dans le reste du texte, mais la mise en œuvre de cette solution serait lourde.

À ce propos, nous déconseillons d’imbriquer une balise <acronym> dans un lien. Dans ces cas, les naviagteurs ont des comportements différents. Par convention, la première citation de l’acronyme peut pointer vers le lien, les citations suivantes donnant la définition de l’acronyme.

Text Replace permet également d’ajouter du code littéral dans les pages, en utilisant une méthode identique.

En revanche, Text Replace ne peut remplacer que le texte affiché mais pas le code source.

Pour conclure, nous nous posons une question, dont nous n’obtiendrons la réponse qu’à l’usage… Lorsque le fichier text-replace.php compte plusieurs centaines de lignes, les performances de WordPress en sont-elles affectées pour afficher les articles et les pages ?

Les retours d’expérience sont les bienvenus.

<addendum>

25/11/2007.

Pour que les termes remplacés par Text Replace soient présents dans les fils de syndication, il faut demander, dans les options de lecture de WordPress, qu’un résumé/extrait soit affiché et non le texte complet. L’origine de ce dysfonctionnement nous semble bien mystérieuse !

</addendum>