Introduction à l'utilisation de l'attribut alt et de l'attribut title de la production de pages HTMLimg tag_HTML/Xhtml_Web

Lorsque les fournisseurs de navigateurs contournent les normes et font des choses qui ne respectent pas les règles, ils peuvent causer des problèmes, ou du moins de la confusion. Un exemple est la façon dont certains navigateurs gèrent les attributs alt (souvent appelés à tort balises alt), comme Internet Explorer pour Windows, qui compte un grand nombre d'utilisateurs.

Le texte alternatif n'est pas utilisé comme info-bulle, ou pour être plus précis, il ne fournit pas d'informations descriptives supplémentaires pour l'image. Au lieu de cela, l'attribut title doit être utilisé pour fournir des informations descriptives supplémentaires sur l'élément. Ces informations sont affichées sous forme d'info-bulle dans la plupart des navigateurs d'images, bien que les fabricants soient libres d'afficher le texte de l'attribut de titre d'une autre manière.

Beaucoup de gens semblent confus par ces deux propriétés (cette question est apparue récemment sur la liste de diffusion du Web Standards Group), j'ai donc écrit mes réflexions sur la façon de les utiliser.

attribut alt

est un agent utilisateur (UA) qui ne peut pas afficher d'images, de formulaires ou d'applets. L'attribut alt est utilisé pour spécifier du texte de remplacement. La langue du texte de remplacement est spécifiée par l'attribut lang. Source : Comment spécifier un texte alternatif.

L'attribut Alt (notez qu'il s'agit d'un « attribut » plutôt que d'une « étiquette ») comprend des instructions de remplacement, qui sont requises pour les images et les points chauds d'image. Il ne peut être utilisé que dans les éléments img, area et input (y compris les éléments applet). Pour les éléments d'entrée, l'attribut alt est destiné à remplacer l'image du bouton de soumission. Par exemple : .

Utilisez l'attribut alt pour fournir des descriptions textuelles aux spectateurs qui ne peuvent pas voir les images de votre document. Cela inclut les utilisateurs qui utilisent des navigateurs qui ne prennent pas en charge nativement l'affichage des images ou dont l'affichage des images est désactivé, les utilisateurs malvoyants et les utilisateurs qui utilisent des lecteurs d'écran. Le texte alternatif est utilisé pour remplacer une image plutôt que pour fournir un texte descriptif supplémentaire.

Réfléchissez bien avant d'écrire un texte alternatif pour vous assurer qu'il fournit réellement des informations aux personnes qui ne peuvent pas voir l'image et qu'il a du sens dans son contexte. Pour les images décoratives, utilisez une valeur vide (alt="", sans espaces entre guillemets) au lieu d'un texte de remplacement non pertinent tel que "blue bullet" ou "spacer.gif". Ne l'ignorez pas. Si vous l'ignorez, certains lecteurs d'écran liront directement le nom du fichier image, et les navigateurs de texte comme Lynx afficheront le nom du fichier image, et cela ne sera d'aucune utilité à votre navigateur. .

Il est plus simple de définir un texte alternatif pour les images contenant du texte. De manière générale, le texte contenu dans l'image peut être utilisé comme valeur d'attribut alt.

En ce qui concerne la longueur du texte alternatif, jetez un œil à ce que dit les WCAG 2.0 (Website Content Availability Guidelines 2.0) :

La longueur de la valeur de l'attribut Alt doit être inférieure à 100 anglais. caractères ou l'utilisateur doit assurer le remplacement. Gardez le texte aussi court que possible.

Je le comprends comme "aussi court que possible et aussi long que nécessaire".

Même si vous souhaitez qu'il soit affiché sous forme d'info-bulle, n'utilisez pas l'attribut alt pour les éléments de texte. Ce n'est pas son utilisation prévue. Pour autant que je sache, cela ne fonctionne que dans le navigateur IE de Windows et dans l'ancien Netscape 4.* (version Windows). Aucun navigateur Mac n'affiche cela sous forme d'info-bulle.

Lorsque les navigateurs affichent du texte alternatif sous forme d'info-bulle, une utilisation incorrecte de l'attribut alt est encouragée. Certaines personnes commencent à écrire du texte alternatif dénué de sens parce qu'elles ont tendance à le considérer comme des informations descriptives supplémentaires plutôt que comme un remplacement qui ne peut pas afficher l'image. D'autres peuvent ne pas vouloir que l'info-bulle apparaisse, puis ignorer complètement la valeur de l'attribut alt. Ces mauvaises pratiques causent des difficultés aux téléspectateurs qui ne peuvent pas voir les images.

