À propos de l'auteur
Vadim est le fondateur de Web Standards la première communauté frontal russe. Animateur et producteur du podcast hebdomadaire Web Standards . Web Standards Days…
Pour en savoir plus sur Vadim …
Tout ce qui est rond et qui se démarque n’est pas considéré comme un bouton. Dans cet article, Vadim explique comment créer un bouton interactif adapté à vos utilisateurs – un bouton qui ne devrait pas être confondu pour rien d’autre.
Supposons que l’utilisateur clique sur une partie de l’interface et que quelque chose se produit. Cela ressemble à un bouton pour moi, mais appelons cela un «truc de clic» pour le moment. Je sais, vous êtes certain que c’est aussi un bouton: il est arrondi et se démarque avec une belle couleur tomate, demandant à être interagi avec. Mais réfléchissons un instant. Cela fera gagner du temps à long terme je le promets.
Que se passe-t-il si le texte de cette page qui clique comme suit est «Lire la suite», et que cliquer dessus conduit l'utilisateur à un article sur une autre page? Hmm. Et s'il y avait un mot souligné en bleu, "Fermer", qui ferme la boîte de dialogue? Est-ce un lien simplement parce qu’il est bleu et souligné? Bien sûr que non.
Whoa! Il semble qu’il n’ya aucun moyen de savoir s’il s’agit d’un lien ou d’un bouton en le regardant. C'est fou! Nous devons comprendre ce que cette chose fait avant de choisir le bon élément. Mais que se passe-t-il si nous ne savons pas encore ce qu’il fait ou sommes simplement confus? Eh bien, nous avons un organigramme pratique:
- C’est un bouton.
- Sinon, c’est un lien.
- C’est tout.
Alors, est-ce que tout est un bouton? Non, mais vous pouvez toujours commencer par un bouton pour presque tous les éléments sur lesquels vous pouvez cliquer ou interagir de la même manière. Et s’il manque quelque chose, comme une navigation vers une autre page, utilisez plutôt un lien. Et non, un pointeur n'est pas une raison pour le faire . Nous avons curseur: pointeur pour cela.
Très bien, c’est un bouton – nous sommes d’accord sur ce point. Mettons-le dans notre modèle et personnalisez-le en fonction de votre motif: du rembourrage, de l’arrondi, un remplissage à la tomate, du texte blanc et même des styles de mise au point. Oh, c'est très gentil de ta part.
Cela n’a pas été long. Vous vouliez le construire rapidement et prendre un déjeuner parce que vous avez faim. Ok, voyons à quoi ça ressemble et comment y aller.
Oh mon dieu! Quelque chose ne va pas avec le navigateur. Pourquoi ce bouton est-il si laid? Le texte est minuscule, même si nous avons explicitement défini le corps à 16px et même la famille de polices est fausse. La bordure arrondie avec une pseudo-ombre stupide est tellement rétro qu’elle n’est même pas encore une tendance.
Ahh, c’est le style par défaut du navigateur. Vous devez l'annuler avec précaution ou même ajouter Normalize.css ou Reset.css… ou vous pouvez simplement utiliser un
Quelle est la différence entre un et un
aux lecteurs d'écran, ce qui permet aux utilisateurs de comprendre qu'il s'agit d'un bouton.
Impressionnant! Vous connaissez non seulement l’élément HTML mais vous connaissez également deux choses sur ARIA et la prise en charge des lecteurs d’écran. Vous avez peut-être même essayé avec VoiceOver ou NVDA de tester le degré d’accessibilité de vos interfaces.
Vous avez donc décidé de faire un tour. Vous ne foirez pas le style du navigateur, et vous ferez en sorte que l’élément ressemble à un bouton interactif approprié pour les utilisateurs qui pourraient en avoir besoin. C’est intelligent!
Maintenant, non seulement il a l'air correct, mais il peut être mis au point via le clavier grâce à l'attribut tabindex = "0" et les lecteurs d'écran le considéreront comme un bouton approprié, car vous avez judicieusement ajouté . role = "bouton" pour cela. Git commit && push alors! Il y a quelques tâches supplémentaires pour cette chose, mais nous en avons terminé avec le style. Qu'est ce qui pourrait aller mal? Il est l'heure de déjeuner. Bien, allons-y!
Une heure plus tard…
C’était un bon déjeuner! Revenons à notre chose clicky. Nous devons effectuer certaines tâches avant de continuer. Voyons voir… Nous devons appeler une fonction doSomething une fois le bouton cliqué, et il devrait exister un moyen de le désactiver pour qu’il ne puisse pas être cliqué. Cela semble facile. Ajoutons un écouteur d’événements à ce bouton:
Fait. L'utilisateur peut maintenant cliquer dessus avec une souris sur le bureau et appuyer dessus avec un doigt sur un écran tactile. Un événement clic se déclenchera de manière fiable et vous verrez beaucoup de choses! dans votre console. Quelle est la prochaine tâche?
Attends! Nous devons nous assurer que cela fonctionne de la même manière pour les utilisateurs de clavier. Parce que nous avons ceci tabindex = "0" sur le bouton, il peut être concentré et une fois que cela est fait, les utilisateurs devraient pouvoir appuyer sur la barre d'espace ou sur la touche "Entrée" pour déclencher tout ce que nous avons attaché.
Nous devons donc attacher un autre écouteur d'événement pour intercepter toutes les incrustations, et nous n'activerons notre fonction que pour certaines clés. Dieu merci, les appareils tactiles sont suffisamment intelligents pour convertir tous les robinets en clics. sinon, nous devrons également joindre un grand nombre d’événements tactiles.
Ouf! Maintenant, notre fonction clicky est entièrement accessible depuis le clavier. Je suis si fier de toi! Et JavaScript est vraiment magique – que ferions-nous sans cela?
Très bien, quelle est la dernière tâche: "Le bouton devrait avoir un état désactivé qui change son apparence et son comportement en quelque chose qui est engourdi." Engourdi Je suppose que cela signifie quelque chose de gris et de ne pas répondre aux interactions. OK, ajoutons un état dans la feuille de style en utilisant le nommage BEM.
Cela me semble bien engourdi . Chaque fois que le bouton doit être désactivé, nous ajouterons le modificateur - désactivé pour le rendre gris. Mais elle n’est pas encore suffisamment engourdie: elle peut toujours être focalisée et déclenchée à la fois par un pointeur et par le clavier.
Bon, ça devient compliqué.
Non seulement cela, mais le bouton ne devrait pas être accessible dans le menu contextuel. ordre de tabulation, ce qui signifie que l'attribut tabindex ne devrait pas être là. Et nous devons vérifier si le bouton a l'état désactivé, puis arrêter de déclencher notre fonction. En outre, ce modificateur pourrait être appliqué de manière dynamique. Bien que le fait de faire correspondre des éléments à des sélecteurs à la volée et d’appliquer des styles ne pose pas de problème à CSS, il se peut que nous ayons besoin d’un observateur des mutations pour déclencher d’autres changements pour ce bouton.
Je sais, n’est pas? Nous pensions que ce serait un simple petit bouton qui déclenche une fonction et a un état désactivé. Nous avons essayé de remédier à la situation en matière d’accessibilité et tout le reste, et nous nous trouvons maintenant au plus profond de ce terrier de lapin.
Attrapons de la nourriture à emporter. Nous ne serons pas à la maison pour le dîner avant que nous ayons fini et testé correctement. W3C sanglant! Pourquoi n’essaient-ils pas de nous rendre la vie plus facile? Comme s’ils se soucient de nous!
En fait, ils le font…
Faisons quelques pas en arrière avant de sauter dans ce gâchis. Pourquoi n’essayons-nous pas de faire ces choses en utilisant l’élément ? Il contient quelques astuces utiles, et pas seulement les styles laids du navigateur. Oh, et n'oubliez pas type = "button" – vous ne voulez pas que le bouton "Fermer" de la fenêtre contextuelle envoie accidentellement le formulaire, car type = "submit" est le valeur par défaut.
Apparemment, lorsque le est activé et que la barre d'espace ou la touche "Entrée" est enfoncée, l'événement click est déclenché, exactement comme le font les appareils mobiles lorsqu'ils obtiennent des taps, tapote, lèche ou quoi que ce soit d'autre, ils sont capables de recevoir aujourd'hui. Un auditeur d'événements de moins dans notre code! Nice.
// Un clic suffit!
button.addEventListener ('clic', quelque chose à faire);
En ce qui concerne l'état désactivé, l'attribut disabled est disponible pour l'élément ainsi que pour tous les éléments de forme, y compris