Images et autres éléments multimédia - Accessibilité web

Images et autres éléments multimédia

Intro

Dans ce chapitre sur les Images et autres éléments multimédia, nous allons étudier quelques conseils simples pour rendre vos images et les autres éléments multimédia plus accessibles.

L'attribut alt

Alt

Chaque image significative (utile à la compréhension) de votre page html doit contenir un équivalent texte.
Ce dernier se fait grâce à l'attribut ALT de la balise HTML IMG.
Exemple de code :
<img src="bouton.gif" alt="Bouton valider la recherche">

Il est évident que les images décoratives ou cale n'ont pas d'intérêts à avoir un équivalent texte, donc il faut mettre l'attribut ALT vide.
Exemple de code :
<img src="rien.gif" alt="">

L'attribut ALT doit contenir au maximum environ de 60 caractères. En effet, un texte trop long obligerai les personnes utilisant un agrandisseur d'écran à faire des manipulations pour lire la totalité du texte contenu dans l'attribut ALT.

Les schéma ou images explicatives doivent être expliqués

longdesc et D-LINK

Chaque image "illustrative" doit avoir un descriptif rapide dans l'attribut ALT et un attribut longdesc qui pointe sur une page html qui explique en détail l'image.
Pensez à mettre sur cette page un lien pour revenir.
Exemple de code :
<img src="graphique.gif" alt="Graphique des ressources en eau" longdesc="descriptif.html">

Le problème de longdesc n'est pas reconnu par certains navigateurs spéciaux.
Il faut donc utilisez le lien appelé D-LINK.
Un D entre crochet [D] situé sous l'image ou a côté qui pointe sur la même page que le longdesc.
Exemple de code :
<img src="graphique.gif" alt="Graphique des ressources en eau" longdesc="descriptif.html">
[<a href="descriptif.html">D</a>]


Le w3c propose d'utiliser aussi les ASCII art