18041 sujets

Questions générales et questions de débutants

[Résolu] Plusieurs <figcaption> pour une <figure> ?

Bonjour à tous

Voulant mettre au-dessus d'une image un titre, et au-dessous de celle-ci une explication plus détaillée, j'ai eu l'idée de mettre dans <figure> un <figcaption> avant l'image et une autre après l'image.

Ça marche ! Seul problème, le validateur du W3C ne veut pas entendre parler de la deuxième balise <figcaption> :
Error: Element figcaption not allowed as child of element figure in this context. (Suppressing further errors from this subtree.)

From line 233, column 5; to line 233, column 16

0" />? <figcaption>

Mon code :
<div id="img_op"> 
			 <figure class="fig_1">
			 <figcaption> Offensive de Mailly-Raineval</figcaption>
			 
			 <img src="images/Mailly-Raineval_Ens3.jpg" alt="" height="300" />
			 <figcaption>Le 12 juillet à 7h30 après une préparation d'artillerie<br/>  de deux heures, le Régiment s'élance à l'assaut<br/>  et enlève brillamment les objectifs qui lui ont été assignés <br/> et qui tous furent atteints à 8h30. </figcaption>  
			 </figure>
		</div>


Qui a une explication ? Le W3C a sûrement raison, néanmoins ça fonctionne, et y a-t-il un moyen [b]conforme[/i] pour obtenir le résultat ?

Merci d'avance pour votre expertise Smiley biggrin
Bonsoir,

Moi je vous dirais de suivre les spécifications en changeant votre html :
<div id="img_op">
    <h2>Offensive de Mailly-Raineval</h2>
    <figure class="fig_1">
        <img src="images/Mailly-Raineval_Ens3.jpg" alt="A compléter absolument car cet attribut est très important" height="300" />
        <figcaption>Le 12 juillet à 7h30 après une préparation d'artillerie de deux heures, le Régiment s'élance à l'assaut et enlève brillamment les objectifs qui lui ont été assignés et qui tous furent atteints à 8h30.</figcaption>  
     </figure>
</div>

Vous arriverez à un rendu similaire à celui de départ en modifiant vos CSS.

EDIT : à quoi servent les <br> ? Le CSS suffit amplement...
Modifié par Olivier C (01 Sep 2016 - 18:56)
Je suis d'accord avec Olivier, ton premier figcaption ressemble beaucoup à un titre, qui devrait donc être balisé comme tel.


Pour ton deuxième figcaption, quelque chose qui n'a rien à voir, mais j'éviterais les <br> au milieu des phrases qui semblent n'avoir que l'affichage comme raison d'être. Il vaut mieux utiliser des CSS pour fixer une longueur adéquate et laisser le navigateur aller à la ligne naturellement.
Bonsoir,

Merci à Olivier et Quentin pour leurs suggestions, que je vais essayer de mettre à profit.

Toutefois deux choses me gênent toujours : ce qu'on peut considérer comme un titre est en réalité la véritable légende de l'image, d'où ma réaction de le mettre en <figcaption> (ce qui par parenthèse rend inutile le renseignement du "alt"). Mais comme j'ai éprouvé le besoin de compléter l'information sous l'image, comment le faire sans recourir à une seconde <figcaption> ?

Et par ailleurs, pourquoi est-ce que ça fonctionne (sous Firefox, Chrome et IE11) ?

Pour les <br>, vous avez raison, c'est de la fainéantise mal placée Smiley confused (mais ça n'a pas affolé le validateur).
Il faut bien faire la distinction entre ce qui est "valide" et ce qui "fonctionne" :

On pourrait tout coder sans aucun respect d'une quelquonque sémantique html. Ce serait invalide (passablement affreux) mais possible dans la mesure où les navigateurs suppléeraient aux défaillances de conception et afficheraient tout de même un rendu...
Modifié par Olivier C (01 Sep 2016 - 22:50)
Bonjour,

Merci aux intervenants, qui m'ont permis de comprendre mon problème. D'accord avec Olivier C pour distinguer le code "valide" du code "efficace", les <br> du code de départ en sont une bonne illustration !

Je crois que mon problème est venu du fait que je n'ai vu nulle part (mais c'est peut-être écrit là où je ne suis pas allé) que la balise <figure> n'admet qu'une balise <figcaption> destinée à recevoir la "légende" de l'image (avec des détails si on le souhaite ...).
Cela étant, et suite à vos avis, je me suis aperçu qu'on pouvait mettre dans la "figure" non seulement une image mais aussi un texte (et peut-être encore d'autres choses ?). J'ai donc résolu ma difficulté en remplaçant la seconde <figcaption> fautive par un paragraphe que j'ai doté des mêmes propriétés d'affichage que celle-ci, et le résultat est correct : le rendu est obtenu, et ma <figcaption> a bien la signification que lui attribue la norme. En prime, j'ai supprimé les ruptures de lignes sans aucun dommage Smiley cligne
Modérateur
Effectivement, il y a d'ailleurs deux manière de faire selon la nature du contenu:


<figure>
  <figcaption>blah blah</figcaption>
  <img>
  <p> texte </p>
</figure>

ou

<figure>
  <img>
  <figcaption>
    <h3>titre</h3>
    <p>description</p>
  </figcaption>
</figure>


