Comment faire accessibilité et éco-conception @Démo publique

Fiche: Image, légende et descripton longue

Les images doivent avoir des alternatives textuelles qui décrivent l'information ou la fonction qu'elles représentent. Cela garantit que les images peuvent être utilisées par des personnes ayant diverses incapacités.
Cela permet à tout le monde de voir les images et parfois de simplement les ignorer sans aucune pollution.

Les principaux types d'images sont :

• Images informatives : Images qui représentent graphiquement des concepts et des informations, généralement des images, des photos et des illustrations. L'alternative textuelle doit être au moins une courte description transmettant l'information essentielle présentée par l'image.
• Images décoratives : Fournir une alternative textuelle nulle (alt="") lorsque le seul but d'une image est d'ajouter une décoration visuelle à la page, plutôt que de transmettre une information importante pour la compréhension de la page.
• Images fonctionnelles : L'alternative textuelle d'une image utilisée comme lien ou bouton doit décrire la fonctionnalité du lien ou du bouton plutôt que l'image visuelle. Des exemples de telles images sont une icône d'imprimante pour représenter la fonction d'impression ou un bouton pour soumettre un formulaire.
• Images de texte : Du texte lisible est parfois présenté dans une image. Si l'image n'est pas un logo, éviter le texte dans les images. Cependant, si des images de texte sont utilisées, l'alternative textuelle doit contenir les mêmes mots que dans l'image.
• Images complexes telles que graphiques et diagrammes : Pour transmettre des données ou des informations détaillées, fournir un équivalent textuel complet des données ou informations fournies dans l'image en tant qu'alternative textuelle.

Les alternatives, c'est bien, mais vous pouvez aussi utiliser une légende. Non seulement elle offre une place appropriée sur la page pour les images informatives, mais elle apporte également de très bons résultats pour le SEO.
Le SEO ne doit pas utiliser l'alternative pour faire ce travail, la légende doit être utilisée dans ce cas. Simple et efficace.

En utilisant une légende, il faut faire attention à ne pas avoir d'informations redondantes entre la légende et l'attribut alt.
La plupart du temps, avec une légende complète, l'alternative devrait être vide. C'est à vous de voir.

[figure]
	[img]
	[figcaption]

[img] <-- alt / aria-labelledby longDesc
[div] <-- longDesc

[img] <-- alt / aria-labelledby longDesc
[p] <-- lien longDesc
[div] <-- longDesc

Implémentation

Une image avec une légende

Une image avec une description longue cachée

Une promenade dans le matin gris et pluvieux d'une capitale. Quelques pas lorsque, soudain, au détour d'un escalier, des gouttelettes perlent et traversent l'espace sans jamais s'écraser sur le sol.

Le cuivre tigré semble avoir le pouvoir de retenir le temps et la matière. Suspension dans un temps déjà disparu. La bruine a repris contrôle du temps et de l'espace.

Une image avec une description longue cachée mais accessible à tous

Lire la description de l'image

Encore et toujours ce cuivre cuivré, rampe vers un moment qui n'existe pas. Une brèche dans un temps qui n'attend pas. Et pourtant, le temps suspendu tord l'espace dans un voyage improbable où tout reste suspendu à une goutte.

<section>
    <h4>Une image avec une légende</h4>
    <figure>
        <img src="<?php echo $REP["picto"]; ?>pluvieux.webp" alt="">
        <figcaption>Un matin pluvieux et une belle promenade à Paris</figcaption>
    </figure>
</section>
<section>
    <h4>Une image avec une description longue cachée</h4>
    <img aria-labelledby="ld5" src="<?php echo $REP["picto"]; ?>pluvieux.webp" alt="Un matin pluvieux">
    <div class="longDesc sr-only" id="ld5">
        <p>Une promenade dans le matin gris et pluvieux d'une capitale. Quelques pas lorsque, soudain, au détour d'un escalier, des gouttelettes perlent et traversent l'espace sans jamais s'écraser sur le sol.</p>
        <p>Le cuivre tigré semble avoir le pouvoir de retenir le temps et la matière. Suspension dans un temps déjà disparu. La bruine a repris contrôle du temps et de l'espace.</p>
    </div>
</section>
<section>
    <h4>Une image avec une description longue cachée mais accessible à tous</h4>
    <img aria-labelledby="ld6" src="<?php echo $REP["picto"]; ?>pluvieux2.webp" alt="Un matin pluvieux partie 2">
    <p><a href="javascript:voir('ld6')">Lire la description de l'image</a></p>
    <div class="longDesc cache" id="ld6">
        <p>Encore et toujours ce cuivre cuivré, rampe vers un moment qui n'existe pas. Une brèche dans un temps qui n'attend pas. Et pourtant, le temps suspendu tord l'espace dans un voyage improbable où tout reste suspendu à une goutte.</p>
    </div>
</section>