Aria

Bonjour,

sur le test d'un site avec Lighthouse, j'ai le message suivant comme erreur en 'Accessibility". Même en allant sur "Learn more" je n'arrive pas à comprendre ce que je dois corriger.
---------
[aria-*] attributes do not match their roles
Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn more.

Lighthouse flags mismatches between ARIA roles and aria-* attributes:
Lighthouse audit showing an ARIA list role with an unsupported checked attribute
---------
Voici la partie de code JavaScript qui est concernée par cette erreur.

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))}

Et l'eau Bongota,

J'ai l'impression que ton erreur vient de là :

... toFixed(2))} ...

*Accolade fermante et parenthèse fermante

edit : D'ailleurs, mettre autant d'instructions dans un argument, ce n'est pas judicieux. Ça gâche la lisibilité. Utilise des var
Modifié par niuxe (14 Feb 2022 - 12:20)

Merci d'avoir regardé.
Je n'ai pas créé ce code, je l'ai pris tel quel, et il fonctionne bien pour un lecteur audio. Je l'ai déjà bien charcuté pour y enlever du css mélangé avec le js; css qui, curieusement faisait doublon avec le css original proposé.
L'accolade et la parenthèse, il faut les enlever ? Parce que je viens de tenter et ça a complètement à la fois supprimé le lecteur de la page et même bloqué d'autres choses sur le site !
Cette alerte n'empêche pas le lecteur de fonctionner, mais si l'erreur était corrigée, j'aurais une note de 100 au lieu de 91 en accessibility.

Bonjour,

quel est le DOM généré ? Je n'interprète pas encore le JS comme V8
Dans les Devtools, tu peux chercher "aria-label" si tu ne sais pas où est l'élément ciblé. Ou dans la Console document.querySelectorAll("[aria-label]")

Quand tu auras un score de 100 avec cet outil automatisé, tu peux passer un coup de aXe (l'outil utilisé par Lighthouse mais config différente), de WAVE de Webaim et sur Chrome ARC Toolkit (pour commencer à aller au-delà des tests automatisés)

Salut,

bien sûr que la note générale n'est qu'une indication, atteindre 100, ce n'est pas le but de ma vie Pourtant, tout le monde cherche a avoir un bon score en accessibilité, c'est pas un péché. Pour WAWE, c'était fait depuis longtemps, il est installé sur ma console Firefox.


L'endroit fautif est décelé, mais je ne sais toujours pas quoi faire pour le corriger.
Modifié par Bongota (14 Feb 2022 - 15:47)

Bonjour,

L'erreur indique vraisemblablement un décalage entre le rôle d'un élément et les attributs ARIA utilisés sur cet élément.

Il faudrait le code HTML généré pour être sûr, mais à priori dans ton cas ici, tu utilises un attribut aria-checked qui n'a pas de sens sur un élément qui a le rôle liste.
Ca n'a pas de sens car une liste ne peut pas être cochée ou décochée, c'est incohérent.

Salut,
et merci pour la réponse, j'étais un peu loin, je n'ai pas pu répondre de suite.
Je vais voir ça de plus près. J'ai utilisé le code JavaScript du lecteur audio :
https://web.silvercherry.fr/player.html
Le code pour aria est au milieu du JavaScript.

Bonjour,

Je viens de faire un petit test rapide sur ce lecteur et en fait il n'est pas du tout accessible.

Je peux démarrer une musique de la playlist en cliquant sur un lien, mais ensuite, impossible de l'arrêter, d'avancer ou de reculer !
Test effectué avec Jaws sous Chrome et Firefox.

JE tombe bien sur les boutons pause, forward, backward, etc. avec la touche tab une fois que la musique a démarré.
Par contre le curseur virtuel ne voit pas du tout ces boutons.
Si je vais par exemple sur le bouton pause et que j'appuie sur enter, rien ne se passe, la lecture continue.

Je suis obligé de fermer l'onglet pour arrêter la musique. Heureusement qu'elle est assez sympathique !

Causes probables:
- Utilisation inappropriée de aria-hidden
- Gestion des évènements clavier mauvaise ou totalement absente
- Utilisation d'éléments génériques comme <span> là où des éléments précis devraient être utilisés comme <button> (ce qui éviterait du même coup de devoir gérer manuellement les évènements clavier)
- Les libellés des boutons ne sont pas traduits

Verdict: 0/10.
Celui qui a créé ce lecteur ne connait absolument rien à l'accessibilité et a cru bon de mettre de l'ARIA n'importe comment pour faire joli en pensant que ça deviendrait magiquement accessible.
Malheureusement, c'est 99.9% du web.

Désolé !

Et merci de t'être penché sur ce problème.

Je suppose que tu parles bien d'accessibilité, parce ce que sinon, le lecteur fonctionne bien sur le site, à la souris (play, pause, avance/retour avec la souris, volume). Et ce n'est pas une playlist, ce sont des lecteurs isolés, pour les besoins de l'agencement de la page.
Je l'ai choisi parce qu'il me convenait et permettait de passer sd'un lecteur à l'autre sans arrêter celui en cours, qui se ferme automatiquement.
Je n'avais pas vu tout ça question accessibilité.
Maintenant, je vais mettre de plus en plus de vidéos sur ce site, les musique seront liées à ces vidéos. J'aurai de moins en moins besoin de ce lecteur audio et peut-être je pourrai en choisir un autre.
En tous cas, merci de m'avoir éclairé, je crois que je ne peux rien obtenir de plus avec ce lecteur audio.
Cordialement.

a écrit :
Je suppose que tu parles bien d'accessibilité, parce ce que sinon, le lecteur fonctionne bien sur le site, à la souris (play, pause, avance/retour avec la souris, volume).

Oui, je parle bien d'accessibilité avec un lecteur d'écran.
Je me doute bien qu'avec des yeux et une souris ça doit fonctionner comme on s'y attend.

a écrit :
Et ce n'est pas une playlist, ce sont des lecteurs isolés, pour les besoins de l'agencement de la page.

Je parle de la page d'exemple que tu as donnée dans ton précédent message, pas de ton site, que je ne suis pas allé voir.

Sur cette page, il y a effectivement deux exemples, un lecteur isolé et une playlist.
Pour le lecteur isolé c'est encore pire en fait, je ne vois que la durée et je n'ai aucun moyen de lancer la musique non plus.

a écrit :
En tous cas, merci de m'avoir éclairé, je crois que je ne peux rien obtenir de plus avec ce lecteur audio.

Tel quel, en matière d'accessibilité, non, en effet.

Je te reconnanderais bien de n'utiliser aucune bibliothèque et de laisser les contrôles par défaut du navigateur, en théorie ça devrait être la solution à privilégier, mais même eux ne sont pas toujours accessibles non plus.
Dans les faits, je n'ai objectivement pas de lecteur à te proposer.

Bonne chance.