Ok merci pour vos réponses.
@Steven : le fait de placer le bouton dépliant la FAQ sur le texte de la
question en CSS ne pose pas de soucis en cas d'utilisation de CSS
personnalisés ?
Cordialement,
Antoine Bouet
Ingénieur Développement
Expert AccessiWeb en Evaluation
Membre du Groupe de Travail Accessiweb (GTA)
CIMEOS
Montbéliard - Besançon - Paris
e-mail : antoine.bo...@cimeos.com <mailto:antoine.bo...@cimeos.com>
tel. : +33(0)9 72 30 72 42
www.cimeos.com <http://www.cimeos.com>
COORDONNEES DU SUPPORT :
Hébergement et Nom de Domaine : supp...@cimeos.com
<mailto:supp...@cimeos.com> / 0899 49 42 00 (1.34€/appel puis 0.34/min)
Maintenance des sites : maintena...@cimeos.com
<mailto:maintena...@cimeos.com>
Le 30/10/2013 09:49, Steven Mouret a écrit :
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
_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
