Merci à vous tous pour ces réponses, c'est l'intégratrice qui va être
contente de ces modifs !
Cordialement,
Antoine Bouet
Ingénieur Développement
CIMEOS
Montbéliard - Besançon - Paris
e-mail : [email protected] <mailto:[email protected]>
tel. : +33(0)9 72 30 72 42
www.cimeos.com <http://www.cimeos.com>
COORDONNEES DU SUPPORT :
Hébergement et Nom de Domaine : [email protected]
<mailto:[email protected]> / 0899 49 42 00 (1.34EUR/appel puis 0.34/min)
Maintenance des sites : [email protected]
<mailto:[email protected]>
Le 30/10/2013 15:48, Romain Gervois a écrit :
Non. Les boutons doivent être pris indépendamment. Ce n'est pas comme
les liens qui par le contexte permettent de récupérer de l'information.
Il ne faut pas revenir à des liens et bien conserver les boutons pour
ce genre de fonctionnalités. On a alors deux moyens pour la pertinence
: l'intitulé du bouton seul ou l'attribut title. Dans le futur, on
aura aria-labelledby.
Dans le cas d'Antoine, la solution peut être un bouton englobant
entièrement la question (avec indication de l'action soit par du texte
simple soit par une alternative textuelle d'un picto (type "plus /
moins") soit par l'attribut title (en prenant soin de reprendre la
question)). Note : ces éléments button/input type button sont tout à
fait personnalisables via CSS.
Pour le critère, il s'agit du 11.9 même si il commence par "Dans
chaque formulaire, ...". D'ailleurs, un button type button ne joue
absolument aucun rôle quand il est enfant d'un élément form.
Romain
Le 30 octobre 2013 15:13, Steven Mouret <[email protected]
<mailto:[email protected]>> a écrit :
>des intitulés "En savoir plus" et "Fermer" pour des boutons se
sont des intitulés non pertinents.
Le contexte ne permet-il pas de rendre le l'intitulé du bouton
pertinent ?
Dans le cas contraire il serait plus intéressant d'utiliser un lien
mais cela me gène car le lien n'est pas le plus approprié pour faire
une action de script.
Je précise que nous ne sommes pas dans un formulaire, dans ce cas je
ne sais pas quel critère utiliser.
--
Steven Mouret
Le 30 octobre 2013 10:38, Romain Gervois <[email protected]
<mailto:[email protected]>> a écrit :
> Bonjour,
>
> Juste un complément : des intitulés "En savoir plus" et "Fermer"
pour des
> boutons se sont des intitulés non pertinents.
> Dans ce contexte, les boutons doivent indiquer la question ou au
minimum la
> référence de la question ainsi que l'action (afficher la réponse
/ masquer
> la réponse).
>
> Romain
>
> Le 30 octobre 2013 10:27, Antoine Bouet
<[email protected] <mailto:[email protected]>> a écrit :
>
>> 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 : [email protected] <mailto:[email protected]>
>> tel. : +33(0)9 72 30 72 42 <tel:%2B33%280%299%2072%2030%2072%2042>
>>
>> www.cimeos.com <http://www.cimeos.com>
>>
>> COORDONNEES DU SUPPORT :
>> Hébergement et Nom de Domaine : [email protected]
<mailto:[email protected]> / 0899 49 42 00 <tel:0899%2049%2042%2000>
>> (1.34EUR/appel puis 0.34/min)
>> Maintenance des sites : [email protected]
<mailto:[email protected]>
>> 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
<[email protected] <mailto:[email protected]>> 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 : [email protected] <mailto:[email protected]>
>> tel. : +33(0)9 72 30 72 42 <tel:%2B33%280%299%2072%2030%2072%2042>
>>
>> www.cimeos.com <http://www.cimeos.com>
>>
>> COORDONNEES DU SUPPORT :
>> Hébergement et Nom de Domaine : [email protected]
<mailto:[email protected]> / 0899 49 42 00 <tel:0899%2049%2042%2000>
>> (1.34EUR/appel puis 0.34/min)
>> Maintenance des sites : [email protected]
<mailto:[email protected]>
>> 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
<[email protected] <mailto:[email protected]>> 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 : [email protected] <mailto:[email protected]>
>> tel. : +33(0)9 72 30 72 42 <tel:%2B33%280%299%2072%2030%2072%2042>
>>
>> www.cimeos.com <http://www.cimeos.com>
>>
>> COORDONNEES DU SUPPORT :
>> Hébergement et Nom de Domaine : [email protected]
<mailto:[email protected]> / 0899 49 42 00 <tel:0899%2049%2042%2000>
>> (1.34EUR/appel puis 0.34/min)
>> Maintenance des sites : [email protected]
<mailto:[email protected]>
>>
>> _______________________________________________
>> liste_gta mailing list
>> [email protected]
<mailto:[email protected]>
>>
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
>>
>>
>>
>> _______________________________________________
>> liste_gta mailing list
>> [email protected]
<mailto:[email protected]>
>>
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
>>
>>
>>
>> _______________________________________________
>> liste_gta mailing list
>> [email protected]
<mailto:[email protected]>
>>
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
>
_______________________________________________
liste_gta mailing list
[email protected] <mailto:[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
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
