Recherche

[goetsu]

• à la fermeture de la recherche remettre le focus sur le bouton "rechercher" qui déclenche l'affichage de la modale de recherche (conformité)
• ajouter un <p role="heading" aria-level="1" class="sr-only">Recherche</p> après le bouton de fermeture de la modale (amélioration)
• quand l’utilisateur ferme la recherche vider la div <div aria-live="polite" aria-atomic="true" class="sr-only pagefind-ui__accessible-message"> (conformité)
• dans les résultats recherche le titre de chaque bloc de résultat p.pagefind-ui__result-title devrait etre balisé avec un <h2> (conformité)
• gestion du alt des images dans les résultats recherche devrait etre vide alt="" (point à discuter pour arbitrage)

[arnaudlevy]

Problème

URL

https://example.osuny.org/fr/

Description

Qu'est-ce qui ne va pas ?

TODO

1. Problème de focus à la fermeture
2. Manque une balise pour les lecteurs d'écrans
3. Problème de balise pas vidée à la fermeture
4. Problème de balisage des résultats
5. Problème de balise alternative des images

Impact

Dans quelle situation ceci est-il gênant ? En vocal ? Au clavier ? Quel handicap ?

TODO

Nature

1. Conformité (TODO quel critère ?)
2. Amélioration
3. Conformité (TODO quel critère ?)
4. Conformité (TODO quel critère ?)
5. Point à discuter pour arbitrage

Code problématique

Pour les résultats :

<li class="pagefind-ui__result">
  <div class="pagefind-ui__result-thumb"><img class="pagefind-ui__result-image"
      src="https://osuny-1b4da.kxcdn.com/mta2x08r53kehr77lxxjipl0kans?width=244&amp;amp;height=0&amp;&amp;amp;fit=inside"
      alt="Les pages"></div>
  <div class="pagefind-ui__result-inner">
    <p class="pagefind-ui__result-title"><a class="pagefind-ui__result-link"
        href="/fr/blocks/blocs-de-liste/pages/">Les pages</a></p>
    <p class="pagefind-ui__result-excerpt">Les pages. Exemple de <mark>block</mark> pages. Agrandir
      l'image. Table des matières. Table</p>
  </div>
</li>

Solution

Description

• 1. à la fermeture de la recherche remettre le focus sur le bouton "rechercher" qui déclenche l'affichage de la modale de recherche (conformité)
• 2. ajouter un <p role="heading" aria-level="1" class="sr-only">Recherche</p> après le bouton de fermeture de la modale (amélioration)
• 3. quand l’utilisateur ferme la recherche vider la div <div aria-live="polite" aria-atomic="true" class="sr-only pagefind-ui__accessible-message"> (conformité)
• 4. dans les résultats recherche le titre de chaque bloc de résultat p.pagefind-ui__result-title devrait etre balisé avec un <h2> (conformité)
• 5. gestion du alt des images dans les résultats recherche devrait être vide alt="" (point à discuter pour arbitrage)

Code cible

Pour le titre de la recherche :

<div id="search" class="search__modal" aria-hidden="false" aria-modal="true" role="dialog" aria-label="Recherche">
  <button class="search__close" aria-label="Fermer la recherche">
    Fermer la recherche
  </button>
  <p role="heading" aria-level="1" class="sr-only">Rechercher</p>
  <div class="pagefind-ui svelte-e9gkc3 pagefind-ui--reset">
    [ ... ]
  </div>
  <div aria-live="polite" aria-atomic="true" class="sr-only pagefind-ui__accessible-message"></div>
</div>

Pour les résultats :

<li class="pagefind-ui__result">
  <div class="pagefind-ui__result-thumb"><img class="pagefind-ui__result-image"
      src="https://osuny-1b4da.kxcdn.com/mta2x08r53kehr77lxxjipl0kans?width=244&amp;amp;height=0&amp;amp;&amp;amp;fit=inside"
      alt=""></div>
  <div class="pagefind-ui__result-inner">
    <p class="pagefind-ui__result-title" role="heading" aria-level="2"><a
        class="pagefind-ui__result-link" href="/fr/blocks/blocs-de-liste/pages/">Les pages</a></p>
    <p class="pagefind-ui__result-excerpt">Les pages. Exemple de <mark>block</mark> pages. Agrandir
      l'image Table des matières Table</p>
  </div>
