Solution à éviter absolument car pas utilisable au clavier (en tout cas
pour cet exemple là)
je préfère celui là :
http://www.creativejuiz.fr/blog/tutoriels/personnaliser-aspect-boutons-radio-checkbox-css
et moi j'avais bricolé ça avec un peu de jquery :
http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles
Aurélien
Bonjour,
Il est possible de customiser les radio et checkbox avec CSS voici un
exemple :
http://www.hongkiat.com/blog/css3-checkbox-radio/
--
Steven Mouret
Le 25 février 2015 10:10, Ariane Andurand <[email protected]
<mailto:[email protected]>> a écrit :
Merci Olivier pour cette réponse rapide et complète !
... et surtout merci de nous avoir alerté sur notre erreur de
<label> hérité du code de base de Joomla! que nous avions oublié
de remplacer par un <div>.
Le 25 février 2015 10:05, Olivier Nourry <[email protected]
<mailto:[email protected]>> a écrit :
Bonjour,
en fait les roles et propriétés ARIA sont là pour remplacer
les propriétés natives d'un élément HTML lorsque celui-ci n'en
dispose pas. Ex: mettre un rôle button à un span le fait
passer aux "yeux" des API d'accessibilité pour un bouton...
tout en restant un span visuellement, tant qu'on ne le style
pas spécifiquement, et sans pour autant pour proposer la
gestion clavier inhérente à un bouton dans le navigateur. Tout
cela reste à construire via du code JS et/ou CSS.
Dans ton cas, les role="checkbox" et propriété aria-checked
sont redondants avec les propriétés natives de l'élément
<input type="checkbox">. Donc ils ne servent à rien,
concrètement, hormis à poser les bases de problèmes en cas de
manipulation ultérieure...
Donc, le code peut se contenter d'être:
<input id="modlgn-remember" type="checkbox" value="yes"
name="remember"/>
<label for="modlgn-remember">Se souvenir de moi</label>
On bidouille avec ARIA uniquement pour (je suppose) contourner
les limitations de stylage des checkbox natives (ah, ces
maquettes faites sous Mac et qui font que le client est déçu
de voir des cases à cocher moins jolies sous Win...). A mon
avis c'est rarement une bonne idée vu le supplément de travail
et la moindre robustesse (compatibilité des browsers/At etc).
Note: pourquoi un <label> autour?
Cordialement,
--
Olivier Nourry
http://about.me/oliviernourry
<http://about.me/oliviernourry>
Le 25 février 2015 09:56, Ariane Andurand
<[email protected] <mailto:[email protected]>> a écrit :
Bonjour la liste,
Avec mes collègues nous tentons de mettre en oeuvre une
adaptation d'un *Template Joomla! Accessible *qui pourra
être disponible prochainement sur un Git.
Nous sommes confrontés chaque jour à de nouvelles
problématiques pour nous mais qui ne le sont peut être pas
pour la plupart d'entre vous. Nous faisons donc appel à
vos connaissances aujourd'hui.
*Round1: La checkbox ...*
Nous avons trouvé une multitude d'exemples qui
retravaillent la checkbox avec des ul, li, et images +
modification au clic de l'aria-checked=""
(ex : http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php )
La question est la suivante :
/Une checkbox standard de ce type (ci-dessous) avec une
modification de l'aria-checked="" en JS est elle aussi
accessible que le précédent exemple ?/
<label>
<input id="modlgn-remember" type="checkbox" value="yes"
name="remember" role="checkbox" aria-checked="false" >
<label for="modlgn-remember">Se souvenir de moi</label>
</label>
Merci /
Bonne journée ... et que la grippe vous épargne !
Ariane
_______________________________________________
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
--
Aurélien Levy
----
Temesis
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
