search

GouvernementFR / dsfr

🇫🇷 Official french government's design system (Système de Design de l'État)
https://www.systeme-de-design.gouv.fr/
Other
233 stars 52 forks source link

[pagination] accessibilité du lien associé à la troncature #935

Open edugouvfr opened 3 months ago

edugouvfr commented 3 months ago

Décrire le bug

Sur l'élément Pagination, le template HTML proposé pour les trois petits points correspondant aux troncatures propose un hyperlien. image

<li> <a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="pagination-6686" href="#"> … </a> </li>

Or l'action à gérer sur ce lien n'est pas claire. La plupart du temps il n'y a d'ailleurs aucune action associée aux marqueurs de troncature. De plus, lorsqu'on utilise un narrateur (accessibilité) ce lien est vocalisé "point point point", ce qui n'est pas pertinent.

Comportement attendu

Permettre l'usage d'un balisage alternatif utilisant un span non réactif associé à un attribut aria-hidden="true"

Configuration et système utilisé

Informations complémentaires

L'anomalie a été remontée lors d'un audit RGAA réalisé sur l'application de l'un de nos utilisateurs du portage Angular du DSFR

keryanS commented 1 month ago

Bonjour,

En effet, nous devons modifier la balise des points de suspension et utiliser un à la place. L'attribut aria-hidden ne me semble pas nécessaire car cela explique le saut de numérotation.

Merci pour le retour

edugouvfr commented 1 month ago

Bonjour et merci pour ce retour, je crois qu'il manque le mot dénotant ce que vous envisagez d'utiliser comme balise alternative.

Si vous laissez le caractère actuel sans le masquer aux narrateurs (ce que je peux comprendre) celui-ci sera vocalisé "point point point". Il pourrait être intéressant de prévoir une alternative textuelle plus explicite pour améliorer la restitution.