Remplacement de boutons radio sans remplacer les boutons radio - SitePoint
Ceci est juste un morceau solitaire de texte qui dit: « l'accessibilité? » Tragique, vraiment. Pour cela même de commencer à travailler à nouveau correctement, il faut ajouter toutes sortes de sémantique correctives WAI-ARIA. Dans les mots immortels de Iron Maiden, « puis-je jouer avec la folie? »
Plus de cet auteur
Ce que je l'ai fait est disponible en démo CodePen. et à suivre est une explication de la technique.
Utilisez ce qui est déjà là
Que savons-nous sur les boutons radio?
Une chose que nous savons au sujet des boutons radio est qu'ils peuvent être soit dans un état enregistré ou non. Peu importe ARIA, c'est juste l'attribut checked de HTML.
Fortuitement, nous pouvons exprimer l'état contrôlé par la pseudo-classe CSS vérifiée dans:
Moins fortuitement, il n'y a pas beaucoup de propriétés que nous pouvons placer dans ce bloc qui sera effectivement honoré - surtout pas de manière cohérente à travers les navigateurs. Les boutons radio refusent obstinément à plier à notre volonté.
Le combinateur fratrie adjacent
J'aime le combinateur de frères et soeurs à côté avec une passion qu'un homme peut-être ne devrait pas réserver pour les expressions du sélecteur CSS. Il me permet de style des éléments en fonction de la nature des éléments qui les précèdent.
C'est une notion puissante en ce qui concerne nos boutons radio, car il nous permet de reporter l'apparition des changements d'état sur des éléments qui peuvent réellement être coiffés facilement.
Nous ne voulons pas le style en fait le texte de l'étiquette, mais nous avons créé la relation nécessaire pour déplacer la rétroaction visuelle loin de la . Le style de bouton radio, en fait, soit reporté à la éléments. avant pseudo-contenu.
Hiding le bouton radio est juste un cas d'utilisation d'une technique de masquage accessible comme celle trouvée dans le CSS HTML5 Boilerplate:
Mais si elle est cachée, comment quelqu'un peut-il cliquer dessus? En imbriquant le bouton radio dans un
le style
Comme mentionné précédemment, nous utiliserons le contenu pseudo pour forger notre « bouton radio ». De cette façon, nous pouvons traiter le style du texte de l'étiquette séparément.
Notez l'utilisation de la boîte ombre frontière et de créer les anneaux concentriques. Le style vérifié passe ensuite dans la propagation du rayon de l'ombre de la boîte et intègre un vert sur / corriger / sélectionné / couleur positive; le genre qui est habituellement défini quelque part dans vos variables Sass.
N'oublie jamais
Tout ce qui reste est d'intégrer un style de mise au point afin que les utilisateurs du clavier peuvent voir quel est l'élément dans leur contrôle. Un aperçu sur mince en pointillés sur la suffirait, mais je l'ai opté pour une flèche unicode, pointant vers le contrôle par l'intermédiaire. après. Cette rétroaction visuelle est plus emphatique que les éditeurs de navigateurs fournissent par défaut, contribuant ainsi à accroître l'accessibilité de l'état de mise au point.
Notez que des améliorations à étiqueter tels que le curseur: pointeur sont appliqués à tous les navigateurs.
Conclusion
Il vous en avez, une solution à thémable radiocommandes qui utilise beaucoup de cette ...
... et rien de tout cela: