Nous avons discuté récemment avec le fondateur d’un hôtel quatre étoiles… Le site Internet de son établissement a été conçu en Flash, voilà seulement deux ans. Or, en analysant le trafic de son site, l’hôtelier s’est aperçu que les demandes de connexion depuis un Smartphone étaient chaque jour plus nombreuses. Aussi, notre nouvel ami a demandé à une agence de refondre son site afin qu’il soient accessibles à l’ensemble des périphériques.

Nous n’avons pas encore découvert la nouvelle version du site de l’hôtel, mais la solution retenue constituerait un savant mélange de Flash et de Html, optimisé au passage pour le référencement ! Nous n’osons imaginer le résultat : faudra-t-il naviguer de page en page pour recharger à chaque fois une animation en Flash ou voir un contenu plus statique dédié aux périphériques de poches ?

Ne serait-il pas préférable de laisser en place l’existant, avec une animation qui fonctionne plutôt bien, pour les ordinateurs classiques ? Une animation en Flash sophistiquée peut demander un investissement lourd : il serait dommage de jeter le bébé avec l’eau du bain ! Aussi ne vaut-il pas mieux servir un contenu alternatif et allégé pour les Smartphones : lors de la demande de connexion, le navigateur est reconnu et redirigé vers la version classique ou simplifiée du site.

Nous ne sommes pas un détracteur de Flash (mais de Silverlight oui, pâle copie inutile et encombrante), car il faut reconnaître que cette technologie présente des avantages pour certains types de contenus… (Nous écrivons certains, car nous avons découvert récemment une pizzeria, dont le site au modeste contenu est exclusivement accessible avec Flash ! Aussi avons-nous dû télécharger l’application sur notre modeste Netbook pour lire la carte : combien de clients perd cet établissement qui livre à domicile ?) D’abord, l’animation est téléchargée une fois pour toutes permettant, après une attente raisonnable, une navigation fluide et interactive. Ensuite, Flash permet au pixel ou à la seconde près d’appeler un élément graphique ou sonore.

Cependant, un site en Flash devrait toujours demander l’adhésion (Opt-in) du visiteur, avec un éventuel préchargement de l’animation en tâche de fond : certaines animations, au fond sonore inattendu, peuvent être éprouvantes lors de l’accès à la page Web. Si le visiteur n’adhère pas (ou ne dispose pas ou ne veut pas du lecteur), il faut alors lui proposer un contenu alternatif, qui pourra être alors le même que celui servi pour les téléphones mobiles.

(Il semble qu’un lecteur Flash pour périphériques mobiles soit bientôt disponible. Gageons que, avec la mésentente entre constructeurs et éditeurs et une bande passante disponible de plus en plus réduite, la solution mettra du temps à s’implanter ! Le recours intégral à cette technologie sera-t-il, d’ailleurs, souhaitable, ou faudra-t-il considérer que les animations viendront uniquement agrémenter le contenu ?)

Servir un contenu alternatif peut aussi (et surtout) constituer l’occasion d’améliorer sa visibilité dans les moteurs de recherche, et, par exemple, d’obvier aux difficultés de référencement de contenu plus dynamique comme les animations écrites en Flash ou les pages au format Pdf (Google en a néanmoins considérablement amélioré le référencement, au cours de ces derniers mois).

Naturellement, ce contenu sera sémantique, car les moteurs de recherche aiment l’accessibilité. Pour y parvenir, il suffit d’appliquer quelques règles simples :

• hiérarchiser l’information en utilisant les niveaux de titre (de h1 à h6, du plus important ou moins important) ;
• utiliser avec prudence l’emphase ;
• légender les images, lorsque leur contenu est significatif ;
• choisir avec soin le titre des pages, leur description et leur mots clef ;
• optimiser la navigation ;
• s’assurer de la compliance du code aux normes définies par le W3c.

Sur le plan graphique, la feuille de style permettra ensuite le formatage du site, et autorisera d’afficher un titre de deuxième niveau avec des caractères plus gros que ceux d’un titre de premier niveau ou de supprimer l’emphase sur certains mots-clef (il ne s’agit en aucun de contenu caché ou de Cloacking).

Pour vérifier la compliance d’un site à ces pratiques, il suffit d’utiliser un navigateur en mode texte, comme Lynx : on verra le rendu qui apparaîtra pour les moteurs de recherche. Dans un deuxième temps, le contenu sera validé par W3C mobileOK Checker.

Enfin, pourquoi ne pas demander aux moteurs de recherche de ne référencer que le contenu alternatif, par exemple avec un fichier robots.txt ?

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