Description déroulante accessible au clavier

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 !

Édité par jQzz

Je ne donne pas d'aide par message privé.

+0 -0
Staff

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…

Édité par viki53

Auteur du sujet

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é.

viki53

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

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

viki53

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.

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…

viki53

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 ?

Je ne donne pas d'aide par message privé.

+0 -0
Staff

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é.

viki53

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.

Auteur du sujet

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…

viki53

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

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.

viki53

Actuellement, j'obtiens ça.

Je ne donne pas d'aide par message privé.

+0 -0

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.

Ma plateforme avec 23 jeux de société classiques en 6 langues et 13000 joueurs: http://qcsalon.net/ | Apprenez à faire des sites web accessibles http://www.openweb.eu.org/

+0 -0

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.

Ma plateforme avec 23 jeux de société classiques en 6 langues et 13000 joueurs: http://qcsalon.net/ | Apprenez à faire des sites web accessibles http://www.openweb.eu.org/

+0 -0

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.

Édité par Javier

Happiness is a warm puppy

+0 -0

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é.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte