[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382)

[yannbertrand]

:unicorn: Problème

On a une erreur d’accessibilité (non détectée par Wave).

La balise legend doit être descendant direct du fieldset et ne pas avoir de wrapper. Nous avons des wrappers element-qrocm__header, element-qcu__header et element-qcm__header qu’il faut donc supprimer.

:robot: Proposition

• Ne pas englober les legend dans une div,
• Ajouter un aria-describedby

Source : cet échange.

:rainbow: Remarques

Tout ça est testable avec le validateur du W3C, voir : https://stackoverflow.com/questions/18065565/is-it-valid-html-to-add-a-link-to-a-fieldset-legend.

:100: Pour tester

Vérifier visuellement que rien n'a changé.

Vérifier au lecteur d'écran que le legend est correctement lu à la tabulation. Je n'ai pas réussi à le confirmer personnellement.

[pix-bot-github]

Une fois les applications déployées, elles seront accessibles via les liens suivants :

• App (.fr)
• App (.org)
• Orga (.fr)
• Orga (.org)
• Certif (.fr)
• Certif (.org)
• 1D
• Admin
• API
• Audit Logger

Les variables d'environnement seront accessibles via les liens suivants :

• scalingo front
• scalingo api
• scalingo audit-logger

[dlahaye]

Est-ce que le test via https://validator.w3.org/ est valide ? étant donné que tous les grains ne sont pas affichés d'un coup au lancement de la page

[yannbertrand]

Est-ce que le test via https://validator.w3.org/ est valide ? étant donné que tous les grains ne sont pas affichés d'un coup au lancement de la page

Je l'ai pas retesté avec 100% du contenu de Modulix effectivement. Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

[dlahaye]

Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

Ah bah en plus j'apprends des trucs ^^

[yannbertrand]

Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

Ah bah en plus j'apprends des trucs ^^

Du coup j'ai retesté, c'est aussi interdit d'avoir une balise p dans une legend :cry:

<fieldset>
  <legend><p>coucou</p></legend>
  <p>truc</p>
</fieldset>

Les balises qu'on a le droit d'utiliser sont du "phrasing content" et référencées ici : https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2 :(

[mirawlin]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

[yannbertrand]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

[mirawlin]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

ahh oui - j'ai pas vu le aria-hidden="true" oui donc il y a un doublon qui est pas sensé etre la

[mirawlin]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

~Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme~

~Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it~

edit: not related to the problem

[yannbertrand]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme

Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

~aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise,~ je suis pas sûr de comprendre 🤔

Sur Wave j'ai l'impression qu'on ne détecte pas :

[mirawlin]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise, je suis pas sûr de comprendre 🤔

Sur Wave j'ai l'impression qu'on ne détecte pas :

Oui - tu as raison - il n y a rien a voir (on peut ignorer le comment :P)

J'ai retester ce matin et j'ai le meme resultat avec Wave qui dit que c'est bien aria-hidden=true mais c'est toujours lu 2 fois. Et avec firefox c'est pareil

[yannbertrand]

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise, je suis pas sûr de comprendre 🤔 Sur Wave j'ai l'impression qu'on ne détecte pas :

Oui - tu as raison - il n y a rien a voir (on peut ignorer le comment :P)

J'ai retester ce matin et j'ai le meme resultat avec Wave qui dit que c'est bien aria-hidden=true mais c'est toujours lu 2 fois. Et avec firefox c'est pareil

Revue ensemble, ce n'est pas la div aria-hidden="true" qui re déclenche la lecture de "Sélectionner une seule réponse".

En fait le fieldset est un groupe libellé par cette legend donc c'est aussi normal que "Sélectionner une seule réponse" soit lu 2 fois (donc une fois où c'est précisé "group").

Par contre on est pas certain de pourquoi aria-describedby sur le form n'est pas lu avec VoiceOver...