Introduction à l'utilisation de l'attribut alt et de l'attribut de titre de la balise htmlimg

Lorsque les vendeurs de navigateur déforment les normes et font les choses par eux-mêmes, ils peuvent causer des problèmes, ou du moins provoquer une confusion. Un exemple est la façon dont certains navigateurs traitent avec incorrecte les attributs ALT (généralement appelés balises ALT), comme le navigateur IE avec un grand nombre d'utilisateurs de Windows.

Le texte ALT n'est pas utilisé comme conseils d'outil, ou plutôt, il ne fournit pas d'instructions supplémentaires pour les images. Au contraire, l'attribut de titre doit être utilisé pour fournir des informations d'explication supplémentaires pour l'élément. Ces informations sont affichées comme un conseil d'outil dans la plupart des navigateurs d'image, bien que les fabricants puissent utiliser une autre manière pour rendre le texte de l'attribut de titre.

Beaucoup de gens semblent confus par ces deux attributs (la question est devenue plus courante dans la liste de diffusion du groupe des normes Web récemment), alors j'ai écrit mes réflexions sur la façon de les utiliser.

Pour l'agent utilisateur (UA) qui ne peut pas afficher des images, des formulaires ou des applets, l'attribut ALT est utilisé pour spécifier un texte alternatif. 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 points chauds d'image et d'image. Il ne peut être utilisé que dans les éléments IMG, de zone et d'entrée (y compris les éléments de l'applet). Pour les éléments d'entrée, l'attribut ALT est destiné à remplacer l'image du bouton Soumettre. Par exemple: <Type d'entrée = Image Src = Image.gif Alt = Soumide />.

Utilisez l'attribut ALT pour fournir des descriptions de texte aux télé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 l'affichage d'image ou l'affichage d'image, les utilisateurs qui ont une maladie visuellement et les utilisateurs qui utilisent des lecteurs d'écran. Le texte alternatif est utilisé pour remplacer les images plutôt que de fournir une légende supplémentaire.

Pensez attentivement avant d'écrire du texte alternatif pour vous assurer que ces texte fournissent des informations illustratives à ceux qui ne voient pas l'image et n'ont pas de sens dans le contexte. Pour les images décoratives, vous pouvez utiliser des valeurs vides (alt =, pas d'espaces dans les citations) au lieu d'utiliser des substituts non pertinents tels que Blue Bullet ou Spacer.gif. Ne l'ignorez pas. Si vous l'ignorez, certains lecteurs d'écran liront directement le nom du fichier du fichier image, et ces navigateurs de texte, tels que Lynx, affichent le nom de fichier du fichier image, qui sera peu utile à votre navigateur.

Il est plus facile de définir le texte de remplacement dans une image contenant du texte. Le texte contenu dans l'image peut généralement être utilisé comme valeur d'attribut ALT.

Quant à la durée du texte de remplacement, voir What WCAG 2.0 (site Web du contenu du site Web Guide 2.0) dit:

La valeur d'attribut ALT doit être inférieure à 100 caractères anglais ou que l'utilisateur doit s'assurer que le texte de remplacement est aussi court que possible.

Je le comprends aussi court que possible et aussi longtemps que possible.

Même si vous voulez qu'il apparaisse comme un astuce d'outil, n'utilisez pas l'attribut ALT pour l'élément texte, ce qui n'est pas son utilisation. Pour autant que je sache, cela ne fonctionne que dans Windows IE Browser et l'ancien NetScape 4. * (version Windows). Aucun navigateur de Mac ne l'affichera comme une pointe d'outil.

Lorsque le navigateur affiche le texte de remplacement en tant que pointe de l'outil, le comportement de l'utilisation de l'attribut ALT est également encouragé. Certaines personnes commencent à écrire du texte de substitution dénué de sens car ils ont tendance à penser qu'il s'agit d'une information d'illusion supplémentaire plutôt qu'un remplacement qui ne peut pas afficher des images. D'autres peuvent ne pas vouloir apparaître l'assistance à l'outil, puis ignorer complètement la rédaction de la valeur d'attribut ALT. Ces mauvaises pratiques ont causé des difficultés aux téléspectateurs qui ne peuvent pas voir l'image.

