Les images

Les images simples avec <img>

<img src="/img/guide.jpg" alt="Illustration">

Voir sur MDN

Les images légendées avec <figure>

<figure>
    <img src="/img/guide.jpg" alt="Illustration">
    <figcaption>Le Guide</figcaption>
</figure>

Les images responsives avec <picture>

<figure>
    <picture>
        <source srcset="/img/illustration.jpeg" media="(min-width: 800px)" />
        <img src="/img/guide.jpg" alt="Illustration">
    </picture>
    <figcaption>Le Guide</figcaption>
</figure>

Voir sur MDN

Accessibilité des images

L’élément clé de l’accessibilité d’une image est son texte alternatif, porté par l’attibut alt. Il existe 3 cas de figures principaux pour définir la façon de remplir cet attribut :

• l’image a un but informatif : l’image représente une information qui est importante vis-à-vis du contenu du site. Il faut alors expliquer l’image et/ou sa signification avec un texte suffisamment exhaustif mais le plus succint possible (il n’y a pas de limite défini pour la longueur du texte alternatif, mais uun texte trop long perd de son efficacité).

<img
    src="/img/guide.jpg"
    alt="illustation en noir et blanc d'un personnage ressemblant à Moïse, entouré de montages, sur un fond quadrillé."
>

• l’image a un but décoratif : l’image ne sert pas le contenu. Elle est là pour embellir la page. On peut alors distinguer 2 possibilités :

  • l’image ne transmet ni information ni émotion (une illustration marrante pour une page 404 par exemple). On va alors privilégier un attribut alt vide.
  • l’image ne transmet pas d’information mais porte des émotions, illustre le contenu de manière subjective et indirecte (elle sert alors à créer une ambiance sur la page). Il est alors préférable de remplir l’attribut alt en décrivant au mieux l’image. Leonie Watson en parle bien sur son blog :

  Like sighted users, we’ll skip around the content of the page until we find something that interests us. If the first few syllables of an alt text sound promising, we’ll pause to read. If they don’t, we’ll move on to the next element on the page. Also like sighted users, we’re often likely to pause on something unimportant, but which captures our imagination.

  source : https://tink.uk/text-descriptions-emotion-rich-images/

• l’image illustre une action : l’image représente un lien, ou un bouton, et il n’y a pas de texte en complément de cette image. Il faut alors remplir l’attribut avec l’action que permet de réaliser l’image.