Aria label

Bonjour,
faisant un test sur Lighthouse afin de vérifier si tout était en place sur un site, j'ai un avertissement :
"Des éléments utilisent des attributs ARIA interdits"

<div class="volumeF" aria-label="Volume : 1" tabindex="0">

Ce code est situé dans le JavaScript du lecteur audio. Un bout de ce code :

a.setAttribute("aria-label","Volume : "+c.

Voilà un moment que ceci traine sur mon code JavaScript, mais j'ai décidé cette fois de régler ça.

Hello.

C'est curieux en effet. Les éléments en question n'ont pas un "role" incompatible, comme "presentation", par hasard ?

Salut,
je mets ici ce code JavaScript. Comme il est long et minimisé, j'ai coupé arbitrairement le code pour ne mettre que ce qui concerne mon problème. Ce code m'avait déjà été signalé avec ce problème, même sur ce forum, je crois. Je n'avais rien fait, le lecteur fonctionne bien et me donne satisfaction. Je veux juste régler cette erreur.

		
c.volume+=.1:c.volume=1:"down"==b&&(.1<c.volume?c.volume-=.1:c.volume=0);var d=100*c.volume;a.children[0].style.width=d+"%",a.setAttribute("aria-label","Volume : "+c.volume.toFixed(2))}function m(a,b,c){var d=a.clientX,e=h(b),f=b.clientWidth,g=100*(d-e)/f,i=b.parentNode.previousElementSibling;if("volume"===c){i.volume=g/100;var j=100*i.volume;b.setAttribute("aria-label","Volume : "+i.volume.toFixed(2))}else if("prog"===c){i.currentTime=g*i.duration/100;var 

S'il le faut, j'expédie le code en entier.
Modifié par Bongota (18 Mar 2025 - 20:00)

Bonjour,

Une div avec son rôle generic ne peut pas avoir d'attribut aria-label, cf. MDN.
Ce ne sera probablement pas pris en compte par les lecteurs d'écran.

Il te faut utiliser un élément qui le permet. Si c'est pour afficher le résultat d'un calcul, <output> mais c'est un peu tordu pour afficher un volume ? Pas input avec l'attribut readonly, c'est pas fait pour ça...
Un texte masqué conviendra très bien (p ou span avec la classe .visually-hidden. Le sélecteur est inutilement compliqué car il faut pas masquer un élément interactif comme un lien ou bouton, donc juste ".visually-hidden { }")
Pour la saisie (je vois un tabindex=0...), input type range ou number. Ou text si le comportement de number ne convient pas. Ou des <button>, tant que ça a un rapport avec les formulaires...
Modifié par Felipe (18 Mar 2025 - 23:17)