Bonjour Antoine, Voici comment je procède :
J'ajoute en JS une class js sur le body, cela me permet de savoir quand JS est activé. Utile en CSS pour mettre en forme seulement quand JS est activé. Ensuite je ne cache aucune information en CSS, si JS est désactivé toutes les infos sont lisibles. Je cache avec CSS les réponses aux questions en utilisant ma class js, un display: none peut être utilisé. En JS j'ajoute un button (pas un a, c'est une action sur la page et non un hyperlien) avant l'élément à afficher. Sur l'action du bouton j'affiche mon bloc caché. Il me semble qu'il n'est pas nécessaire de renvoyer le focus dans le bloc s'il est juste après. Voilà pas besoin de Noscript. Il est possible de le faire en HTLM5 + ARIA aussi mais le support n'est pas forcément parfait. -- Steven Mouret Le 25 octobre 2013 09:57, Antoine Bouet <antoine.bo...@cimeos.com> a écrit : > Bonjour la liste, > > J'ai une question concernant le fait de rendre un bon vieux toggle JQeury > accessible, notamment pour un cas très concret de réponses de FAQ qui se > déplie au clic sur chaque question. > > J'ai deux techniques et je me demande si les deux vont, si une seule est > bonne ou si ... aucune ne l'est ! > 1) Masquer les réponses au chargement de la page via le document.ready de > JQuery. > > 2) Masquer les réponses en CSS, JQuery ne gère que le toggle, mettre une > balise noscript contenant une balise style forcant l'affichage des réponses > (!important). > > Dans les deux cas, si le JS est désactivé, on voit toutes les réponses > dépliées au chargement. > Mais est ce que tous les critères d'accessibilité sont respectés ? > > Merci à vous ! > > -- > > Cordialement, > > Antoine Bouet > Ingénieur Développement > > CIMEOS > Montbéliard - Besançon - Paris > > e-mail : antoine.bo...@cimeos.com > tel. : +33(0)9 72 30 72 42 > > www.cimeos.com > > COORDONNEES DU SUPPORT : > Hébergement et Nom de Domaine : supp...@cimeos.com / 0899 49 42 > 00(1.34€/appel puis 0.34/min) > Maintenance des sites : maintena...@cimeos.com > > _______________________________________________ > liste_gta mailing list > liste_gta@list.accessiweb.org > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org > >
_______________________________________________ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