Pour des informations explicatives supplémentaires et des informations non essentielles, veuillez utiliser l'attribut title.

attribut title

L'attribut title fournit des informations suggérées pour l'élément sur lequel il est défini.
Source : L'attribut title.

L'attribut title peut être utilisé dans toutes les balises sauf base, basefont, head, html, meta, param, script et title. Mais ce n'est pas nécessaire. C'est peut-être pour cela que beaucoup de gens ne comprennent pas quand l'utiliser.

Utilisez l'attribut title pour fournir des informations supplémentaires non essentielles. La plupart des navigateurs visuels affichent le texte du titre sous forme d'info-bulle lorsque la souris survole un élément spécifique. Cependant, c'est au fabricant de décider comment restituer le texte du titre. Certains navigateurs afficheront le texte du titre dans la barre d'état. Par exemple, les premières versions du navigateur Safari.

Une bonne utilisation de l'attribut title consiste à ajouter un texte descriptif à un lien, en particulier lorsque le lien lui-même n'est pas très clair quant à son objectif. De cette façon, les visiteurs savent où les liens les mèneront et ils ne chargeront pas une page qui ne les intéresserait pas du tout. Une autre application potentielle consiste à fournir des informations descriptives supplémentaires pour les images, telles que des dates ou d'autres informations non essentielles.

La valeur de l'attribut title peut être définie plus longtemps que la valeur de l'attribut alt. Sachez cependant que certains navigateurs tronqueront les textes trop longs (comme les infobulles ou autres). Par exemple, le navigateur principal de Mozilla ne peut afficher que les 60 premiers caractères. Ceci est considéré comme un bug de Mozilla et vous devez en être conscient.

Réfléchissez avant de l'utiliser

Mon conseil est de garder le texte alternatif à l'essentiel. Dans la plupart des applications, il doit être laissé vide, alt="" (notez qu'il n'y a pas d'espace entre les guillemets). Pensez à ces images, quel type d’informations fournissent-elles à ceux qui les regardent, quels mots devriez-vous utiliser pour les décrire ou quels informations devriez-vous fournir aux personnes qui ne peuvent pas voir l’image ? Est-ce que cela aidera vraiment quelqu'un qui ne peut pas voir l'image d'écrire le texte alternatif comme « Photo : PDG debout à l'extérieur d'un bâtiment, vêtu d'un costume gris et d'une cravate noire, regardant le ciel » ? Si vous le pensez, écrivez-le. Dans de nombreux cas, je pense qu'il est préférable de laisser le texte de remplacement vide.

Pour l'attribut title, il est difficile de donner des instructions d'utilisation strictes. Je l'utilise principalement sur des liens qui ne sont pas explicites, comme le même texte de lien sur la même page, mais des pages liées différentes. Parfois, un texte plus descriptif est fourni pour certains boutons ou éléments de formulaire.

Description plus longue

Lorsqu'une image nécessite une description plus longue que les limites de l'attribut alt, il existe certaines options.

L'attribut longdesc peut être utilisé pour fournir un lien vers une page distincte contenant une description textuelle de l'image. Cela signifie relier le spectateur à une autre page, ce qui peut entraîner des difficultés de compréhension. De plus, la prise en charge par le navigateur de l'attribut longdesc est incohérente et pas très bonne.

L'attribut longdesc peut contenir un lien vers une autre partie du document actuel (une ancre) au lieu d'un lien vers une autre page. Dans les notes de bas de page sur l'accessibilité, Andy Clarke donne une bonne explication sur la façon de l'appliquer.

Les liens de description (liens D) peuvent être utilisés pour compléter longdesc. Un lien de description est un lien régulier vers une page contenant du texte alternatif. Le lien est placé à côté de l'image et est disponible dans tous les navigateurs. Il existe de nombreuses opinions différentes sur son efficacité, et personnellement, je n'aime pas cette note. WCAG également, dans leur version de travail des techniques HTML pour WCAG 2.0, les liens de description sont "obsolètes".

Si une longue description de l'image est utile à tout spectateur, vous devriez alors envisager de simplement l'afficher dans le même document, plutôt que de créer un lien vers d'autres pages ou de la masquer. Ainsi tout le monde peut le lire. Il s’agit d’une approche simple et peu technologique.