2.3.2 Les images complexes sont décrites par un texte

Un élément graphique complexe est une image qui contient trop d'informations pour être décrites dans l'attribut alt. Quelques exemples courants sont:

  • Organigrammes
  • Cartes routières et itinéraires
  • Graphiques et schémas
  • Articles scannés
  • Affiches
  • Captures d'écran

Il n'est pas nécessaire d'éviter les images complexes. Elles peuvent être utiles pour de nombreux visiteurs. Par contre, il faut fournir une description textuelle pour celui qui ne voit pas (bien).

En pratique

La description textuelle d'une image complexe peut être placée au-dessus ou en dessous de l'image. Si cela dérange votre mise en page, vous pouvez également placer un lien qui invitera le visiteur à consulter la description détaillée sur une page indépendante. Ci-dessous nous passons en revue plusieurs types d'images complexes.

Organigramme

Lorsqu'un visiteur aveugle entend par exemple "Organigramme du département des Ressources humaines", il n'a encore aucune idée de la structure réelle du département. Qui fait quoi? Qui appeler?
L'organigramme doit dès lors être expliqué par des mots. L'utilisation de listes HTML peut aussi faciliter la compréhension d'un organigramme.

Exemple de pratique correcte

<img src="organigramme.gif" alt="Organigramme CPAS Bruxelles 
  (Un lien vers version textuelle suit)" />
<a href="texte/organigramme.html">
  Version textuelle de l'Organigramme CPAS Bruxelles
</a>

Plan de situation

Il est évident qu'il vous est impossible de décrire toutes les rues, les tournants, les feux de signalisation et les cafés de la ville. Cela n'apporterait rien. Prenez plutôt des références connues et évidentes telles qu'une cathédrale, un rond-point, un stade de football...et surtout la gare! Les références idéales restent de toute évidence les transports en commun; compléter votre description de plan d'accès par un itinéraire des moyens de transports publics est une excellente façon de satisfaire tout le monde.

Autres exemples

Sur le portail du personnel fédéral, la maison KM, une représentation imagée qui aide à saisir les multiples facettes de la gestion des connaissances, est accompagnée d'une description textuelle sur la même page. Sur Douzquinz, un site pour les jeunes, l'affiche 1001 manières de devenir un CRACS est également retranscrite sur la même page.

Les images qui contiennent trop d'information textuelle pour être reprise dans l'attribut alt sont aussi considérées comme des images complexes. Prenons, par exemple, une affiche qui contient en plus d'une image des informations sur le lieu, la date, l'heure et le prix d'un évènement. Répétez cette information au dessus ou en dessous de l'affiche afin que tout le monde (y compris les moteurs de recherche) puisse la lire.

Un texte scanné n'est pas accessible. Afin de le rendre accessible, vous devrez le retranscrire et le proposer sous forme textuelle. Vous pouvez par exemple utiliser un programme de reconnaissance de caractères (OCR) pour extraire le texte.

Remarque

Pour une longue description textuelle, il existe en HTML l'attribut longdesc. Néanmoins les navigateurs et les lecteurs d'écrans ne supportent cet attribut que de manière limitée. Nous déconseillons donc son usage. Un lien textuel vers une description complète est accessible pour tout le monde y compris pour un moteur de recherche.

comment tester

  • Cherchez les images complexes dans le site
  • Vérifiez s'il y a une description textuelle ou un lien vers une telle description juste avant ou après l'image.
  • En cas de lien, vérifiez que l'intitulé du lien exprime clairement qu'il s'agit d'un lien vers une explication textuelle de l'image.
  • Vérifiez que l'explication textuelle est bien correcte et complète.