Description déroulante accessible au clavier

Bonjour à tous et à toutes,

j'essaie de rendre correctement (code propre et maintenable) accessible une description se déroulant et se "renroulant". On doit pouvoir accéder à la description (élément <figcaption>, et donc à son contenu) via la touche tabulation par exemple.

Je m'embrouille un tantinet (un peu beaucoup quoi) au niveau du raisonnement à adopter et de la mise en place du code. À propos du code, je souhaite le faire en Vanilla et ne pas utiliser de framework (exit jQuery).

Actuellement, le résultat que je cherche à obtenir proprement (et que du coup j'ai obtenu) est celui-là. Ici, ça marche, mais j'aimerais bien avoir votre avis sur mon raisonnement et le code. Globalement, je pense que ce chaînage de propriétés et méthodes est loin d'être top…

J'ai également tenté une deuxième approche (je m’efforce de toujours commenter mes codes en anglais) sans passer par .forEach (car je dois avouer que j'ai un peu de mal) et qui illustre bien le souci lorsque je base tout sur les éléments <figure>.

1. Quel est votre avis sur les solutions actuelles ?
2. Comment feriez-vous ?

N'hésitez pas à apporter des critiques constructives (je suis étudiant donc je souhaites surtout apprendre) .

Voilà voilà, et merci d'avance !

J'ai envie de dire, remplace .project:hover .project-description par .project:hover .project-description, .project:focus .project-description et ton JS pourra être supprimé.

Ça ne sert à rien de mettre du JS si tu peux t'en passer…

Au passage, je conseillerais plutôt d'utiliser Array.prototype.forEach.call à la place de [].forEach.call histoire de ne pas créer des tableaux pour rien…

Je viens de le faire et ça ne permet pas d'accéder aux liens du <figcaption> sans que ce dernier ne se "renroule" : résultat actuel

Entièrement d'accord avec toi et, en général, j'essaie de toujours respecter cette façon de faire. Dans le cas actuel, j'ai bien l'impression qu'il faille utiliser du JavaScript.

Je vais me renseigner de ce côté là. D'ailleurs, tu me recommandes d'utiliser cette méthode ou je peux m'en passer ?

J'ai envie de dire, remplace .project:hover .project-description par .project:hover .project-description, .project:focus .project-description et ton JS pourra être supprimé.

Je viens de le faire et ça ne permet pas d'accéder aux liens du <figcaption> sans que ce dernier ne se "renroule" : résultat actuel

Effectivement, j'avais pas pensé aux liens à l'intérieur. D'un autre côté ça me paraît une assez mauvaise pratique que de cacher des liens à la base…

Mais soit, avec du JS ça peut se faire. Le seul problème est que focus ne bouillonne pas, donc il faudra forcément capturer l'event sur le liens eux-mêmes plutôt qu'un ancêtre… Donc pas trop le choix que de boucler.

Ce n'est pas faux mais j'aime bien l'effet actuel.

Actuellement, j'obtiens ça.

Bonsoir,

JE suis un utilisateur de lecteur d'écran, et je ne pige absolument pas ce que tu cherches à faire.

Ce que je remarque par contre, c'est qu'en jouant du tab, je tombe sur les simple link, et sur un div qui contient plein de texte, arrêt qui me paraît fort inutile. En principe il n'y a pas d'intérêt à rendre un élément focusable si on ne peut pas interréagir avec (enter/espace/flèches/etc.). J'ai pas l'impression qu'une interaction utile existe avec l'élément que tu as rendu focusable ici. IL n'y a pas nécessairement besoin qu'un élément soit focusable pour qu'on puisse en lire le texte, grâce au concept de curseur virtuel.

Si le but est juste d'afficher/cacher un élément, fais au plus simple et comme tout le monde, mets un lien qui toggle display:block/none.

Question bonus, c'est quoi vanilla ? Un framework concurrent de JQuery ? Je ne peux pas t'aider sur le code lui-même si tu utilises un framework, personnellement je n'en utilise pas parce que je trouve ça usine à gaz.

QuentinC : vanilla réfère au JS sans framework.

vanilla réfère au JS sans framework.

J'ai voulu pousser le truc jusqu'au bout, j'ai coché toutes les fonctionnalités et j'ai téléchargé.... un fichier vide. Il y a quelque chose et c'est buggé ou bien c'est vraiment une page humoristique ?

Lol, au lieu d'appeler ça tout simplement plain js.

Désolé pour le petit HS.

C'est bien une page humoristique, comme c'est précisé si tu lis bien.

Et vanilla est un terme courant en développement, pour parler du fait de ne pas utiliser de frameworks ou de librairie. Plain JS n'amènerait pas plus de sens, au contraire.

C'est pas cantonné au développement

Vanilla en Anglais a les sens "bon vieux …", "… brut de décoffrage", "… sans fioriture".

Note : le Oxford dictionnary donne cet exemple :

his sex life is totally vanilla

Note² : l'origine du terme que quelqu'un m'avait donnée (sans aucune garantie hein, c'était un native speaker mais pas un linguiste) c'est que la glace à la vanille c'est le choix par défaut quand t'as pas vraiment d'idée, le parfum "de base", sans extra.

Reste un petit truc qui me chiffonne avec ta dernière démo : tu remontes d'un nombre précis de parents, du coup ton code JS est dépendant de ta structure HTML. Si jamais tu es obligé de rajouter ou d'enlever un niveau, ton code ne marchera plus (c'est important de s'en soucier quand tu livres des projets avec maintenance du contenu : si ton client peut toucher à son site via l'intermédiaire d'un CMS, il vaut mieux s'assurer que le JS marchera malgré tout).

Du coup, je t'ai fait une version qui marche quelque soit la structure : http://jsfiddle.net/eb82Ltet/

Après, en vanilla JS pas vraiment moyen d'échapper au bouclage, à moins d'écrire des fonctions de récursivité.