Share
Les éléments de formulaire tels que les cases à cocher et les boutons radio ont une apparence différente selon le navigateur et le système d'exploitation de l'utilisateur. Pour cette raison, les concepteurs et les développeurs stylisent depuis longtemps leurs propres cases à cocher et boutons radio, dans un souci de cohérence, quel que soit le navigateur ou le système d'exploitation..
C’est parfait, mais nous devons également veiller à ce que nos cases à cocher et nos boutons radio restent accessibles aux utilisateurs de technologies d’assistance et de claviers. Dans ce tutoriel, je vais expliquer ce que cela signifie et comment nous pouvons faire les choses correctement de différentes manières..
Ce tutoriel fait partie de l'accessibilité Web: le guide complet d'apprentissage, où nous avons rassemblé une gamme de tutoriels, d'articles, de cours et d'ebooks pour vous aider à comprendre l'accessibilité au Web dès le début..
Commençons par regarder comment votre navigateur affiche les cases à cocher par défaut. Comme mentionné, ce que vous voyez ici dépend de votre navigateur et de votre système d'exploitation.
Vous remarquerez que vous pouvez utiliser votre souris pour activer ou désactiver les cases à cocher, et vous pouvez également utiliser votre clavier LANGUETTE et basculer en utilisant ESPACE, bien que cela puisse changer en fonction de vos paramètres).
Il est temps de construire le nôtre. Nous allons visuellement «masquer» les cases à cocher par défaut, en plaçant les versions personnalisées sur le dessus. La première chose à examiner est le balisage.
Le balisage d'une case à cocher ressemble à ceci:
Nous utilisons un Cela masque visuellement notre case à cocher, nous permettant de créer la nôtre. Il est important de ne pas le cacher en utilisant Vous remarquerez que, même si nous le cachons, nous donnons à la case à cocher une hauteur et une largeur de 40 pixels. Cela nous donne une zone cible claire et fonctionnelle à placer sous notre case à cocher fabriquée. L'emballage Il nous manque encore une case à cocher visuelle. Pour résoudre ce problème, nous utilisons d’abord un J'ai utilisé une bordure solide de 2 pixels et une couleur héritée, mais vous pouvez utiliser une couleur de bordure différente si vous le souhaitez. Notez que nous positionnons et dimensionnons cela de la même manière que notre case à cocher transparente.. Avec quelques marges supplémentaires pour les étiquettes pour nous donner un peu d'espacement, voici à quoi nos cases à cocher ressemblent: La prochaine étape consiste à utiliser le Nous créons le contrôle en utilisant un élément auquel nous donnons une bordure de quatre pixels pour le bas et le droit. Ensuite, nous faisons la rotation de 45 degrés: le bingo! Un chèque personnalisé. Vous pouvez également utiliser différentes couleurs de bordure pour correspondre à votre conception. A ce stade, vous ne pourrez rien voir. nous cachons toujours le chèque en utilisant visuellement le Ceci fait, voici ce que nous avons: Remarque: il y a une autre chose que nous devons inclure dans ceci, c'est les "styles de focus". Nous en discuterons dans la prochaine démo. Passons aux choses d'un niveau. Au lieu d'un pseudo-élément, nous pourrions utiliser une icône SVG personnalisée pour notre contrôle. Pour ce faire, nous placerions le SVG à l'intérieur de l'étiquette: Dans la plupart des cas, SVG est simplement décoratif, donc Nous devons appliquer quelques styles à l'élément SVG pour qu'il soit correctement positionné et dimensionné. Nous pouvons aussi utiliser le Les exemples de styles de case à cocher sont inspirés de ceux que l'on trouve dans le système de conception d'éléments de formulaire de GOV.UK (une ressource géniale, allez jeter un coup d'œil). Les styles de focus sont aussi importants que dans n'importe quel élément focusable: Nous utilisons un Le mode de contraste élevé de Windows supprime les règles d'ombre de la boîte, c'est pourquoi nous devons également ajouter des styles de contour transparents: Ce contour transparent apparaît comme une bordure supplémentaire en mode contraste élevé. En plus d'utiliser le code SVG en ligne, nous pourrions également recréer une version des premières cases à cocher personnalisées que nous avons créées, en utilisant SVG comme arrière-plan du pseudo-élément au lieu de créer notre propre «contrôle» avec des bordures. Nous avons couvert toutes les techniques que vous devez savoir pour cela, alors voici la démo que vous pouvez disséquer: Presque tous les styles et la logique que nous avons utilisés pour nos cases à cocher sont les mêmes pour les boutons radio. Regardez la démo et voyez par vous-même (pour naviguer avec le clavier, utilisez la commande Touches directionnelles): La seule différence apparente est notre utilisation Le test est une partie importante du processus lorsque vous modifiez des éléments HTML natifs. Mes tests sont loin d’être parfaits mais voici comment j’ai fait les choses pour ce tutoriel: On peut dire que cette liste manque de logiciels de reconnaissance vocale tels que Dragon ou de périphériques de commutation. Mais dans tous mes tests, les cases à cocher personnalisées et les boutons radio se comportaient de la même manière que les éléments natifs.. Espérons que ce tutoriel vous a montré comment créer des styles personnalisés pour les cases à cocher et les boutons radio, tout en continuant à vous aider pour l'accessibilité.. Je recommande fortement d'en apprendre davantage sur les éléments de formulaire personnalisés à partir de ces ressources: en utilisant la règle CSS opacité: 0..wrapper position: relative; .wrapper input height: 40px; gauche: 0; opacité: 0; position: absolue; en haut: 0; largeur: 40px;
affichage: aucun car cela masquerait la case à cocher des utilisateurs de navigateurs et des utilisateurs de technologies d'assistance, et nous perdrions également les interactions au clavier..position: relative Règle CSS. Cela nous aide à positionner la case à cocher et l’étiquette ::avant et ::après pseudo-éléments utilisant position: absolue. Ajouter une case à cocher visuelle à l'aide de pseudo-éléments
label :: before élément pour ajouter une bordure:.wrapper input + label :: before border: 2px solid; contenu: ""; hauteur: 40px; gauche: 0; position: absolue; en haut: 0; largeur: 40px;
Styles de case à cocher personnalisés avec bordure 2px.label :: after pseudo élément pour dénommer le "check":.wrapper input + label :: after content: ""; bordure: solide 4px; frontière gauche: 0; bordure supérieure: 0; hauteur: 20px; à gauche: 14px; opacité: 0; position: absolue; en haut: 6px; transformer: faire pivoter (45 °); transition: opacité 0.2s-in-out; largeur: 12px;
Pseudo élément stylé avec bordure 4px en bas et à droite. Lorsque tourné à 45 degrés, cela ressemble à un chèqueopacité: 0. Remédions à ça! Révéler une vérification personnalisée à l'aide de
:vérifié Pseudo sélecteur:vérifié Le pseudo sélecteur coche une case à cocher lorsqu'il est basculé sur «activé». Nous pouvons utiliser cela pour changer l'opacité de notre contrôle personnalisé:.entrée wrapper: vérifié + label :: after opacity: 1;
2. Case à cocher personnalisée avec SVG en ligne
aria-hidden = "true" le cache des appareils AT.Ajouter des styles SVG
remplir propriété de changer sa couleur (bleu dans ce cas):.wrapper input + label svg border: 0; remplissage: bleu; hauteur: 20px; largeur: 20px; opacité: 0; position: absolue; à gauche: 10px; en haut: 10 px; transition: opacité 0.2s-in-out;
Rappelez-vous les styles d'état de focus
.entrée wrapper: focus + label :: before box-shadow: 0 0 0 3px # ffbf47;
boîte ombre pour les styles de focus car il respectera les frontières arrondies, que nous utiliserons également pour les boutons radio plus tard
Styles de focus pour les cases à cocher: bordure jaune Ajouter des styles de focus pour Windows «Mode Contraste élevé»
.entrée wrapper: focus + label :: before box-shadow: 0 0 0 3px # ffbf47; contour: 3px solide transparent; / * Pour le mode de contraste élevé Windows. * /
Le contour transparent apparaît comme une bordure supplémentaire en mode de contraste élevé de Windows. 3. SVG comme arrière-plan de pseudo-élément
4. Styles de boutons radio personnalisés
rayon de la frontière et coiffant le :vérifié Etat un peu différemment. Vous pouvez certainement utiliser une icône SVG dans ce cas aussi - je vais laisser cela comme devoir pour vous! Montrez-nous vos résultats dans la section commentaires. 5. Test d'accessibilité
Conclusion et références
Accentsconagua