Pour des instructions supplémentaires et des informations non essentielles, veuillez utiliser l'attribut de titre.

L'attribut de titre fournit des informations suggestives pour les éléments qui définissent cet attribut.

Source: l'attribut de titre.

L'attribut de titre peut être utilisé sur toutes les balises sauf la base, la basefont, la tête, le html, la méta, le param, le script et le titre. 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 de titre pour fournir des informations supplémentaires non essentielles. La plupart des navigateurs visuels affichent le texte du titre comme astuce à l'outil lorsque la souris est suspendue sur un élément spécifique, mais c'est au fabricant pour décider comment rendre le texte du titre. Certains navigateurs afficheront le texte du titre dans la barre d'état. Par exemple, la version antérieure du navigateur Safari.

L'attribut de titre a un bon but, qui est d'ajouter du texte descriptif au lien, en particulier lorsque le lien lui-même n'exprime pas très clairement l'objectif du lien. Cela permet aux visiteurs de savoir où ces liens les mèneront, et ils ne chargeront pas du tout une page qui peut ne pas être intéressante. Une autre application potentielle consiste à fournir des informations illustratives supplémentaires pour des images, telles que des dates ou d'autres informations non essentielles.

La valeur d'attribut de titre peut être plus longue que la valeur d'attribut ALT. Cependant, il convient de noter que certains navigateurs tronquent le texte trop long (comme les infractions ou autres). Par exemple, le navigateur central de Mozilla ne peut afficher que les 60 premiers caractères. Ceci est considéré comme un bug de Mozilla, et c'est quelque chose auquel vous devez faire attention.

Mon conseil est de m'assurer que le texte de remplacement est essentiel. Dans la plupart des applications, il doit être laissé vide, alt = (notez qu'il n'y a pas d'espaces dans les deux citations). Pensez à ces images, quels types d'informations sont-elles offertes par ces vues, quel texte devez-vous utiliser pour les décrire, ou quelles informations devriez-vous fournir aux personnes qui ne voient pas les images? Écrire le texte de remplacement sur une photo: le PDG debout à l'extérieur du bâtiment, portant un costume gris et une cravate noire, en regardant le ciel, est-ce vraiment utile pour les gens qui ne peuvent pas voir l'image? Si vous le pensez, vous pouvez l'écrire. Dans de nombreux cas, je pense qu'il vaut mieux laisser le texte de remplacement vide.

Pour les attributs de titre, il est difficile de donner des instructions strictes. La majeure partie de mon utilisation est sur des liens qui ne peuvent pas être explicites, comme le même texte de lien sur la même page et différentes pages de liens. Parfois, plus de texte de légende est fourni pour certains boutons ou des éléments de formulaire.

Lorsqu'une image nécessite une description plus longue et dépasse la limitation de l'attribut ALT, il existe certaines options.

La propriété LongDesc peut être utilisée pour fournir des liens vers une page distincte contenant la description du texte de l'image. Cela signifie lier le spectateur à une autre page, ce qui peut entraîner des difficultés de compréhension. De plus, la prise en charge du navigateur pour l'attribut LongDESC est également incohérente, et ce n'est pas très bon.

La propriété LongDESC peut contenir un lien vers une autre partie du document actuel (point d'ancrage) au lieu de lier à une autre page. Dans les notes de bas de page d'accessibilité, Andy Clarke explique comment l'appliquer très bien.

Description Les liens (liens D) peuvent être utilisés pour compléter Longdesc. Un lien de description est un lien régulier qui se connecte à une page contenant du texte alternatif. Le lien est placé à côté de l'image et est OK dans tous les navigateurs. Les gens ont beaucoup d'opinions différentes sur son efficacité, et je n'aime pas cette note à mon avis personnel. WCAG est également, et dans leur projet de techniques HTML de travail pour WCAG 2.0, le lien de description est désapprouvé.

Si une longue description de l'image est utile à n'importe quel spectateur, vous devez envisager de le montrer simplement dans le même document au lieu de lier à d'autres pages ou de le cacher. De cette façon, tout le monde peut le lire. Il s'agit d'une méthode simple et de faible technologie.