É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