search

osunyorg / theme

Le thème Hugo d'Osuny
https://osuny.org
MIT License
9 stars 6 forks source link

Recherche #748

Closed goetsu closed 1 day ago

goetsu commented 6 days ago
arnaudlevy commented 6 days ago

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

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 commented 5 days ago

@goetsu les points liés à la recherche ont déjà été remontés côté Pagefind. https://github.com/CloudCannon/pagefind/issues/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 commented 5 days ago

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 commented 5 days ago

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

arnaudlevy commented 5 days ago

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

arnaudlevy commented 5 days ago

Les points 4 et 5 dépendent de Pagefind

alexisben commented 3 days ago

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

goetsu commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

Ok je comprends mieux merci.

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

alexisben commented 1 day ago

On est bon pour ces 5 points sur example !

goetsu commented 1 day ago

ok pour moi