Texte alternatif et description d'image

Pour l’instant, dans la médiathèque, on gère un titre et une description pour un média ; d’ailleurs récupérés si possible dans les méta-données du fichier au moment du dépôt, si celles-ci existent et les comportent.

Sur le web on utilise pour les images un texte alternatif, et parfois ou souvent une légende pour accompagner l’image1.

Avec Dotclear on propose, au moment de l’insertion d’une image dans un billet ou une page d’utiliser le titre et l’image avec les choix suivants :

  • Titre et légende
  • Titre
  • Aucun

Par ailleurs on propose aussi d’intégrer cette image sous forme de lien vers l’image originale, ce qui peut être utile lorsqu’on insère une miniature :

  • Image simple
  • Avec un lien vers l’image originale

On se retrouve donc avec une matrice de choix possible représentable de la façon suivante, qui donne ensuite ce code HTML (version 2.28 de Dotclear)2 :

Éditeur legacyEditor

Mode Wiki

Légende et titre Lien vers l’original HTML
Aucun Simple <img src="/public/image.jpg" alt="">
Titre Simple <img src="/public/image.jpg" alt="Mon titre">
Titre et légende Simple <figure><img src="/public/image.jpg" alt="Mon titre" title="Mon titre"><figcaption>Ma légende</figcaption></figure>
Aucun Avec un lien <a href="/public/image.jpg"><img src="/public/image.jpg" alt=""></a>
Titre Avec un lien <a href="/public/public.jpg" title="Mon titre"><img src="/public/image.jpg" alt="Mon titre"></a>
Titre et légende Avec un lien <a href="/public/image.jpg" title="Mon titre"><figure><img src="/public/image.jpg" alt="Mon titre" title="Mon titre"><figcaption>Ma légende</figcaption></figure></a>

L’attribut title quand il est présent avec l’attribut alt reprend l’exact contenu de ce dernier, ce qui est clairement inutile, voire contre-productif puisque que ce contenu dupliqué peut être lu deux fois par les lecteurs d’écran.

Mode HTML

Légende et titre Lien vers l’original HTML
Aucun Simple <img src="/public/image.jpg" alt="">
Titre Simple <img src="/public/image.jpg" alt="Mon titre">
Titre et légende Simple <figure><img src="/public/image.jpg" alt="Mon titre" title="Mon titre"><figcaption>Ma légende</figcaption></figure>
Aucun Avec un lien <a href="/public/image.jpg"><img src="/public/image.jpg" alt=""></a>
Titre Avec un lien <a href="/public/public.jpg" title="Mon titre"><img src="/public/image.jpg" alt="Mon titre"></a>
Titre et légende Avec un lien <a href="/public/image.jpg" title="Mon titre"><figure><img src="/public/image.jpg" alt="Mon titre" title="Mon titre"><figcaption>Ma légende</figcaption></figure></a>

Même remarque que ci-dessus pour l’attribut title, inutile.

Mode Markdown

Légende et titre Lien vers l’original HTML
Aucun Simple <img src="/public/image.jpg" alt="">
Titre Simple <img src="/public/image.jpg" alt="Mon titre">
Titre et légende Simple <figure><img src="/public/image.jpg" alt="Mon titre" title="Ma légende"><figcaption>Ma légende</figcaption></figure>
Aucun Avec un lien <a href="/public/image.jpg"><img src="/public/image.jpg" alt=""></a>
Titre Avec un lien <a href="/public/public.jpg" title="Mon titre"><img src="/public/image.jpg" alt="Mon titre"></a>
Titre et légende Avec un lien <a href="/public/image.jpg" title="Mon titre"><figure><img src="/public/image.jpg" alt="Mon titre" title="Ma légende"><figcaption>Ma légende</figcaption></figure></a>

L’attribut title quand il est présent avec l’attribut alt reprend le contenu de la légende, pas certain que ce soit utile.

Éditeur CKEditor

Légende et titre Lien vers l’original HTML
Aucun Simple <img src="/public/image.jpg" alt="">
Titre Simple <img src="/public/image.jpg" alt="Mon titre">
Titre et légende Simple <figure><img src="/public/image.jpg" alt="Mon titre"><figcaption>Ma légende</figcaption></figure>
Aucun Avec un lien <a href="/public/image.jpg"><img src="/public/image.jpg" alt=""></a>
Titre Avec un lien <a href="/public/public.jpg" title="Mon titre"><img src="/public/image.jpg" alt="Mon titre"></a>
Titre et légende Avec un lien <a href="/public/image.jpg" title="Mon titre"><figure><img src="/public/image.jpg" alt="Mon titre"><figcaption>Ma légende</figcaption></figure></a>

A priori c’est correctement géré avec cet éditeur.

À faire

  • Corriger l’éditeur legacyEditor pour ne pas utiliser l’attribut title pour l’élément img.
  • Idem pour l’extension legacyMarkdown (ne pas utiliser l’attribut title dans img).
  • Ne pas autoriser l’insertion avec un lien sur une image sans texte alternatif.

Questions

  1. Est-ce qu’il faut renommer titre en texte alternatif et description en légende pour être cohérent avec leur usage respectif ?
  2. Est-ce qu’il faut utiliser le texte alternatif comme légende si la légende du média est manquante et qu’on demande l’insertion de l’image avec le texte alternatif et la légende ?
  3. Est-ce que les métadonnées pays, ville et date doivent être ajoutées au texte alternatif (comme c’est le cas aujourd’hui) ou plutôt à la légende ?
  4. Est-ce que le titre du lien ne devrait pas être plutôt systématiquement « Ouvrir l’image », voire « Ouvrir le média » ?

Réponses

  1. A priori je penche pour « texte alternatif » et « légende ».
  2. Ne plus utiliser le texte alternatif comme légende si celle-ci n’est pas définie ; à l’auteurice de gérer ça.
  3. Ajouter les métadonnées, si réglé comme tel dans les paramètres du blog, à la seule légende.
  4. C’est une alternative intéressante.

Mesdames et messieurs les savant·es en accessibilité numérique, vous en pensez quoi ?


  1. Je ne vais parler que d’image ici, vu que c’est l’usage le plus courant. ↩︎

  2. Je pars du principe que l’image possède un titre et une légende. ↩︎

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/15912

Haut de page