</li>

Effet attendu

En quoi est-ce une amélioration pour les personnes impactées ?
Par exemple, quelle est la vocalisation attendue ?

TODO

Source

D'où vient cette recommandation ?

TODO

Exemple d'implémentation

Où peut-on observer cette solution en production ?

TODO

[arnaudlevy]

@goetsu les points liés à la recherche ont déjà été remontés côté Pagefind.
CloudCannon/pagefind#727

Ils l'ont pris en compte, et on a bon espoir que ça soit corrigé.
En attendant, tout doit être fait en hack JS.

[alexisben]

Point 2 : ajouter un <p role="heading" aria-level="1" class="sr-only">Recherche</p> après le bouton de fermeture de la modale (amélioration)

Il me semble que cela ajouterait un second H1 dans l'arborescence des titres ce qui semble être en contradiction avec les recommandations de la structuration pertinente des titres : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1.1

[arnaudlevy]

Point 2 : cela créerait 2 h1, ce qui est déconseillé par MDN

[arnaudlevy]

Point 1 : @goetsu quel est le critère qui demande ça ?

[arnaudlevy]

Les points 4 et 5 dépendent de Pagefind

[alexisben]

@goetsu je ne sais pas si tu as vu nos commentaires ici ?

[goetsu]

point 1 critère 12.8
point 2 le contenu de la recherche est une modale l'arrière plan est donc non restitué il n'y aura donc jamais 2 h1 (il n'est par ailleurs en rien interdit par le RGAA d'avoir plusieurs h1 dans une page (ni par wcag https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/)

[alexisben]

Merci pour le critère !

Pour le point 1 et 3 c'est corrigé.

Pour le point 2 et 4 je comprends tout à fait le point de vue en mode lecteur d'écran. Mais je suis embêté car ça met le titre principal de la page au même niveau que "Rechercher" qui est présent sur toutes les pages, sémantiquement ça semble problématique ?

Pour le point 5 je ne comprends pas pourquoi il faut des alt vides ? Car c'est un contexte de résultat de recherche ?

[goetsu]

la modale est en display none dans le code donc encore une fois il n'y a pas deux h1 après si c'est pour des raisons SEO tu peux utiliser dans la modale <p role="heading" aria-level="1"> à la place du h1

pour le point 5 peut tu me dire comment les images sont récupérés ? c'est un contribution spécifique ? c'est la première image dans l'article ?

[alexisben]

Ok je crois que je comprends, le roleet l'aria-level ne sont considérés que par les technologies d'assistances, donc ça ne change pas la sémantique de la page web au sens du HTML sémantique pur ?

Pour le point 5 ce n'est pas une contribution spécifique à la recherche. C'est la même image que l'image de partage og:image, c'est à dire l'image principale de la page (celle dans le heros), ou l'image de partage par défaut du site (contribuée) s'il n'y pas d'image associée à la page.

[goetsu]

oui c'est ça pour le role et le aria-level

pour les images exemple sur https://example.osuny.org/fr/actualites/2023-03-04-referentiel-general-decoconception-de-services-numeriques-rgesn/ du fait que l'image ouvre dans la visionneuse on va recommander au contributeur qu'elle dispose d'un alt décrivant l'image car dans le contexte visionneuse c'est nécessaire cf discussion ticket block image sauf qu'ici dans le contexte résultat recherche cela n'a aucune intéret de décrire l'image elle n'ouvre pas la visionneuse.

Après si sur certains article on a une image réellement informative utilisée en hero d'un article sans visionneuse, le alt dans le résultat de recherche pourrait etre utile

Je ne vois pas de solution réellement tout terrain mais vu l'usage ici en mode vignette réduite + le fait que le lien permet de toute façon d'accéder à l'article ou si besoin l'utilisateur va trouver l'image et son alt complet il est préférable de partir sur un alt="" en dur dans le template

[alexisben]

Ok je comprends mieux merci.

Pour le alt je regarde ce que l'on peut faire sur pagefind (hack ou soumission).

[alexisben]

On est bon pour ces 5 points sur example !

[goetsu]

ok pour moi