Bonjour,
plutôt que de cacher les input avec display: none; je préfère les
versions où l'input est encore là, dans le /viewport/ mais recouvert par
la version personnalisée :
Filament group :
<http://www.filamentgroup.com/dwpe/checkbox-radiobutton/> et
<http://filamentgroup.github.io/checkboxradio/>
Temesis :
<http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles>
Quelques remarques techniques :
On peut faire des trucs sympas en CSS pur mais pour IE9+. IE8 avait un
bon support de CSS2.1 et un support quasi-nul de CSS3.
Du coup c'est plutôt image de fond si on doit supporter IE8.
Et enfin d'expérience en testant sur Windows, OS X, Android et iOS, si
l'on utilise une image de fond, mieux vaut créer une checkbox
personnalisée d'au moins 14px de haut à cause des décalages verticaux
des checkbox sur tous les navigateurs de tous ces OS… (quoique mes tests
datent d'iOS 5 ou 6, pas testé sur 7 et 8)
Ph. Vayssière
Le 25/02/2015 10:17, Steven Mouret a écrit :
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]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
