1185 sujets

Accessibilité du Web

É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.
Modérateur
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 .
Smiley attention 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 Smiley smile 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 Smiley smile
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?
Modérateur
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.

&lt;figure&gt;
&lt;div class="pop_up"&gt;&lt;img /&gt;&lt;/div&gt;
&lt;div class="vignette"&gt;&lt;img /&gt;&lt;/div&gt;
&lt;div class="vignette"&gt;&lt;img /&gt;&lt;/div&gt;
&lt;/figure&gt;


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 Smiley smile , popup pourrait être ton <dialog> et surtout pense a minima aux textes alt + description de l'image, avant d'entamer autres choses Smiley smile

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é.
Prévenir un modérateur
Répondre au sujet
Aller à