Ah ok, je n’avais pas compris ta demande. Mieux vaut avoir du texte dans le HTML, c’est le plus robuste; quitte à le rajouter à la volée en JS (bien s’assurer de réduire au minimum le délai entre le moment où le DOM est dispo et celui où le texte est inséré). Les contenus générés en CSS, via par exemple :before et :after, commencent à être lus par les lecteurs d’écran, mais ce n’est pas une généralité. Maintenant si tu as un aria-label ou équivalent, il y aura quoiqu’il arrive un libellé de bouton disponible pour les lecteurs d’écran, donc ça peut se tenter. Ma crainte étant qu’il y ait une possible double restitution: normalement le aria-label est restitué à la place du contenu textuel ou du title du bouton, mais je ne sais pas si ça inclut les éventuels contenus de :after et :before… c’est à tester en tous cas!
> Le 25 janv. 2018 à 14:08, Antoine Bouet Access > <[email protected]> a écrit : > > Merci Olivier pour les liens. > > Si j'ai bien compris, le "cache cache css" sert à masquer le libellé du lien. > Personnellement, je connais beaucoup de personnes qui ne comprennent pas cet > icône aux trois traits de menu burger (et certains articles sur le web > confirment cela). > Donc je voulais le mot "MENU" y soit accolé, afin que tout le monde le voit > et comprenne à quoi cela sert. > Mais ma question était de savoir si du CSS ou un ajout en JS restait tout de > même accessible (même si je ne suis pas fan du remplacement JS). > > Vu ta réponse, ca a l'air d'être quand même le cas :) > > > > <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> > Garanti sans virus. www.avast.com > <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> > <x-msg://96/#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> > > Le 25 janvier 2018 à 12:27, Olivier Nourry <[email protected] > <mailto:[email protected]>> a écrit : > Bonjour Antoine, > > J’aurais tendance à dire que dans l’absolu, le mieux est de partir d’un > véritable bouton (<button type=button>Menu</button>), dont tu peux masquer le > libellé de manière à ce qu’il soit perceptible par les lecteurs d’écran. Pour > cela tu peux utiliser la classe CSS détaillée ici: > www.ffoodd.fr/cache-cache-css/ <http://www.ffoodd.fr/cache-cache-css/> > Ça donnerait <button type=button><span class=‘sr-only’>Menu</span></button> > > Si c’est difficile de modifier le code HTML directement, tu as toujours la > possibilité de faire un remplacement à la volée en JS. > > Un article très intéressant et très complet sur les différents types de > boutons menus (en anglais): > https://inclusive-components.design/menus-menu-buttons/ > <https://inclusive-components.design/menus-menu-buttons/> > > Je ne sais pas si j’ai répondu à ta demande? > > >> Le 24 janv. 2018 à 12:22, Antoine Bouet Access >> <[email protected] <mailto:[email protected]>> a >> écrit : >> >> Bonjour la liste >> >> Je m'attaque à un sujet qui fâche, le Burger Menu (de la Mort). >> Déjà pas convaincu à la base par le concept, je dois néanmoins faire avec >> sur un site et je souhaiterai le rendre accessible. >> >> Pour le moment, c'est juste un lien vide (!) avec une classe CSS et un >> aria-label, sûrement là comme cache misère... >> Je souhaiterai ajouter (au minimum) un libellé ("MENU" irait bien), ce qui >> rendrait service à tout le monde. >> >> Mais d'un point de vue technique, quel est la meilleure manière de procéder ? >> >> - Javascript qui ajoute le texte avec un CSS le rendant "joli" ? >> - Solution Full CSS en jouant sur les "after" ou "before" ? >> - Directement modifier la génération du code HTML (mais là, ce sera plus >> compliqué malheureusement...) >> >> Est-ce que quelqu'un a déjà planché sur le sujet ? >> >> Merci d'avance et bon appétit pour cette pause de midi ! >> >> >> <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> >> Garanti sans virus. www.avast.com >> <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> >> <>_______________________________________________ >> liste_gta mailing list >> [email protected] <mailto:[email protected]> >> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org >> <http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org> > > > _______________________________________________ > liste_gta mailing list > [email protected] <mailto:[email protected]> > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org > <http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org> > > > _______________________________________________ > liste_gta mailing list > [email protected] > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
