[BUG] Essemble des checks échoués mais HTML présent

[Josyann]

Description
Le html des pages :

• https://www.agglo-larochelle.fr/
• https://conservatoire.agglo-larochelle.fr/
  semble bon, pourtant, seul le check reachable est positif.

Reproduction
Étapes pour reproduire :
1. Faire passer un audit aux 2 sites et constater.

Résultat attendu
L'outil fait passer les checks sur les sites.

[Josyann]

Les html de ces pages ont un attribut hidden
Dans le code la method dom retire les INVISIBLE_ELEMENTS
La method dom ne devrait rien retirer et agir seulement en tant que parser.

[yann120]

Pistes qu'on a évoqué en regardant le ticket :

peut etre donner un parametre dom without_quelquechose ou
Supprimer le tap sur dom ?
Source for ?

Peut etre un visible dom et pas visible ? ou parametre without sur dom ?

[yann120]

Pour l'instant ticket bloqué, je le remet dans le backlog le temps qu'on trouve une solution
Discussion actuelle sur #startup-acces-cible-dev avec message de Manon :
Ces sites[1] ont un html avec un style style="visibility:hidden;opacity:0;background-color:#fff"
Notre manière de parser enlève tous les éléments du DOM considérés comme invisible[2].
Aujourd'hui la problématique est que :

On récupère bien tout le html en DB
Nos tests échouent puisqu'on parse le dom avant de les faire passer et on enlève les éléments invisibles.
Ce sont peut-être des cas particuliers, mais ça soulève des questions :

Les éléments sont visibles à l'œil nu après chargement, est-ce le cas pour un screen reader ?
Leurs déclarations sont totalement conforme et partiellement conforme
Tout en sachant que celle de https://www.agglo-larochelle.fr/ a dans sa liste de non-conformité "L’utilisation de composants JavaScript non accessibles aux technologies d’assistance"
Et que leur html sont invisibles, comment leur déclaration peuvent-elles être conforme ?

Donc pour les tests :

On considère que tout est invisible et on échoue tous les tests ?
On considère qu'on récupère quand même l'indication de la langue mais pas le reste puisque le reste est sensé être du contenu visible ?
On considère que tout est visible puisque les taux des déclarations sont satisfaisant et l'attribut du html est spécifique à une hydratation et que in fine tout est visible ?
Merci et bon app !

[1]https://www.agglo-larochelle.fr/
[1]https://conservatoire.agglo-larochelle.fr/
[2]INVISIBLE_ELEMENTS = "script, style, noscript, meta, link, iframe[src], [hidden], [style*='display:none'], [style*='display: none'], [style*='visibility:hidden'], [style*='visibility: hidden']".freeze

[yann120]

Conversation dans Mattermost :
Erwan le Gall 👹
2:38 PM

dans le code source il y a effectivement un attribut style="visibiity:hidden". Mais il est surchargé par une feuille de style avec une règle !important. Donc on a un html visible.

html,
html.aui {
width:100%;
height:100%;
font-size:100%;
visibility:visible!important;

cf https://www.agglo-larochelle.fr/cdalr-new-theme/css/barebone-main.css?browserId=firefox&themeId=CdaLRNew_WAR_cdalrnewtheme&minifierType=css&languageId=fr_FR&b=6205&t=1774447655976

CQFD ?

il faudrait les styles calculés et pas seulement ceux tirés du DOM, je pense. Peut-être interroger le nav via Ferrum .

(et oui je suis un drôle d’intra :) )

Yann PETITJEAN
Mettez à jour votre statut
2:48 PM
oui c'est ce qu'on a vu. En gros le css qui est écrit sur le fichier html n'est pas une bonne source de vérité...
Parce que les fichiers css chargé ensuite peuvent changer les propriétés css initialement écrite en dur dans le html

Erwan le Gall 👹
2:48 PM
en gros ce que je voudrais c’est savoir si, en tant qu’utilisateur, en faisant un Ctrl+F ou en extrayant tous les liens visibles on trouve la mention / le lien vers la déclaration

Yann PETITJEAN
Mettez à jour votre statut
2:49 PM
On a le !important,
qui fait que ça prend le dessus sur le CSS de base,
qui a été écrit dans le fichier HTML.

Erwan le Gall 👹
2:50 PM
oui mais notre code actuellement ne se base que sur le DOM pour juger de la visibilité

Yann PETITJEAN
Mettez à jour votre statut
2:50 PM
oui je vois bien, du coup je vais regarder avec notre parseur aujourd'hui si il y a la possibilité de prendre comme source de vérité le css actuelle de la page et non pas le css ecrit en dur dans la page html...

oui c'est vrai

Erwan le Gall 👹
2:51 PM
(vous n’aller pas récrire un moteur HTML CSS comme Servo, c’est un monstre : il faut exploiter le nav via Ferrum)

Yann PETITJEAN
Mettez à jour votre statut
2:51 PM
on va réecrire chrome je pense

Erwan le Gall 👹
2:51 PM
peut-être qu’il faut retourner notre logique : cherche d’abord et vérifier ensuite la visibilité

Yann PETITJEAN
Mettez à jour votre statut
2:52 PM
oui

Erwan le Gall 👹
2:52 PM
vous avez peut-être accès à l’arbre d’accessibilité, dans Chrome. Genre AOM (Accessibiity Object Model). C’est peut-être un flag à activer au lancement.

Yann PETITJEAN
Mettez à jour votre statut
2:54 PM
ok bon je vais étudier ce qu'il est possible de faire avec Ferrum , sans réinventer la roue
Merci!

Erwan le Gall 👹
2:56 PM
https://developer.chrome.com/blog/full-accessibility-tree?hl=fr#:~:text=Dans%20la,CDP

Chrome for Developers
Arborescence complète de l'accessibilité dans les outils pour les développeurs Chrome | Blog | Chrome for Developers
Examinez la nouvelle arborescence d'accessibilité (en pleine page) dans les Outils de développement, ainsi que sa conception et son implémentation.
https://chromium.googlesource.com/chromium/src/+/refs/heads/main/tools/accessibility/inspect/README.md

un peu de contexte / d’explication https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/

Pope Tech Resources
How to use Chrome's accessibility tree - Pope Tech Resources
Learn what the accessibility tree is, how to access it, and how to use its information.

How to use Chrome's accessibility tree - Pope Tech Resources

Yann PETITJEAN
Mettez à jour votre statut
3:10 PM
Merci, c'est justement l'outil qui me manquait sur Arc et que Manon avait sur son browser basé sur Firefox

Erwan le Gall 👹
3:22 PM

un peu d’info collectée rubycdp/ferrum#225

-> https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility

Yann PETITJEAN
Mettez à jour votre statut
3:41 PM
Element.checkVisibility()

Interessant merci

Erwan le Gall 👹
3:45 PM
l’avantage d’avoir un intra ex-dév, je vois ce qui peut vous intéresser

Erwan le Gall 👹
4:02 PM
sinon je me demande ce que donne un screenshot d’un élément invisible (0px × 0px ?)
(oui il y a des x et un ×)

rebond @manon Budin https://docs.rubycdp.com/docs/ferrum/screenshots#:~:text=mhtml%28%2A%2Aoptions%29

Screenshots | RubyCDP
screenshot(\options) : String | Integer
Screenshots | RubyCDP

Manon Budin
4:09 PM
Je sais pas pour ce que ça pourrait donner mais pour moi on a juste besoin d'avoir une réponse :

est-ce qu'on se fiche ou pas des éléments invisibles et on laisse l'ARCOM faire le rapport avec le taux d'accessibilité ou on estime qu'on teste rien du tout et tant pis pour eux
on va pas tout recoder

je voudrais juste qu'on sache si on se base sur le dom (donc on s'en fiche de savoir si il y a des éléments visible ou non) ou si on va plus loin

tout en sachant que là on parle de 2 sites

on peut aussi se permettre de leur dire que leurs sites sont mal codés et que pour un outil automatique, c'est pas visible

oui je vois bien, du coup je vais regarder avec notre parseur aujourd'hui si il y a la possibilité de prendre comme source de vérité le css actuelle de la page et non pas le css ecrit en dur dans la page html...

@yann PETITJEAN ce que je te disais tout à l'heure à l'oral: j'aimerais bien qu'on évite de partir aussi loin justement

y'a un sujet SPA, sites lents et plein d'autres trucs mais là on est sur du gros edge case quand même. Il me semble avoir vu 1 autre site comme ça mais j'en suis même pas sûre

Yann PETITJEAN
Mettez à jour votre statut
4:30 PM
je suis d'accord aussi de pas tout re-coder pour ces 2 sites
je reflechi a un moyen simple où on pourrait avoir une vrai info de visibilité, peut etre injectée dans le dom avec un attribut data, qui pourrait donner une vrai source de verité de visibilité ou non sur laquel on pourrait se fier. et qu'on utilise ensuite que le dom, avec cette info qu'on peut traiter
C'est encore une idée et je sais pas si c'est bien ou pas de faire ca mais je réflechi dessus

Erwan le Gall 👹
4:51 PM
tout en sachant que là on parle de 2 sites

sur les quelques qu’on a testé. À rapporter aux 400 000 potentiels, aussi.

[yann120]

Nous avons décidé que le problème est de notre coté, mais que c'est du au fait que le site de La rochelle a mal fait le développement et ne devrait pas avoir d'attribut html avec style avec visibility: hidden, qui est pas une manière propre de faire.
nous restons donc comme ca pour l'instant et nous allons repondre à La Rochelle.

[Josyann]

Donc on peut fermer en won't fix ?