Alternative textuelle

L'alternative textuelle est un texte que l'on associe à un contenu graphique comme une image, une zone cliquable dans une image ou un élément de formulaire de type image, dans un site web ou dans un document produit par un logiciel d'une suite bureautique, pour que l'utilisateur qui ne peut visualiser l'image puisse être informé de ce qu'elle représente et signifie. L'alternative textuelle est restituée à la place de l'image quand celle-ci n'est pas consultable.

L'alternative textuelle, dont l'emploi est obligatoire dans le cadre de l'accessibilité du web[1], concerne tant les personnes qui utilisent un navigateur textuel ou un lecteur d'écran, que celles qui, par choix ou à cause d'un problème technique, ne peuvent visualiser l'image[2].

Celle-ci peut en effet :

• constituer une information nécessaire ou complémentaire à la compréhension du texte ;
• être l'objet d'un lien renvoyant vers une autre partie du texte, vers une autre image, vers une autre page web ;
• constituer un test, comme une image CAPTCHA, dont l'incompréhension ne permet pas à l'internaute d'opérer la manœuvre nécessaire à la poursuite de son opération sur le site web.

L'alternative textuelle n'est donc pas la légende d'une image mais bien sa description concrète, dépendant de son contexte d'utilisation, même si elle doit être la plus concise possible. Par exemple, dans l'image ci-après, la légende ne permet pas de savoir que la friteuse est en action sur une cuisinière à gaz ni que le panier métallique est grillagé. L'alternative textuelle précise, si cette information est considérée comme nécessaire par l’auteur, que le récipient est sur une gazinière et contient des frites en train de cuire.

Friteuse formée d’une casserole en fonte munie d’un panier métallique.

Dans le cas d'un site web, l'alternative textuelle est introduite par l'attribut alt[3]. Cet attribut doit être présent selon le cas :

• soit dans la balise HTML <img /> qui décrit l'image ;
• soit dans la balise <area /> d'une zone d'image réactive ;
• soit dans la balise <input /> possédant un attribut type="image" ;
• soit dans la balise <applet> dans le cas où l'image est incorporée ou générée par une applet.

Ainsi, le code HTML de l'image présentée en exemple peut être :

<img src="Fries cooking.jpg"
     alt="Frites dorant dans un panier grillagé plongé dans l’huile d’une casserole en fonte posée sur une gazinière"
/>
<p>Friteuse formée d’une casserole en fonte munie d’un panier métallique.</p>

L'alternative textuelle introduite par « alt= » précède la légende.

Dans un autre contexte, la même image pourra recevoir une alternative : il pourrait être nécessaire d'illustrer le degré de cuisson des frites en fonction de leur couleur, auquel cas la mention du moyen de cuisson peut être omise. L'image peut même recevoir une alternative vide si elle ne sert que de décoration, comme dans le cas d'une frise décorative. Attention, l'alternative, même vide, doit toujours être présente[4].