6.4. Baliser les images légendées avec <figure role="figure"> et <figcaption>

Les images légendées doivent être balisées avec <figure role="figure"> et <figcaption>.

La balise <figure role="figure"> doit :

Remarque

Idéalement, le texte de remplacement de l’image (l’attribut alt pour la balise <img />, par exemple) doit contenir une référence à la légende adjacente.

Exemple 1

Trois lamas dans le désert en Bolivie.
Désert en Bolivie, prise de vue par Audesou.
<figure role="figure" aria-label="Désert en Bolivie, prise de vue par Audesou.">
   <img src="…" alt="Trois lamas dans le désert en Bolivie." />
   <figcaption>
      Désert en Bolivie, prise de vue par Audesou.
   </figcaption>
</figure>

Exemple 2

Trois lamas dans le désert. [photo 1]
Photo 1 : prise de vue par Audesou en Bolivie.
<figure role="figure" aria-label="Photo 1 : prise de vue par Audesou en Bolivie.">
   <img src="…" alt="Trois lamas dans le désert. [photo 1]" />
   <figcaption>
      Photo 1 : prise de vue par Audesou en Bolivie.
   </figcaption>
</figure>

15 commentaires

  • Par claire bizingre, le 21 septembre 2015 à 09:33.

    Bonjour,

    Cette notion de référence dans l’alternative à la légende m’a toujours embêté !!

    Si je ne me trompe pas, c’est pour combler la non prise en compte du rôle group par certains lecteurs d’écran.

    Si il n’y a qu’une seule image dans mon texte, je vais avoir du mal à suggérer aux rédacteurs de rajouter photo 1 devant la légende.

    Une autre solution pourrait de commencer l’alternative par le début de la légende. Ici on aurait dans l’alternative : Désert de Bolivie, trois lamas. et la légende : Désert de Bolivie, prise de vue par Audesou ou en février 2013. Plus significatif que photo1 !!!

    Qu’en pensez-vous?

    Répondre

    • Par Johan Ramon, le 22 septembre 2015 à 10:12.

      Bonjour Claire,

      Merci pour ton commentaire et ta proposition que nous trouvons très pertinente !
      Nous avons donc ajouté ton exemple.

      Johan

      Répondre

  • Par Sébastien Delorme, le 20 avril 2016 à 09:23.

    Suite à une discussion en formation, je propose qu’on retire la mention « Bolivie » de l’alternative de l’image.

    Cette information n’est pas déterminable en regardant l’image, et par contre, a bien sa place dans la légende.

    Cela donnerait donc :

    <figure role="group">
       <img src="…" alt="Trois lamas dans le désert en Bolivie. [photo 1]" />
       <figcaption>
          Photo 1 : prise de vue par Audesou en Bolivie en février 2013.
       </figcaption>
    </figure>
    

    À reproduire sur les deux exemples.

    Répondre

  • Par Véronique Leclerc, le 7 juillet 2016 à 20:29.

    Bonjour,

    serais-ce possible de connaitre sur référentiel est basé cette norme? Surtout concernant la notion de référence dans le texte alternatif et la légende de l’image?

    Merci beaucoup

    Répondre

    • Par Sébastien Delorme, le 8 juillet 2016 à 10:36.

      Bonjour Véronique,

      Nous nous appuyons sur le RGAA (Référentiel Général d’Accessibilité pour les Administrations).

      Il s’agit précisément du critère 1.10 [A] Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ? et le dernier point du test 1.10.1 : Le contenu de l’attribut alt de l’image contient une référence à la légende adjacente..

      L’intérêt pour l’utilisateur d’un lecteur d’écran est assez fort. Lorsqu’il lit une légende, cela lui permet de comprendre qu’elle est rattachée à un visuel (en inversement). Sans cela, il peut être très perturbant de lire une légende sans comprendre à quoi elle est rattachée (avec le risque de l’interpréter comme un texte qui vient de nulle part).

      Bien à vous,
      Sébastien.

      Répondre

  • Par Bruno, le 5 août 2016 à 15:51.

    Bonjour,

    dans le figcaption, ça m’embête de mettre « Photo 1 : ». Que puis-je ?

    Merci

    Répondre

    • Par Sébastien Delorme, le 5 août 2016 à 17:01.

      Bonjour,

      L’objectif étant que l’alternative de l’image fasse référence à la légende, il est possible de le faire par d’autres biais.

      L’exemple numéro 1 est une autre possibilité.

      Une autre solution peut être de préciser simplement dans l’alternative (alt) de l’image : « Voir légende ci-après » (notez que « ci-après » est plus recommandé que « ci-dessous » qui implique une positionnement visuel pas forcément clair pour un utilisateur de lecteur d’écran).

      Bien à vous,
      Sébastien.

      Répondre

  • Par Bruno, le 8 août 2016 à 09:49.

    Bonjour,

    en effet dans l’exemple 2, cela me gêne de mettre « Photo 1 » en visible à l’internaute

    • pour raison esthétique
    • cela suggère que c’est la 1ère et qu’il y a une photo 2 par ex.
    • si on suit la logique de l’accessibilité qui dit que les intitulés doivent être explicites et compréhensibles quand ils sont seuls, ce n’est pas correct de terminer le alt par « [photo 1] »

    je travaille sur un site de news, c’est pas pratique de se calquer sur l’exemple 1 (dans le alt, terminer par un ensemble de mots et débuter par ces mots dans le figcaption) ou 2.

    Le fait que la balise img et figcaption soit englobés par figure qui a en plus un role group, cela ne suffit pas à légender ?

    Répondre

    • Par Sébastien Delorme, le 8 août 2016 à 15:14.

      Je comprends tout à fait.

      Le fait que la balise img et figcaption soit englobés par figure qui a en plus un role group, cela ne suffit pas à légender ?

      Non car actuellement les aides techniques ne supportent pas entièrement toutes ces balises.

      Aussi, il est intéressant quand on consulte la liste des images avec une synthèse vocale de savoir qu’on peut atteindre une légende plus bas. Ou inversement quand on écoute une légende de savoir à quoi elle se rattache.

      Le plus simple est donc simplement d’utiliser « Photographie, voir légende ci-après » comme alternative.

      si on suit la logique de l’accessibilité qui dit que les intitulés doivent être explicites et compréhensibles quand ils sont seuls, ce n’est pas correct de terminer le alt par « [photo 1] »

      Cette règle s’applique sur les liens, pas sur les alternatives données aux images.

      Bien à vous,
      Sébastien.

      Répondre

  • Par bruno, le 19 août 2016 à 10:09.

    Rebonjour,

    Merci. Du coup, nous qui misons beaucoup sur google, tient-t-il du alt des images pour les indexer ?

    On peut se retrouver avec beaucoup de fois « Photographie, voir légende ci-après » et ce n’est plus pertinent pour lui.

    De même que : « Trois lamas dans le désert en Bolivie. » Jusque là ça va, mais le fait d’ajouter Photo 1, c’est du parasite pour google.

    Très difficile de faire un choix entre SEO et les utilisateurs.

    MErci

    Répondre

    • Par Sébastien Delorme, le 19 août 2016 à 10:30.

      Mais il faut parfois faire des choix :)

      Oui Google analyse les alternatives des images. Mais en toute honnêteté, sur une page avec probablement plusieurs milliers de mots, 3 ou 4 mots dans une alternative ne devraient avoir quasi-aucun impact sur le SEO.

      La recherche sur Google de Trois lamas dans le désert donne cette image comme premier résultat dans Google Images et cette page arrive dans quatrième position dans la recherche classique.

      Je la cherche toujours dans les résultats de : légende ci-après :).
      Pourtant le nombre d’occurrences dans la page est quasi-identique.

      Et le nombre élevé d’apparition du terme Photo ne semble pas vraiment déranger.

      Plus sérieusement, il faudrait faire un vrai test, mais je suis intimement persuadé que le respect de l’exemple 1 comme 2 dans cette fiche ne peut qu’être bénéfique pour le SEO.

      Bien à toi,
      Sébastien.

      Répondre

  • Par goetsu, le 2 septembre 2016 à 14:38.

    A noter l’utilisation de l’élément figcaption est optionnel selon le RGAA.

    Répondre

  • Par goetsu, le 2 septembre 2016 à 15:22.

    A noter également l’ajout de role="group" ne sert à rien actuellement d’après les tests que j’ai fais nvda et voiceover n’ont aucun comportement particulier.

    Avec jaws 17 + FF il annonce groupe + la légende quand on arrive sur le bloc que ce soit avec le role ou sans car c’est la combinaison figure + figcaption qui déclenche cela.

    Si on veut que cela fonctionne dans jaws 17 + ie et dans Voiceover la structure a utilisée est :

    <figure role="group" aria-labelledby="iddelalegende">
      <img alt="mon texte alt" />
      <figcaption id="iddelalegende">légende de mon image</figcaption>
    </figure>
    

    Par contre NVDA restera toujours à la traine

    Répondre

  • Par Steven, le 26 janvier 2018 à 16:21.

    Bonjour,

    Ne faudrait-il pas modifier l’article par rapport au commentaire de Sébastien qui me parait tout à fait pertinent. En effet rien dans l’image ne permet de dire que c’est spécifiquement la Bolivie.

    Répondre

    • Par Sébastien Delorme, le 26 janvier 2018 à 16:32.

      Bonjour Steven,

      Merci pour ta remarque.
      Effectivement, nous avions apparemment oublié de faire la mise à jour. C’est rectifié.

      Sébastien.

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page