Mais à mon sene l'exemple d'Olivier est problématique, car en sortant le «titre» celui-ci servira aussi pour ce qui vient après le figure comme par exemple:


<h2>Gravures célèbres de guerre</h2>
<figure>
<figure>
<p>
<p>
<figure>
<p>
Modérateur
oldmerou a écrit :
un titre est en réalité la véritable légende de l'image, d'où ma réaction de le mettre en <figcaption> (ce qui par parenthèse rend inutile le renseignement du "alt")

p.s. : un alt doit être descriptif de l'image, alors qu'une légende vient généralement apporter un renseignement supplémentaire ou annexe, exemple:

<figure>
  <img src="mer.jpg" alt="Carré bleu sur fond vert">
  <figcaption>«la mer», huile sur toile, 1927</figcaption>
</figure>

Lorsque la légende équivaut au alt, généralement la légende est inutile, car le alt renseigne sur ce qui est évident sur l'image.
Modifié par kustolovic (02 Sep 2016 - 14:08)
S'il y a un bon figcaption, remplir le alt est très secondaire, le plus souvent on peut simplement le laisser vide.
Le risque d'ajouter un alt en plus du figcaption est de tomber dans le travers de la redondance inutile

Je m'explique sur le pourquoi du alt vide dans ce genre de cas:
- Soit la légende suffit ou devrait suffire car l'image a essentiellement une fonction illustrative, i.e. n'aide pas à comprendre l'article
- soit ton image est indispensable à la compréhension de l'article et alors demanderait très probablement une description beaucoup plus détaillée, qui a très vite avantage à se trouver plus bas dans le texte ou sur une autre page. Par exemple pour un graphique, donner les chiffres et tendances; ou pour décrire en détail une peinture sur un site qui parle d'histoire de la'rt... Pour rappel certains lecteurs d'écran peuvent être configurés pour couper sauvagement les alt trop longs qui ont plus d'une centaine de caractères.

Pour moi, ceci est l'archétype du mauvais exemple :


<figure>
  <img src="mer.jpg" alt="Carré bleu sur fond vert">
  <figcaption>«la mer», huile sur toile, 1927</figcaption>
</figure>


- Soit ton article n'a rien à voir avec ce tableau, et alors il n'est là qu'à titre illustratif et le plus souvent je me fiche plus ou moins de ce qu'il représente (si ça m'intéresse je peux toujours faire une recherche ailleurs vu que tu donnes le nom de l'oeuvre et l'année)
- Soi tu me parles d'histoire de l'art et alors la description que tu donnes est beaucoup trop courte

a écrit :
Lorsque la légende équivaut au alt, généralement la légende est inutile, car le alt renseigne sur ce qui est évident sur l'image.


Je dirais plutôt que c'est l'inverse ! Si la légende est bonne, alors le alt est inutile, et c'est la légende qui devrait être obligatoire (j'ai un doute, je ne suis plus sûr si elle l'est, je crois que oui).

Juste pour être clair, je parle bien ici des images dans le cadre de <figure>. Le alt reste un élément absolument primordial pour l'accessibilité dans le cas des images inline qui ont une fonctions précise dans une interface, p.ex. bouton, icône...
La logique avec <figure> est complètement différente.
Modérateur
Merci de la rectification, en effet, en y réfléchissant, mon exemple était plutôt moisi.

En effet, un figcaption peut remplacer un alt, mais pas systématiquement, quelques exemples plus cohérents:

alt = Un home glisse sur une peau de banane
figcaption = L'humour varie beaucoup avec le temps

alt = blabla
figcaption = © F.Pignon 1987

alt = blabla
figcaption = figure 2 (pour référence dans le corps de l'article)

etc.

On peut aussi avoir plusieurs images dans une figure, etc.

a écrit :
Je dirais plutôt que c'est l'inverse ! Si la légende est bonne, alors le alt est inutile, et c'est la légende qui devrait être obligatoire (j'ai un doute, je ne suis plus sûr si elle l'est, je crois que oui).

Là-dessus, je ne suis pas d'accord, une légende n'a pas pour but d'apporter explication équivoque de l'image (ce serait détourner/limiter son utilité), d'ailleurs elle est complètement facultative.

a écrit :
Soit ton article n'a rien à voir avec ce tableau, et alors il n'est là qu'à titre illustratif et le plus souvent je me fiche plus ou moins de ce qu'il représente

Figure est justement déstiné à des éléments de contenu, son usage pour des éléments annexes, décoratifs et autre est découragé.
Modifié par kustolovic (02 Sep 2016 - 22:55)
a écrit :

alt = Un home glisse sur une peau de banane
figcaption = L'humour varie beaucoup avec le temps


C'est bien, on se corrige les uns les autres. Pour cet exemple-là tu as parfaitement raison, je n'y avais pas pensé.
Ca invalide donc une partie de mes propos d'hier soir.


a écrit :
Figure est justement déstiné à des éléments de contenu, son usage pour des éléments annexes, décoratifs et autre est découragé.


Il ne me semblais pas l'avoir nécessairement compris de cette façon. Qu'utiliserais-tu à la place dans ce cas ?
Modérateur
Selon la norme, ils favorisent plutôt aside:

a écrit :

For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn't part of the content, it's a repetition of the content for the purposes of enticing readers or highlighting key topics.
Sujet clos
Aller à