Chaque développeur Web, doit songer à améliorer l'accessibilité de son site. Ceci est devenu une nécessité éthique indiscutable. Fini les beaux vieux temps, où le Web s'utilisait uniquement pour des raisons purement commerciales, abstraction faite de l'audience qui sera potentiellement concernée par le contenu.

Dans ce chapitre on va traiter un ingrédient trop important en terme d'accessibilité, à savoir les images qui constituent vraiment un point sensible en la matière.

• Pourquoi améliorer l'accessibilité du Web ?

• Classification des images

Pourquoi améliorer l'accessibilité du Web ?

Lorsqu'on évoque l'accessibilité du Web on évoque toujours les images, car elles créent un cauchemar pour l'accessibilité et ce pour les quatre raisons majeurs suivantes :

• le software : Les lecteurs ne se servent pas des mêmes agents utilisateurs, il y a certains qui utilisent des navigateurs visuels, d'autres des lecteurs d'écran (exemple : Jaws) et d'autres des navigateurs à texte-seul (exemple : Lynx) ;
• le hardware : Les internautes n'ont pas le même matériel, il y a des gens qui utilisent des ordinateurs, d'autres des téléphones portables, des PDA ou même des ordinateurs de voitures. De très petits écrans jusqu'à des écrans immenses, des écrans blanc et noir jusqu'à des écrans qui peuvent afficher des millions de couleurs ;
• la connexion internet n'est pas la même chez tout le monde, il y a certains qui naviguent en un débit de 128 kilobit et d'autres en une dizaine de mégabit ;
• les utilisateurs ne jouissent pas des mêmes capacités physiques et intellectuelles. il y a certains qui souffrent d'incapacités physiques ou mentales : des mal-voyants, handicapés etc.

Notre tâche consiste à rendre le Web accessible à tout le monde. Pour permettre une navigation confortable au maximum de gens abstraction faite de leur environnement de navigation (software, hardware et connexion internet) ainsi que leurs capacités physiques ou mentales. Un chalenge grandiose nous attend

Pour rendre les images accessibles, il faut envisager des traitements différents selon l'importance et la fonction l'image, on doit pas les traiter au même pied d'égalité.

Classification des images

Images importantes

Images significatives

Ce sont des images qui ont une importance conséquente sur le contenu de la page et qui par conséquent sont indispensables à la compréhension du document. Pour savoir si une image est importante, posez la question suivante : est-ce que la suppression de cette image affectera le sens de la page ? Les images significatives sont :

• les images dont la raison d'être est d'apporter du sens au contenu de la page. Par exemple l'image d'une personne dans une biographie ;
• les images qui comprennent du texte : les bannières, les logos etc. ces images affichent du texte qui est inaccessible aux moteurs de recherche mais aussi aux lecteurs déficients qui naviguent avec des lecteurs d'écran.

Ces images doivent être bien soignées : il faut leur spécifier un attribut alt (texte alternatif), et éventuellement un attribut longdesc (description longue), le texte qui les entourent doit aussi être en relation avec les images. Pour s'approfondir davantage : améliorer l'accessibilité des images.

Images fonctionnelles

Ce sont des images qui ont une fonction à savoir la navigation, on y trouve :

• les images cliquables : ce sont des images qui servent de liens, onglets ou boutons de navigation, icônes (accueil, livre d'or, recherche etc.) ;
• les images réactives côté client : ce sont des images découpées en des zones interactives qui jouent le rôle de liens autonomes. (images interactives plus accessibles) ;

• les images réactives côté serveur : elles permettent de remplir la même fonction que les images réactives côté client, sauf que la syntaxe et le fonctionnement diffèrent. les cartes cliquables côté serveur doivent être évitées car elles nuisent au référencement et entravent énormément l'accessibilité car on peut pas attribuer des textes alternatifs aux zones réactives d'une carte cliquable côté serveur, en plus on peut pas naviguer avec le clavier dans les différentes zones réactives. Je profite de l'occasion pour partager avec vous un commentaire que j'ai extrait du DTD xhtml 1.0 :

  <!--
  To avoid accessibility problems for people who aren't
  able to see the image, you should provide a text
  description using the alt and longdesc attributes.
  In addition, avoid the use of server-side image maps.
  -->

  Traduction : pour éviter les problèmes d'accessibilité pour les gens qui ne voient pas
  les images, vous devez fournir un texte de description en utilisant les attributs alt et longdesc.
  En plus, évitez l'utilisation des cartes cliquables côté serveur.

Le texte alternatif des images-liens doit renseigner l'internaute sur la fonction de l'image c'est-à-dire la cible du lien ou un bref descriptif de la page à visiter.

Images non importantes

Ce sont des images dont la suppression n'entrave pas la compréhension de la page.

Images destinées à la mise en page

Ce sont les images d'espacement (spacer images), qui permettent de contrôler la mise en page en créant virtuellement des espaces, tabulations, sauts de lignes, interlignes etc. Ces images doivent être remplacées par les CSS.

Images décoratives en premier plan

Ce sont des images destinées à l'embellissement de la page, elles sont insérées par la balise xhtml img, on trouve par exemple :

• les lignes de séparation horizontales et verticales ;
• les puces ;
• les émoticônes (smilies) ;
• et j'en passe.

Contrairement aux images importantes (images significatives et fonctionnelles), il ne faut jamais spécifier un attribut longdesc pour les images décoratives, comme les smilies, les séparateurs graphiques, les images d'espacement, les puces graphiques etc. Les navigateurs non visuels risquent de restituer l'attribut longdesc ce qui pourra bien embrouiller le lecteur. En plus pour inciter les navigateurs non graphiques d'ignorer ces images décoratives, il suffit de leur spécifier un attribut alt vide.

Images décorative en arrière-plan

Ce sont des images destinées spécialement à la décoration, elles sont introduites par l'attribut background (body, table, td) ou par la propriété css background-image. Ces images ne doivent recevoir aucun traitement car elles sortent du flux du document.

Généralement ces images ne sont pas concernées quand on parle d'optimisation d'accessibilité à moins qu'elles sont à la source d'un contraste élevé ou des scintillements de l'écran qui peuvent potentiellement provoquer l'épilepsie chez les personnes vulnérables ou bien qu'elles contiennent des couleurs non accessibles pour certaines personnes (les daltoniens), dans ce cas, leur traitement consiste uniquement à les remplacer par des images qui ne gênent pas la navigation.

Une idée brillante consiste à mettre toutes les images décoratives en arrière-plan grâce à la propriété CSS background-image. Ceci va nous permettre d'exclure l'image de la structure du document. On aura plus à se soucier de l'attribut alt et on va s'assurer que les navigateurs non graphiques vont ignorer ces images purement décoratives.

Au cours des chapitres suivant on va passer la loupe sur les différents types d'images : images accessibles avec une description alternative (attribut alt et longdesc).