Ce que je fais généralement : J'ai ma question en Hn et le bouton juste après. Généralement je mets une flèche en image dans mon bouton avec pour alt 'En savoir plus'. Je place ce bouton par dessus mon titre en CSS. À l'ouverture je change le alt de l'image en 'Fermer'. Tu peux ensuite ajouter une class quand le contenu caché est affiché pour mettre en forme le bouton et pour montrer que le module est ouvert. Pense aussi à mettre en forme tes focus.
-- Steven Mouret Le 30 octobre 2013 09:23, Antoine Bouet <antoine.bo...@cimeos.com> a écrit : > Merci Steven pour ta réponse. > > Mais dans le cas où on veut que ce soit le clic sur la question qui ouvre la > réponse, tu mets le contenu de la question dans ton bouton affichant le bloc > caché ? > Visuellement, il va falloir négocier avec les intégrateurs et le chef de > projet si je mets un bouton ;) > > > 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 > Le 25/10/2013 10:42, Steven Mouret a écrit : > > 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 > > > > _______________________________________________ > 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
