Comment rendre son menu déroulant accessible?

EDIT ljf: j’ai découpé le sujet pour ne pas polluer le sujet sur Le tour des chatons.

tu pourrais décrire un peu plus ce que tu attends (genre ta procédure de test) ou si tu as de la doc la dessus plz ? qu’on regarde du coté de katzei pour améliorer les choses.

@Meewan

  1. Tu ouvres ta page d’accueil https://katzei.fr
  2. Tu attends le chargement et tu tapes TAB
  3. Tu tapes TAB jusqu’à atteindre un menu avec sous-menu
  4. Tu vérifies que tu arrives à parcourir les sous-menu avec TAB

Pour faire encore mieux, tu peux aussi ajouter des liens d’accès rapides (Aller au contenu, Aller à la navigation, Aller à la recherche) accessible uniquement avec TAB comme le fait wikipedia ou notre site arn-fai.net .

1 « J'aime »

Merci, je regarderai pour ajouter ça ce week-end

1 « J'aime »

C’est exactement cela !

A savoir que parfois certains menus peuvent êtrent parcourus avec les touches flèches de direction.

Dans tout les cas je vais être obligé soit de refaire complètement le menu du site soit de mettre du js (ce que j’avais réussis a éviter jusqu’à maintenant)

Alors je sais plus comment j’ai fait, mais il semble que j’ai réussi à avoir un trucs qui se parcoure sans js (pas forcément parfait du point de vue RGAA) sur le site d’arn https://arn-fai.net/fr . Néanmoins si tu veux vraiment que ce soit au top, je crois qu’il n’y a pas de solutions sans js existantes. (à part ne pas faire de sous menu déroulant ><)

Le code du thème est là https://code.ffdn.org/arn/website/arn-website/-/tree/main/themes
Et ici une PR d’accessibilité (toujours ouvertes) sur le thème principale de Grav: https://github.com/getgrav/grav-theme-quark/pull/187

Chez CLUB1 on est assez fans du <details><summary> pour les sous menus. C’est du HTML donc ils sont accessibles de base (en fait il me semble que le meilleur moyen de faire un site accessible c’est de faire un « motherfucking website ») et il est ensuite possible de les afficher au hover avec le même genre de tricks CSS que celui que vous utilisez actuellement. Et hop, pas besoin de JS.

2 « J'aime »

De mémoire, j’avais utilisé ça pour un accordéon de FAQ, et @Irina11y m’avait signalé que c’était pas ok (je crois), d’ailleurs, la FAQ ARN est encore à corriger je crois.

malheureusement je doute que cette solution soit compatible avec notre framework css (bulma)

J’ai une bonne idée de comment faire en JS, je vais essayer de le faire après diner (j’ai été pris par une maintenance sur un service hors Katzei )

(et merci ljf pour le split de sujet :slight_smile: )

De mémoire, j’avais utilisé ça pour un accordéon de FAQ, et @Irina11y m’avait signalé que c’était pas ok

Je vais retester si ça fonctionne mieux depuis que j’ai mis à jour mon ordi.

j’ai mis un pach en ligne. Vous pouvez me dire si ça passe ? Accueil | Katzei

(j’ai pas testé avec un lecteur d’écran mais on peut accéder a tout via la touche tab)

si vous voulez lire le patch lui même il est très simple.

1 « J'aime »

Meewan Ouep tonpatch à l’aire de fonctionner

2 « J'aime »

Ah ben cela parait très bien comme cela !

1 « J'aime »

https://lacontrevoie.fr/ est aussi une mine d’astuces css si ça vous intéresse, le menu déroulant y est aussi navigable à coups de TAB.

2 « J'aime »