Bonjour, D'un point de vue ergonomique, je pense que ces comportements ne sont pas très intuitifs quand on navigue au clavier. Sans lecteur d'écran, pour un voyant, on ne sait pas qu'il s'agit d'une case à cocher et qu'il faut faire "espace" pour cocher. On a l'habitude des boutons où on appuie sur "entrée" pour ces comportements. Avec lecteur d'écran, Jaws restitue correctement l'information. NVDA (en config par défaut) un peu moins car, je ne sais pas pourquoi, il ne dit rien quand je coche la case. A voir sur VoiceOver.
Par ailleurs, le design pattern ARIA correspondant aux menus burger serait pour moi le "menu button" ( https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton), non ? Bon weekend à tous, Julie Moynat Le 19 janvier 2017 à 14:03, Carsten Meyer <[email protected]> a écrit : > Bonjour la liste, > > Meilleurs Vœux à tous. > > A côté du développement exponentiel du développement JavaScript dans le > web on voit aussi émerger la tendance inverse qui est le tout CSS au prix > de pas mal de détournements de balises. > > On a donc des modales, des pseudo boîtes à onglets, des carrousels ou des > burgers menus qui fonctionnent sans JavaScript en utilisant les propriétés > checked des boutons radios ou cases à cocher (via les sélecteurs adjacents > en CSS). > C'est le cas du burger menu de Paris Web présent en affichage mobile : un > input suivi d'un label comme élément ouvrant la navigation du site. En cas > de bug JavaScript sur la page, la navigation sera toujours disponible, > c'est un avantage indéniable. En revanche, côté navigation clavier ça ne > fonctionne pas vraiment... > > Comment tranchez-vous ce genre de détournement si la compréhension de > l'interface et le focus ne sont pas altérés et qu'aucun design pattern > n'est imposé ? > > Cordialement > > Carsten MEYER > _____________________________________ > > *mobyou* > Carsten MEYER - accessibilité et intégration > [email protected] - www.mobyou.net > mobile : 06 60 59 01 27 > _____________________________________ > > _______________________________________________ > 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
