ARIA Labels

Bonjour,

à la suite de l'article du forum sur les sliders, je voudrais mettre des ARIA labels sur les carrousels de mes sites (Rôles, états et propriétés ARIA). Ces carrousels sont sans flèche de navigation, réalisés avec la fonction scroolsnap. Le déplacement se fait avec un ascenseur ou avec Maj+Molette de la souris. En mobile, au glissé du doigt. Je ne vois pas trop où mettre ces propriétés dans le html.
J'ai trouvé ceci sur le net :
Dans le cas d’un carrousel ne contenant pas de puces de pagination, l’ensemble des interactions au clavier et des comportements attendus propres au système d’onglets sont à ignorer. Ainsi, dans le socle HTML, les puces de navigation seront supprimées, et l’attribut role="tabéchantillon" présent sur les diapositives sera remplacé par role="group".

Merci pour vos conseils. Le code :

<div class="picture">
<div class="galerie">
  <img src="#" datasrc="Images/Goni-2-Ca.jpg" width="972" height="750" alt="Partition page 1"><div class="legende">Pages 2..... &#x2794;</div>
  <img src="#" datasrc="Images/Goni-3.jpg" width="972" height="750" alt="Partition n'goni page 2">
  <img src="#" datasrc="Images/Goni-4.jpg" width="972" height="750" alt="Partition n'goni page 3">
  <img src="#" datasrc="Images/Goni-5.jpg" width="972" height="750" alt="Partition n'goni page 4">
  <img src="#" datasrc="Images/Goni-6.jpg" width="972" height="750" alt="Partition n'goni page 5">
</div></div>

.picture {
	float?:right;
	width?:18em;
	margin-left?:-2rem;}

.galerie {
	display?:flex;
	width?:45%;
	max-width?:45%;
	margin-left?:4.2em;
	margin-top?:1em;
	scrollbar-color?:red rgba(0,0,0,.15);
	background?:#FFF;
  	scrollbar-width?: thin;
	overflow-x?:scroll; 
	overflow-y?:hidden;
    	scrollsnap-type?: x mandatory;
    	transition-duration?: 2s;
    	opacity?:0;}
    	
.galeriescrolled {
	opacity?:1;}

.galerie?:hover {
    	transition?: all.8s ease-in-out;
	transform?: scale(4);
	z-index?:4000;}
	
.galerie img {
	min-width?:100%;
	margin?:0;
	alignself?: center; 
	overflow?:hidden;
	-msscrollsnap-align?: start end;
	scrollsnap-align?: start end;
	border?:1px solid #000;
	background?:#FFF;} 
    	
.legende {
      	position?:absolute;
      	bottom?:0;
      	width?:40em;
      	padding?:2px;
      	fontsize?:.3em;
      	text-align?:center;
      	opacity?:0;
      	transition-duration?: 2s;
      	background-color?: rgba(200, 200, 200, 0.4);}
  
.galerie?:hover.legende {
      	opacity?:1;
      	transition?: all.8s ease-in-out;}

Modifié par Bongota (11 Nov 2024 - 15:09)

Bonjour,

Ces composants sont-ils utilisables au clavier, en l'absence de flèches de navigation (boutons précédent et suivant) et de pagination (puces/vignettes) ? Avec un ascenseur, je suppose que oui, du moins s'il est natif. Pour une personne malvoyante tout du moins. Une personne non-voyante pourra lire les alternatives textuelles l'une après l'autre puisqu'aucune image n'est cachée via display: none ou équivalent.
Il faut quand même tester l'effet d'opacity: 0;

Sur mobile, idem, cela doit fonctionner au clavier, en tout cas pas qu'au touch (et quand un lecteur d'écran est activé, le touch peut ne plus fonctionner du tout selon comment c'est codé).
Précision : cela doit fonctionner avec un lecteur d'écran et/ou un clavier.

S'il n'y a pas de navigation (ni chevrons ni puces), est-ce que c'est un Carrousel ? S'il y a des images cachées qui peuvent être réaffichées, oui sinon non ce sera autre chose.
En plus des 3 ressources à la fin de l'article de Lisa, je recommande souvent Accessible Slick. C'est le plugin Slick connu pour avoir toutes les options dont un dév peut rêver mais rendu accessible au fil des années. Son seul défaut est d'être en jQuery (dans un projet qui ne l'utilise pas, ça va être naaan) mais les exemples en ligne permettent de choisir l'exemple le plus proche de ton cas et de regarder dans le DOM comment ils font.

Bonjour,
est-ce un slider ? Je l'ai nommé de cette façon, en référence au terme anglais. Ici aussi, un mésusage de cette langue a conduit à des confusions.
Slide = glissade, glisser, diapositive en Anglais.
Slider = curseur, glisseur. Si c'est un adjectif = coulissant.

Alors, on le nomme comme on veut. Il suffit de savoir que dans mon cas, il y a dans un container entre trois et sept images, qui sont des partitions de musique. Bien qu'elles soient utilisées massivement, je rejette les flèches sur les sliders, je les trouve disgracieuses sur une image. Elles sont de plus parfois difficiles à atteindre à la souris. Tout le monde a une souris à molette aujourd'hui. Il suffit de savoir que Maj+Molette = on avance image après image (avec scroll-snap en tous cas).

Quand j'avance au clavier sur mon site avec la touche de tabulation, on atteint le slider et on avance alors sur les images avec les touches du clavier droit et gauche. C'est on ne peut plus pratique, excepté le fait que l'image globale n'est plus agrandie comme avec le survol de la souris. Je ne sais pas comment on fait au clavier pour agrandir une image qui l'était avant au survol de la souris. Une commande existe ?
Dans mon cas précis, il faut aussi reconnaître que la notation musicale traditionnelle ne convient pas aux mal voyants. C'est principalement à cause des notes oubliées (dièses et bémols). Pour rendre les partitions de musique complètement accessibles, il faut adopter une nouvelle notation, comme par exemple :
https://www.dodekamusic.com/fr/dodeka-blog/partition-musique-aveugles-malvoyants/

Tu parles d'un clavier en plus, sur un mobile ? Je suis étonné. J'aimerais avoir un jour entre les mains un vrai lecteur d'écran, afin de tester mes sites.

Un lien intéressant sur le sujet :
https://disic.github.io/guide-integrateur/7-focus.html