Bonjour,
J'espère avoir franchi un grand pas en remplaçant DIV par BUTTON.
La structure du carrousel dans une page produit est la suivante (pour 2 images, n images sont possibles sans limite) :
<figure class="photos">
<button type="button"><img src="im/pr/2160G.webp" alt="vignette image principale" width="100" height="55" loading="lazy" decoding="async" /></button>
<div><img class="picture" src="im/pr/2160G.webp" id="2160X423Xwebp" alt="Mon beau produit tout neuf" width="280" height="153" fetchpriority="high" decoding="async" /></div>
<button type="button"><img src="im/mu/2160-1G.webp" alt="vignette image 2" width="100" height="46" loading="lazy" decoding="async" /></button>
<div><img src="im/mu/2160-1G.webp" id="2160-1X423Xwebp" alt="image 2" width="280" height="127" loading="lazy" decoding="async" /></div>
</figure>
La structure du même carrousel en pop-up :
<figure role="main">
<button type="button"><img src="im/pr/2160G.webp" alt="Mon beau produit tout neuf" width="100" height="55" loading="lazy" decoding="async" /></button>
<img src="im/pr/2160G.webp" alt="Adaptateur USB 3.0 (3.2 Gen 1) C mâle / RJ45 femelle, Ethernet 5 Gigabit, Roline" width="400" height="218" fetchpriority="high" decoding="async" />
<button type="button"><img src="im/mu/2160-1G.webp" alt="vignette image 2" width="100" height="46" loading="lazy" decoding="async" /></button>
<img src="im/mu/2160-1G.webp" alt="image 2" width="400" height="182" loading="lazy" decoding="async" />
<p><span>Agrandir cette fenêtre afin de mieux voir les détails.</span><button type="button">Fermer</button></p>
</figure>
Les conseils de Niuxe que je rappelle :
Niuxe a écrit :
Accessibilité : les points clés à corriger
1. Navigation clavier sur les miniatures
- Pattern tablist : role="tablist" sur le <ul>, role="tab" sur chaque <button>
- Flèches gauche/droite pour naviguer, Home/End pour premier/dernier
- aria-selected="true" sur l'actif, pas juste .active
- Un seul tabindex="0" dans la liste (le reste tabindex="-1")
2. Labels explicites
- aria-label sur les boutons (ex: "Afficher l'image : manche guitare")
- La miniature active annoncée comme "sélectionnée"
3. Image principale
- alt déjà géré via l'attribut, c'est bon
- Ajouter un role="img" si nécessaire
- Annoncer le changement d'image (aria-live="polite")
4. Zoom accessible (le plus dur)
- Boutons +/- visibles en plus de la molette
- Annonce du niveau de zoom (aria-live="assertive" ou aria-valuenow)
- Au pire, fallback : lien vers l'image plein écran
5. Focus visible
- :focus-visible sur les boutons et la zone zoomable
- Ne pas virer l'outline, la styliser
Le plus critique : navigation clavier + labels, le reste c'est du bonus.
Commençons donc par la navigation clavier.
Curieusement elle fonctionne bien dans le carrousel en page produit mais très mal en pop-up.
Avez-vous une idée sur le mauvais fonctionnement en pop-up ?
Je ne suis pas expert , mais je pense que les attributs aria dont tu aurait besoin sont peut nombreux : 
Voir 