Figcaption et attr title

bonjour à tous,
Je me suis posé une petite question tout à l'heure, et après avoir réflechis, et bien je reste sans réponses. (article source)

On considère le code suivant :

<figure>
  <img src="un-gout-de-fraise.jpg" alt="" />
  <figcaption>Proposition pour le thème :Un goût de fraise</figcaption>
</figure>

Coté sémantique, si je comprend bien le figcaption contient les mêmes informations que l'attribut alt de l'image ? Alors quel est le plus important / logique ?

Mettre sur chaque image, une figure avec un figcaption ?
Est ce que ce code çi dessous est utile ?

$("document").ready(function({
   $("figure").each(function({
     var txt = $(this).child(img).attr('alt');
   $(this).find('figcaption').html(txt);
  });
})

Codé à l'arrache pardonnez moi, mais en gros pour chaque illustration, on récupère le text alternatif de l'image et on l'injecte dynamiquement dans le figcaption (ou inversement).

pas sur que ce soit utile là.

De plus figcaption permet une longue description et avec un balisage adéquat aux besoins,
Peut-etre que cela aurait put être utile pour l'attribut longdesc ...

l'attribut Alt est un contenu textuel alternatif à l'image manquante ou pas vu et plutôt court et il n'est en principe pas complémentaire.
Modifié par gc-nomade (20 Nov 2015 - 15:13)

Bonsoir,

Non, c'est effectivement complètement inutile d'avoir exactement le même texte à double dans le alt et le <figcaption>. C'est de la redondance.

Pour bien faire la différence entre le alt et <figcaption>, commence par noter cet élément central :
* LE alt est affiché ou lu seulement pour ceux qui sont empêchés de voir l'image
* Au contraire, le contenu de <figcaption> est affiché et lu par tout le monde dans tous les cas, non-voyant ou bien voyant, avec une connexion pourrie ou non, avec un navigateur graphique ou non, etc.


Si tu peux faire en sorte que toutes tes illustrations aient une légende (figcaption) qui soit utile et compréhensible pour n'importe qui (non-voyant ou bien voyant, petite ou grosse connexion, navigateur graphique ou non), alors c'est de loin la meilleure solution; bien meilleur que n'importe quel alt que tu pourra écrire. En plus dans figcaption tu peux utiliser du balisage riche et notamment mettre des liens, chose que tu ne peux pas faire dans un alt, qui doit en principe rester assez court car parfois tronqué à une centaine de caractères.

En règle générale, si l'image est dans un <figure>, le alt devrait être vide. Si le <figcaption> n'est pas comprhéensible pour un non-voyant ou quelqu'un qui n'a pas l'image affichée à proximité, c'est que son contenu est mauvais et ne reflète pas réellement ce qu'il y a sur l'image. Si l'image est dans un <figure> mais qu'il n'y a pas de <figcaption> alors réfléchis-y à deux fois; techniquement <figcaption> n'est pas obligatoire, mais je trouve qu'il le devrait, car pour moi toute illustration doit avoir sa légende.

Au contraire, sauf image purement décorative, le alt doit toujours être rempli si l'image ne se trouve pas dans <figure>. C'est notamment le cas des boutons, smileys...

Donc, si je résume, la règle devrait être la suivante :
* s'il y a figure/figcaption => alt toujours vide
* Pas de figure/figcaption => alt toujours rempli et en aucun cas vide, sauf si l'image est purement décorative

Une image est purement décorative si elle n'apporte aucun sens au message véhiculé, ou autrement dit si le fait de la supprimer ne change pas le sens du contenu.

Plus généralement, la chose à bien voir pour savoir quand utiliser <figure> et <figcaption> ou quand ne pas les utiliser, c'est celle-ci : <figure> est un bloc isolé; il est approprié pour illustrer un article / un paragraphe de texte, par exemple sur le côté / en-dessus / en-dessous. Les images qui ne sont pas dans un <figure> sont directement au fil du texte, c'est utile pour les boutons et smileys car dans ce cas-là un bloc isolé n'a pas de sens.


Petite note bonus: si l'image en <figure> représente un graphique, diagramme, etc. c'est une bonne pratique de fournir à proximité ou en lien les tableaux et autre données sources qui ont permis de les construire. De un pour permettre aux non-voyants d'appréhender les données en détail s'ils le souhaitent et de deux parce qu'on peut faire dire à peu près n'importe quoi aux graphiques en les déformant à dessein, alors n'importe qui qui a un bon esprit critique devrait avoir accès aux source pour vérifier par lui-même s'il le souhaite.
Modifié par QuentinC (20 Nov 2015 - 17:52)