Jour 23: Fournir des équivalents texte pour les images

C'est le jour le plus important de toute la série, donc soyez concentré :

Chaque image de chacune des pages Web de votre site devrait avoir un équivalent text, le si bien nommé "texte alt", fourni dans l'attribut alt de la balise <img>.

Les lecteurs d'écran le lisent, les navigateurs textuelles, l'affichent, Google l'indexe, et les navigateurs l'affichent comme une bulle ou sur la ligne de statut (bien que le concepteur puisse l'annuler). Nous avons déjà vu comment spécifier des textes alt vides pour les images et plusieurs façons de des listes accessibles avec des puces images. Que reste-t-il ?

  • icônes de lien permanent
  • icônes "Hébergé par"
  • icônes d'enveloppes (mailto)
  • icônes XML
  • petits graphiques flottants dans vos publications
  • Toutes autres images que vous ajoutez à vos gabarits.

Ils ont tous besoin d'un texte alt approprié.

Qui en bénéficie ?

  1. Jackie en bénéficie. JAWS lit le texte alt. Sans texte alt valide, Jackie entend le nom du fichier à la place, ce qui est complètement inaudible.
  2. Marc en bénéficie. Lynx, en tant que navigateur texte, n'affiche aucune image, seulement les textes alt. Lynx affiche le nom du fichier, qui est aussi désagrable que de l'entendre avec JAWS.
  3. Michel en bénéficie. Links, en tant que navigateur texte, n'affiche pas les images, uniquement le texte alt. Sans le texte alt, Links n'affiche rien pour une image (à moins que l'image ne soit un lien, dans ce cas Links affiche simplement "[IMG]"). Quand il navigue avec Opera avec les images désactivées, Michel voit le texte alt à la place de l'image.
  4. Liliane en bénéficie. Internet Explorer affiche le texte alt comme une astuce (bien que vous comme concepteur vous puissiez le supprimer).
  5. Google en bénéficie. Googlebot indexe le texte alt, qui est utilisé non seulement pour les recherches par mots clés, mais également dans le cas du moteur de recherche d'images. (Comment pensiez-vous que cela marchait ?)

Comment le réaliser ?

La gabarit par défaut de Movable Type n'inclue pas les balises <img>. Si vous utilisez une image "Propulsé par Movable Type", vous devez vous assurer que la balise <img> comprend l'attribut alt="Propulsé par Movable Type".

Le gabarit par défaut de Greymatter inclut seulement une image, générée par la variable de gabarit {{gmicon}}. Ceci génère une balise <img> qui insère le texte alt approprié, "Powered by Greymatter". NdT: Malheureusement cela n'est pas localisé.

Radio auto-génére les textes alt appropriés pour les icônes standard suivantes :

  • Tasse de café XML : alt="Subscribe to <site name> in Radio UserLand."
  • icône XML: alt="Click to see the XML version of this web page."
  • icône de mail: alt="Click here to send an email to the editor of this weblog."

Cependant, les utilisateurs Radio users auront besoin de spécifier manuellement le texte alt pour toutes images particulières. Allez à Prefs, et puis Customized Images (dans Templates), et ajoutez ces attributs alt :

  • Lien permanent quotidien : alt="Lien permanent : <%longDate%>".
  • Lien permanent particulier : alt="Lien permanent".
  • icône de lien source : alt="source".
  • icône de lien enclos: alt="enclos".

Vous pourriez également ajouter title="" pour supprimer les astuces des navigateurs visuels.

Bien sûr, quelquesoit votre outil de publication, si vous ajoutez vos propres images dans votre gabarit ou si vous avez de petits graphiques flottants dans vos publications, elles ont toutes besoin d'un texte alt approprié. Comme un example vaut mille mots, voici quelques exemples. Des exemples et des principes plus larges sont données dans la section Approfondir.

Exemples de mauvais texte alt.

  • Balisage HTML. Le texte alt peut contenir seulement du texte et des entités, pas de balises.
  • alt="filename.jpg". Ceci ne mène nulle part. Quel est le but du graphique ? On se fout de son nom.
  • alt="alt text". Inséré par des éditeurs HTML comme rappel et laissé par des concepteurs incompétents.
  • alt="Click here!" n'a aucune utilité particulière (à moins bien sûr que ce soit un graphique qui dit "Click here!").
  • alt="Turn images on!" C'est un peu comme si un aveugle vous demandait l'heure et que vous lui répondiez "Ouvrez donc vos yeux !" Une personne peut avoir de bonnes raisons de désactiver les images (bande passante limitée de Michel), Elles peuvent être indisponible (le navigateur textuel de Marc) ou elles ne peuvent pas être off du tout (le lecteur de Jackie qui affiche les images mais dit à haute voix le texte alt).
  • D'autres examples de mauvais texte alt.

Exemples de bons textes alt

  • Jonathon Delacour a un graphique dans le bandeau de sa page qui est un symbole chinois. alt="Site logo: xin, the Chinese character for heart".
  • Leslie Harpold a un bandeau graphique dans page qui inclue le nom du site, "The Historical Present", et une tagline, "Hypermodernism has a posse". alt="the historical present: hypermodernism has a posse".
  • Simon Willison a une vignette "W3C XHTML 1.0". alt="Valid XHTML 1.0!"
  • Jeffrey Zeldman a une barre de navigation texte sous forme graphique ; au moment du passage de la souris, chaque graphique donne une ligne simple dans la barre de statut grâce à Javascript. Bien sûr, les utilisateurs aveugles ne verront pas cela, donc Zeldman a placé le même texte alt de chaque graphique. Tout en douceur.
  • Dean Allen a un graphique dans le bandeau de son site et une tagline. Son texte alt est sur la hauteur de la page et inclue une tagline différente (un peu pertubateur), mais Dean est relativement sympa pour s'en passer. alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie". Note : you are probably not cool enough to get away with this. Restez simple.

Approfondir

 
<< Jour 22 : Utilisez de vraies listes (ou imitez les correctement)  Jour 24 : Fournir des équivalents texte pour les images cliquables >>  Sommaire