Alternatives équivalentes au contenu auditif et visuel
Par Victor Brito, le jeudi 14 février 2008, à 15h00 - Catégorie Moyens techniques - Lien permanent
Il s'agit, entre autres, de fournir un équivalent textuel d'un contenu non textuel (comme les images, les vidéos, les animations Flash) aux utilisateurs qui ne peuvent voir le contenu non-textuel : utilisateurs de navigateurs textuels (comme Lynx), utilisateurs de navigateurs graphiques où les images sont désactivées, utilisateurs ne possédant pas de logiciel requis pour lire le contenu (cas des animations Flash ou de certains formats de vidéo), robots des moteurs de recherche. L'équivalent textuel est également utile lorsque le contenu non textuel est indisponible (fichier source non trouvé ou pas encore chargé).
Pour une image, on utilisera l'attribut alt pour la décrire, attribut qui sera lu par les lecteurs d'écran et affiché par les navigateurs textuels ou lorsque l'image est indisponible. Cet attribut est obligatoire dans les éléments img et area.
<img src="url-de-mon-image.png" alt="Description de mon image" />
En règle générale, la valeur de alt ne doit pas dépasser 60 caractères. Dans certains cas, l'attribut peut être vide si l'image côtoie du contenu textuel qui peut très bien servir à sa description (autrement dit, pour éviter un éventuel doublon) ou s'il s'agit d'une image décorative ou d'une image permettant de « caler » une mise en page (dans ces deux derniers cas, il est préférable de recourir aux CSS) ; un attribut alt vide n'est pas restitué par les lecteurs d'écran et les navigateurs textuels.
Si la description de l'image risque d'être longue, il convient d'ajouter l'attribut longdesc, qui accepte comme valeur une URL contenant la longue description. Cet attribut joue alors le rôle d'un lien.
<img src="url-de-mon-image.png" alt="Description sommaire de mon image" longdesc="url-de-la-description-complete-de-mon-image.html" />
Dans le cas d'une animation Flash ou de tout programme intégré au document Web par l'élément object, l'équivalent textuel sert de texte de substitution et sera affiché par les navigateurs ne pouvant lire l'animation et lu par les robots des moteurs de recherche.
<object type="application/x-shockwave-flash" data="url-de-mon-animation-flash.swf" width="320" height="240"> <param name="movie" value="url-de-mon-animation-flash.swf" /> <p>Texte de substitution décrivant mon animation Flash</p> </object>
Une image peut très bien être utilisée à la place du texte de substitution, auquel cas on n'oublie pas alt.
<object type="application/x-shockwave-flash" data="url-de-mon-animation-flash.swf" width="320" height="240"> <param name="movie" value="url-de-mon-animation-flash.swf" /> <img src="url-de-mon-image-de-substitution.png" alt="Texte de substitution décrivant mon image de substitution" /> </object>
