Créer une case à cocher comme en 2020

Si nous voulons concevoir une case à cocher pour l'avenir, elle doit être non seulement esthétique mais aussi navigable avec un clavier pour les lecteurs d'écran. Ceci est presque 2020, yo, laissez le style comme il est.

Il y a beaucoup de démos sympas là-bas avec des cases à cocher fantaisistes. Tout cela inclut une version de masquage de la case à cocher OG et de stylisation de l'étiquette et / ou des pseudo-éléments. Cependant, bon nombre de ces cases à cocher intéressantes ne prennent pas en compte l'accessibilité.

Il y a un homme merveilleux qui a créé le https://100dayscss.com et m'a inspiré avec le jour n ° 66. Je voulais non seulement enseigner comment cela pourrait être fait, mais comment cela pourrait être fait de façon accessible.

Construire la case à cocher personnalisée

Avertissement: Il y a plusieurs façons d'accomplir cet effet, je vais en parcourir une seule, la façon dont j'ai pensé! N'hésitez pas à jouer et à trouver vous-même une méthode personnalisée. Après tout, c'est l'esprit du 100 Day CSS Challenge !

Étapes

Cliquez pour voir le code dans les étapes ci-dessous.

Tout d'abord, démarrez le Codepen puis procédez comme suit:

1. Générez les éléments
1. Masquez la case à cocher
2. Construisez la case à cocher avec l'étiquette
3. Animez la case à cocher lors de la vérification / décochez
2. Créez / positionnez des lignes d'expression avec des étendues .
       
3. Animez les lignes d'expression
4. Testez l'accessibilité avec ChromeVox
5. Rendez les choses encore plus fantaisistes

Étape 1: La case à cocher et l'étiquette

 $ cb: cubic-bezier (0,17, 0,67, 0,83, 0,67);
$ checkbox-size: 1.5em;

entrée [type="checkbox"] {
  @extend .center;
  opacité: 0;
  événements de pointeur: aucun;

  & + libellé {
    @extend .center;
    width: $ checkbox-size;
    hauteur: $ checkbox-size;
    rayon frontière: 50%;
    bordure: solide 2px blanc;
    curseur: pointeur;
    boîte-ombre: 1px 1px 1px 1px rgba (3, 79, 32, 0,5);
    transition: boîte-ombre 0.4s $ cb, fond 0.4s $ cb;
  }

  &: vérifié + libellé {
    couleur de fond: violet;
    boîte-ombre: 1px 1px 1px 1px rgba (3, 79, 32, 0,5), 0 0 0 5px encart blanc;
  }
} 

Ici, nous sélectionnons et stylisons notre case à cocher et notre étiquette pour les états normal et: vérifié. Nous voulons que la case à cocher OG disparaisse. Nous pourrions utiliser quelque chose comme affichage: aucun; pour cela, cependant, cela n'est pas utile pour les lecteurs d'écran. Donc, une autre façon d'y parvenir est de donner à la case à cocher l'opacité: 0; et événements de pointeur: aucun; .

Habituellement, ce traitement alternatif disparaissant s'accompagnerait d'une visibilité : aucune; . Cependant, la définition de la visibilité sur aucune ici désactive en fait le basculement de l'étiquette avec le clavier (qui pour l'accessibilité n'est pas bueno). Nous allons donc laisser la ligne de visibilité désactivée.

Nous stylisons ensuite l'étiquette pour qu'elle ressemble à cette version fantaisie d'une bulle ou d'une case à cocher:

[19659003] C'est l'état sélectionné sur &: vérifié + étiquette ressemble à ceci:

Après cela, nous passons à l'étape suivante: Construire / positionner des lignes d'expression avec des travées .

Étape 2: Lignes d'expression

Nous allons maintenant ajouter 12 travées avec la classe de lignes d'expression . Nous pouvons (et faisons) accomplir cela avec quatre portées et pseudo-éléments dans le Codepen final alors allez-y si vous souhaitez sauter directement dans le fond. Pour l'instant, nous commençons simplement!

Nous avons ici quelques variables ( $ distance, $ height, $ offset ) que nous utiliserons pour créer / positionner les lignes d'expression, ainsi que les animer à l'étape suivante.

 $ distance: 1,125em; // 18px
$ hauteur: 1,25 em; // 20px
$ offset: 1,25em; // 20px

.expression-lines {
  hauteur: $ hauteur;
  largeur: 1px;
  couleur de fond: blanc;

  en bas: $ distance;
  position: absolue;

  transform-origin: centre $ hauteur + $ distance;

  $ lignes: 12;
  @pour $ i de 1 à $ lignes {
    &: nième type (# {$ i}) {
      transformer: tourner (360deg / $ lignes * $ i);
    }
  }
}

Nous donnons à chaque ligne d'expression une hauteur de 20px en ems pour l'évolutivité; alors allez-y, donnez au corps une taille de police de 200% et regardez cette échelle de chiot! On leur donne également une largeur de 1px, une couleur blanche et un positionnement avec le fond, la position et l'origine de la transformation.

La merveilleuse boucle que vous voyez est simplement répartie uniformément autour de la case à cocher. Nous obtenons donc cet effet:

Passons à l'étape suivante: Animez les lignes d'expression .

Étape 3: Animation des lignes d'expression

Maintenant, pour animer l'expression sur case à cocher: cochée ! Nous avons besoin des lignes d'expression pour commencer invisibles, nous allons donc ajouter aux styles ci-dessus opacité: 0; . Nous animerons alors non seulement l'opacité, mais la position des lignes d'expression pour obtenir l'effet ressort.

 $ offset: 1.25em; // 20px
entrée [type="checkbox"]: vérifié ~ .expression-lines {
  animation: le printemps 0.6s avance facilement;
}

@keyframes spring {
  0% {
    opacité: 1;
    hauteur: 0px;
    transform-origin: centre $ distance;
  }
  100% {
    hauteur: $ hauteur;
    en bas: $ distance + $ offset;
    transform-origin: centre $ hauteur + $ distance + $ décalage;
  }
}

L'image clé à ressort est utilisée pour nos lignes d'expression, pour les agrandir et les déplacer en même temps. L'origine de la transformation est très importante, nous devons la changer lorsque nous animons les lignes d'expression loin de la case à cocher, afin qu'elles "se développent" uniformément.

Voir le stylo
Création d'une case à cocher comme en 2020 par Alyssa Nicoll ( @alyssamichelle )
sur CodePen .

Étape 4: tester l'accessibilité avec ChromeVox

Comme je l'ai mentionné lors de la création de notre case à cocher, afficher: aucun; est connu pour être assez hostile à lecteurs d'écran, tel quel visibilité: aucune; . Voyons donc comment fonctionne notre case sans utiliser l'une de ces deux méthodes.

Dans cette vidéo, j'utilise ChromeVox comme lecteur d'écran. Lorsque j'appuie sur tab, la case est automatiquement cochée. Je peux ensuite basculer entre coché et non coché en utilisant la barre d'espace!

Pour vous montrer ce qui se passe (préparez-vous pour le jank) lorsque nous utilisons l'une des lignes de code ci-dessus, J'ai ajouté display: none; à la case à cocher et j'ai réessayé!

Maintenant, lorsque j'essaie de passer à la case à cocher, le libellé de la case à cocher que nous avons stylé disparaît complètement. Je continue d'essayer en sélectionnant la case invisible avec ma souris (pas très accessible sur tant de comptes) puis j'essaye de basculer entre cochée et non cochée en utilisant la barre d'espace. Comme vous pouvez le voir, rien ne se passe. Donc, simplement, TLDR, n'utilisez pas affichage: aucun; ou visibilité: aucune; lorsque vous essayez d'animer / créer de la beauté avec votre CSS.

Étape 5 : Obtenir encore plus de fantaisie avec notre CSS

À l'origine, lorsque j'ai relevé ce défi, j'ai utilisé des pseudo-éléments et seulement quatre divisions pour créer les 12 lignes d'expression:

Utilisation de pseudo-éléments pour les lignes d'étiquette et d'expression (moins de majoration)

C'est juste la façon dont mon cerveau a d'abord pensé à relever ce défi. C'est moins de balisage mais plus compliqué CSS, j'ai donc décidé de simplifier pour l'enseignement dans ce post. Cependant, je veux le montrer ici, au cas où vous êtes un super nerd CSS et intéressé à réussir un tel exploit.

Pas d'anneau intérieur de la mort

Découvrez-le ici . Cet exemple comprend non seulement l'utilisation d'un pseudo élément amusant, mais il supprime également le petit anneau intérieur de résidus qui a été causé par l'animation de l'ombre de la boîte intérieure pour faire grossir le cercle.

Avant:

Après:

Cet exemple accomplit cela à la place en utilisant un pseudo-élément des éléments, en créant un cercle et l'agrandit / le rétrécit à la place.

Voir le stylo
Case à cocher accessible personnalisée – AUCUNE ANNEAU INTERNE DE MORT par Alyssa Nicoll ( @alyssamichelle )
sur CodePen .

J'espère que vous avez appris quelque chose de cette amusante case à cocher! N'oubliez pas de toujours garder l'accessibilité à l'esprit lorsque vous créez. On peut toujours faire mieux. 🙂

Joyeux codage!