Éléments html pour un carrousel d'images

Bonjour,

Cette discussion fait suite à ce sujet.

Dans un carrousel, le clic sur l'image principale ouvre le carrousel dans une pop-up.

Pour l'accessibilité, quelques sont les éléments html les mieux appropriés afin d'encadrer les images.

<div class="pop_up"><img /></div>
<div class="vignette"><img /></div>
<div class="vignette"><img /></div>

Faut-il remplacer div par un autre élément et si oui par quoi ?

Bonjour, pour la sémantique tu peux entourer tes images de la balise <figure>.

Pour l’accessibilité mieux que je ne pourrais en dire :
https://van11y.net/fr/carrousel-accessible/
https://accessuse.eu/fr/carrousels.html
https://a11y-guidelines.orange.com/fr/articles/Carrousel/
https://www.accede-web.com/notices/interface-riche/carrousels/
https://rgaa-checker.com/blog/carrousel-accessibilite-guide
https://www.24joursdeweb.fr/2025/concevoir-et-developper-un-carrousel-accessible-aux-personnes-handicapees

Et d'anciens sujets :
https://forum.alsacreations.com/topic-6-79153-1-Resolu-Carrousel-accessible.html
https://forum.alsacreations.com/topic-6-60698-1-Comment-rendre-un-carrousel-accessible.html
Modifié par casper2 (19 Apr 2026 - 13:58)

Bonjour casper2,

Merci de ton suivi.

casper2 a écrit :
Pour la sémantique tu peux entourer tes images de la balise <figure>.

C'était déjà fait, l'ai publié un code minimal.

Merci pour les liens.
Je vais m'y plonger mais j'ai l'impression que cela concerne surtout les carrousels à base de JS.
Le carrousel dont je parle est à 99 % CSS.
La question porte sur le choix des balises HTML et les aria éventuels.

Bonjour boteha_2

Les liens proposé par casper2 (js) sont plutôt pertinent car tu aura besoin de js pour appliquer et rafraîchir les valeur de quelques attributs aria qui te seront utiles .
Je ne suis pas expert , mais je pense que les attributs aria dont tu aurait besoin sont peut nombreux :

* aria-role et aria-description sur le parent,
* puis eventuellement aria-selected="true" ou false pour les enfants(valeur à rafraichir en js ) si le tabindex=0 est insuffisant .

coté HTML, figure/img et dialog peuvent être considérés Voir https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/dialog#accessibilit%C3%A9 l'accessibilté y est évoquée.

a écrit :
... Lors de l'implémentation de dialogues modaux, tout ce qui n'est pas le <dialog> et son contenu doit être rendu inerte en utilisant l'attribut HTML universel inert. Lorsque l'on utilise <dialog> avec la méthode HTMLDialogElement.showModal(), ce comportement est fourni par le navigateur...

Enfin, n'étant pas expert en accessibilité, je m'abstient dés que j'ai un doute et m'en remet à l'avis d'un expert, qui ne manqueront pas de passé sur ton sujet

Bonjour gcyrillus,

Merci de ton message.

Le carrousel dont je parle est celui sur lequel tu as travaillé dans cette discussion.

Les images n'étant pas toutes de même taille j'ai complexifié un peu la structure.

<figure>
<div class="pop_up"><img /></div>
<div class="vignette"><img /></div>
<div class="vignette"><img /></div>
</figure>

Facile de déterminer une taille fixe donnée aux div (une taille pour les vignettes, une autre pour l'image principale) puis de demander à l'image de remplir un maximum d'espace avec object-fit présenté par tes soins.

Reste donc les questions d'accessibilité sur lesquelles j'essaye d'avancer.

boteha_2 a écrit :

Reste donc les questions d'accessibilité sur lesquelles j'essaye d'avancer.

Bonsoir, En fonction de la documentation fournie plus haut quel est le code que vous avez écrit? Qu'est-ce qui ne fonctionne pas? Quelles sont les difficultés rencontrées? Quels sont les tests que vous avez effectués et comment?

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton message.

Le carrousel dont je parle est celui sur lequel tu as travaillé dans cette discussion.

Les images n'étant pas toutes de même taille j'ai complexifié un peu la structure.

<figure>
<div class="pop_up"><img /></div>
<div class="vignette"><img /></div>
<div class="vignette"><img /></div>
</figure>

Facile de déterminer une taille fixe donnée aux div (une taille pour les vignettes, une autre pour l'image principale) puis de demander à l'image de remplir un maximum d'espace avec object-fit présenté par tes soins.

Je m'en doutais un peu , popup pourrait être ton <dialog> et surtout pense a minima aux textes alt + description de l'image, avant d'entamer autres choses

Cdt

casper2 a écrit :
Bonsoir, En fonction de la documentation fournie plus haut quel est le code que vous avez écrit? Qu'est-ce qui ne fonctionne pas? Quelles sont les difficultés rencontrées? Quels sont les tests que vous avez effectués et comment?

Je n'ai pas encore eu le temps de m'y plonger.
Je vous préviens quand j'avance, encore merci pour les liens et le suivi.

gcyrillus a écrit :
Pense a minima aux textes alt + description de l'image, avant d'entamer autres choses

C'est noté.

Bonjour,

Je reviens sur le sujet.

La structure du carroussel est actuellement la suivante :

<figure class="photos">
<div><img tabindex="0" src="im/pr/1721G.webp" alt="" width="100" height="58" loading="lazy" decoding="async" /></div>
<div><img src="im/pr/1721G.webp" id="1721X435Xwebp" alt="Texte de présentation du produit" width="280" height="162" fetchpriority="high" decoding="async" /></div>
<div><img tabindex="0" src="im/mu/1721-1G.webp" alt="" width="100" height="46" loading="lazy" decoding="async" /></div>
<div><img src="im/mu/1721-1G.webp" id="1721-1X435Xwebp" alt="" width="280" height="127" loading="lazy" decoding="async" /></div>
<div><img tabindex="0" src="im/mu/1721-2G.webp" alt="" width="100" height="49" loading="lazy" decoding="async" /></div>
<div><img src="im/mu/1721-2G.webp" id="1721-2X435Xwebp" alt="" width="280" height="135" loading="lazy" decoding="async" /></div>
</figure>

Il n'y a pas de bouton avant ou arrière. Au survol de la vignette tabindex="0" la grande image de la ligne suivante apparait.
C'est fait en CSS uniquement.

Facile de déterminer une taille fixe donnée aux div (une taille pour les vignettes, une autre pour l'image principale) puis de demander à l'image de remplir un maximum d'espace avec object-fit.

J'ai une petite alerte de PageSpeed Insights :

PageSpeed Insights a écrit :
L'arborescence d'accessibilité n'est pas bien formée
Une arborescence d'accessibilité bien formée aide les agents IA à naviguer sur la page et à interagir avec elle.

Pour les vignettes j'ai essayé de remplacer <div> par <button>
Mais alors tabindex dans img est interdit.

J'ai parcouru les liens de casper2 sans trouver de réponse bien claire.

Pour commencer savez-vous en quoi "L'arborescence d'accessibilité n'est pas bien formée " ?

Merci d'avance.

Bonjour, je trouve étonnant que tu mette un alt vide sur une image accessible via tabindex. Je pense que c'est une erreur de pouvoir naviguer d'élément en éléments sans alternative textuelles pour les décrire.

Mes 5 cents

Bonjour gcyrillus,

Merci de ton suivi.

Il y a l'image par défaut dont le alt est renseigné.

Cette image est supposée être celle qui représente le mieux le produit.

Ensuite il y a une ou plusieurs images complémentaires accessibles par survol ou click sur les vignettes, tu connais le système car tu as conçu le code.

Je veux bien renseigner les alt des vignettes mais franchement c'est impossible de traduire en texte intelligent les images variantes d'un même produit.
Autre approche, alt="vignette n°2", cela me semble ne présenter aucun intérêt.

Par ailleurs cela ne résout pas le problème d'arborescence mal formée selon Google.

Qu'en penses-tu ?