Wann ist eine Schaltfläche keine Schaltfläche?

Angenommen, Sie haben einen Teil einer Benutzeroberfläche, auf den der Benutzer klickt, und es passiert etwas. Klingt für mich wie ein Knopf, aber nennen wir es vorerst ein „klickendes Ding“. Ich weiß, Sie sind sich sicher, dass es sich auch um einen Knopf handelt: Er ist abgerundet und fällt durch eine schöne Tomatenfarbe auf, die zur Interaktion einlädt. Aber denken wir einen Moment darüber nach. Das spart auf lange Sicht Zeit, versprochen.

Was wäre, wenn der Text in diesem klickigen Ding „Weiterlesen“ lautete und das Klicken darauf den Benutzer zu einem Artikel auf einer anderen Seite führte? Hmm. Und was wäre, wenn das blau unterstrichene Wort „Schließen“ das Popup-Dialogfeld schließt? Ist es ein Link, nur weil es blau und unterstrichen ist? Natürlich nicht.

Wow! Es scheint, als ob es keine Möglichkeit gibt, zu erkennen, ob es sich um einen Link oder eine Schaltfläche handelt, indem man es sich nur ansieht. Das ist verrückt! Wir müssen verstehen, was dieses Ding tut, bevor wir das richtige Element auswählen. Aber was ist, wenn wir noch nicht wissen, was es tut oder einfach verwirrt sind? Nun, es gibt ein praktisches Flussdiagramm für uns:

1. Es ist ein Knopf.
2. Wenn nicht, dann ist es ein Link.
3. Das ist es.

Ist also alles ein Knopf? Nein, aber Sie können immer mit einer Schaltfläche für fast jedes Element beginnen, auf das geklickt oder auf ähnliche Weise interagiert werden kann. Und wenn etwas fehlt, wie die Navigation zu einer anderen Seite, verwenden Sie stattdessen einen Link. Und nein, ein Zeiger ist kein Grund, ihn <a href> zu machen. Dafür haben wir cursor: pointer .

Okay, es ist ein <button> -Button – da sind wir uns einig. Fügen wir es in unsere Vorlage ein und gestalten es gemäß dem Design: etwas Polsterung, Rundung, eine Tomatenfüllung, weißer Text und sogar einige Fokusstile. Oh, das ist so nett von dir.

 <button type="button" class="button"> Something </button> <style> .button { display: inline-block; padding: 10px 20px; border-radius: 20px; background-color: tomato; color: white; } .button:focus { outline: none; box-shadow: 0 0 0 5px #006AE3; } </style>

Das dauerte nicht lange. Sie wollten es schnell bauen und etwas zu Mittag essen, weil Sie hungrig sind. Ok, mal sehen, wie es aussieht und loslegen.

Oh mein Gott! Irgendetwas stimmt mit dem Browser nicht. Warum ist dieser Knopf so hässlich? Der Text ist winzig, obwohl wir den body explizit auf 16px gesetzt haben, und sogar die font-family ist falsch. Der abgerundete Rand mit einem albernen Pseudoschatten ist so retro, dass er noch nicht einmal ein Trend ist.

Ahh, das ist das Standard-Design des Browsers. Sie müssen es vorsichtig rückgängig machen oder sogar Normalize.css oder Reset.css hinzufügen … oder Sie könnten einfach ein <div> verwenden und es vergessen. Ist das schnelle Lösen von Problemen nicht das, wofür sie Sie bezahlen? Du hast Hunger und das hilft überhaupt nicht. Aber Sie sind Profi: Reißen Sie sich zusammen und denken Sie nach.

Was ist überhaupt der Unterschied zwischen einem <button> und einem <div> ? Ein eingebauter <button> ist ein interaktives Element, dh es kann mit ihm interagiert werden. Das ist tiefgründig. Sie können darauf klicken, Sie können sich mit einer Tastatur darauf konzentrieren, und es vermittelt Screenreadern auch eine zugängliche button , sodass Benutzer verstehen können, dass es sich um eine Schaltfläche handelt.

Beeindruckend! Sie kennen nicht nur das <button> -Element von HTML, sondern wissen auch ein oder zwei Dinge über ARIA und Screenreader-Unterstützung. Möglicherweise haben Sie sogar VoiceOver oder NVDA ausprobiert, um zu testen, wie zugänglich Ihre Schnittstellen sind.

Sie haben sich also für einen Trick entschieden. Sie werden nicht mit dem Design des Browsers herumspielen und das Element wie eine richtige interaktive Schaltfläche für Benutzer aussehen lassen, die es möglicherweise benötigen. Das ist Schlau!

 <div class="button" tabindex="0" role="button"> Something </div>

Jetzt sieht es nicht nur richtig aus, sondern kann dank des tabindex="0" auch über die Tastatur fokussiert werden, und Screenreader behandeln es als richtige Schaltfläche, weil Sie ihm klugerweise role="button" hinzugefügt haben. Git commit && push dann! Es gibt einige zusätzliche Aufgaben für dieses Ding, aber wir sind mit dem Styling fertig. Was könnte möglicherweise falsch laufen? Zeit fürs Mittagessen. Großartig! Auf geht's!

Eine Stunde später…

Das war ein schönes Mittagessen! Kommen wir zurück zu unserem Clicky-Ding. Wir müssen einige Aufgaben erledigen, bevor wir weitermachen. Mal sehen … Wir müssen eine doSomething -Funktion aufrufen, sobald auf die Schaltfläche geklickt wird, und es sollte eine Möglichkeit geben, die Schaltfläche zu deaktivieren, sodass sie nicht angeklickt werden kann. Klingt einfach. Fügen wir dieser Schaltfläche einen Ereignis-Listener hinzu:

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); }); function doSomething() { console.log('Something!'); } </script>

Getan. Der Benutzer kann es nun mit der Maus auf dem Desktop anklicken und auf einem Touchscreen mit dem Finger darauf tippen. Ein Klickereignis wird zuverlässig ausgelöst, und Sie werden viel Etwas sehen! in Ihrer Konsole. Was ist die nächste Aufgabe?

Festhalten! Wir müssen sicherstellen, dass es für Tastaturbenutzer gleich funktioniert. Da wir dieses tabindex="0" auf der Schaltfläche haben, kann es fokussiert werden, und sobald es fokussiert ist, sollten Benutzer in der Lage sein, die Leertaste oder die Eingabetaste zu drücken, um das auszulösen, was wir angehängt haben.

Wir müssen also einen weiteren Ereignis-Listener anhängen, um alle Tastenbetätigungen abzufangen, und wir werden unsere Funktion nur für bestimmte Tasten auslösen. Gott sei Dank sind Touch-Geräte intelligent genug, um alle Berührungen in Klicks umzuwandeln; Andernfalls müssten wir auch eine Reihe von Berührungsereignissen anhängen.

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); button.addEventListener('keyup', (event) => { if (event.key == 'Enter' || event.key == ' ') { doSomething(); } }); }); function doSomething() { console.log('Something!'); } </script>

Puh! Jetzt ist unser Clicky-Ding vollständig über die Tastatur zugänglich. Ich bin so stolz auf dich! Und JavaScript ist wirklich magisch – was würden wir ohne es tun?

In Ordnung, was ist die letzte Aufgabe: "Die Schaltfläche sollte einen deaktivierten Zustand haben, der ihr Aussehen und Verhalten in etwas Taubheit ändert." Taub? Ich denke, das bedeutet etwas Graues und reagiert nicht auf Interaktion. OK, fügen wir einen Zustand im Stylesheet hinzu, indem wir die BEM-Benennung verwenden.

 <div class="button button--disabled" tabindex="0" role="button"> Something </div> <style> .button--disabled { background-color: #9B9B9B; } </style> 

Das sieht für mich angenehm taub aus. Wann immer die Schaltfläche deaktiviert werden muss, fügen wir den Modifikator button--disabled hinzu, um sie grau zu machen. Aber es ist noch nicht taub genug: Es kann immer noch sowohl per Zeiger als auch über die Tastatur fokussiert und ausgelöst werden.

Verdammt, das wird schwierig.

Darüber hinaus sollte die Schaltfläche in der Tab-Reihenfolge nicht zugänglich sein, was bedeutet, dass das tabindex Attribut nicht vorhanden sein sollte. Und wir müssen prüfen, ob die Schaltfläche deaktiviert ist, und dann unsere Funktion nicht mehr auslösen. Dieser Modifikator könnte auch dynamisch angewendet werden. Obwohl es für CSS kein Problem ist, Elemente spontan mit Selektoren abzugleichen und Stile anzuwenden, benötigen wir möglicherweise eine Art Mutationsbeobachter, um andere Änderungen für diese Schaltfläche auszulösen.

Ich weiß es schon gut? Wir dachten, dies wäre ein einfacher kleiner Knopf, der eine Funktion auslöst und einen deaktivierten Zustand hat. Wir haben versucht, es mit Zugänglichkeit und all dem Zeug richtig zu machen, und jetzt stecken wir tief in diesem Kaninchenbau.

Lass uns etwas Essen zum Mitnehmen holen. Wir werden nicht zum Abendessen zu Hause sein, wenn wir fertig sind und dies richtig testen. Verdammtes W3C! Warum versuchen sie nicht, unser Leben einfacher zu machen? Als ob sie sich um uns kümmern würden!

Tatsächlich tun sie…

Gehen wir ein paar Schritte zurück, bevor wir uns in dieses Chaos stürzen. Warum versuchen wir diese Dinge nicht mit dem <button> -Element? Es hat einige nützliche Tricks auf Lager, nicht nur die hässlichen Stile des Browsers. Oh, und vergessen Sie nicht type="button" – Sie möchten nicht, dass die Schaltfläche "Schließen" des Popups versehentlich das Formular absendet, da type="submit" der Standardwert ist.

Wenn die <button> fokussiert ist und die Leertaste oder die „Enter“-Taste gedrückt wird, wird anscheinend das click ausgelöst, genau wie mobile Geräte es tun, wenn sie Taps, Streicheleinheiten, Licks oder was auch immer sie empfangen können, erhalten heute. Ein Event-Listener weniger in unserem Code! Hübsch.

 // A click is enough! button.addEventListener('click', doSomething);

Wie für den deaktivierten Zustand ist das disabled Attribut für das Element <button> sowie für alle Formularelemente verfügbar, einschließlich <fieldset> . Im Ernst. Wussten Sie, dass Sie eine ganze Reihe von gruppierten Eingaben deaktivieren können, indem Sie einfach ein einzelnes Attribut auf das übergeordnete <fieldset> ?

 <fieldset disabled> <legend>A bunch of numb inputs</legend> <p> <label> <input type="radio" name="option"> Of course it's a link </label> </p> <p> <label> <input type="radio" name="option"> Obviously, it's a button </label> </p> <p> <label> <input type="radio" name="option"> I just wanna go home </label> </p> <button type="button">Button</button> </fieldset>

Jetzt wissen Sie! Dieses Attribut deaktiviert nicht nur alle Ereignisse auf Formularelementen, sondern entfernt sie auch aus der Tab-Reihenfolge. Problem gelöst!

 <button disabled type="button" class="button"> Something </button>

Aber warte, es gibt noch mehr! Es löst auch die :disabled -Pseudoklasse in CSS aus, was bedeutet, dass wir den BEM-Modifikator loswerden können, um Stile zu deklarieren, und stattdessen den eingebauten dynamischen Modifikator verwenden können.

 .button:disabled { background-color: #9B9B9B; }

Was die hässlichen Stile des Browsers betrifft, müssen wir nicht die gesamte Normalize.css verwenden, um eine einzelne Schaltfläche zu reparieren. Verwenden Sie es als Quelle der Weisheit: Die drei zusätzlichen Zeilen unten beheben die meisten lästigen Unterschiede zum <div> . Wenn Sie einmal mehr benötigen, können Sie die relevanten Teile daraus kopieren.

 .button { font-size: 100%; font-family: inherit; border: none; }

Getan. HTML ist gar nicht so schlecht!

Aber wenn es Sie hin und wieder überrascht, überprüfen Sie unbedingt die HTML-Spezifikation auf Antworten. Es ist im Laufe der Jahre viel freundlicher geworden und enthält viele Beispiele für gute Verwendung und Zugänglichkeit. Und natürlich ist der gute alte HTML5 Doctor immer noch ein zuverlässiger Ort, um den Unterschied zwischen den <section> - und <article> -Elementen herauszufinden und zu prüfen, ob die Dokumentgliederung schon eine Sache ist (nicht wirklich). Es ist gut möglich, dass Sie am Ende auch die HTML-Dokumentation von Mozilla lesen, und Sie werden es auch nicht bereuen.

Diese Aufgabe ist nun erledigt! Was kommt als nächstes? Ein Dropdown-Karussellkalender mit Suchfeld? Oh mein! Viel Glück damit. Aber denken Sie daran: Der <button> ist Ihr Freund!

Weiterführende Literatur zu SmashingMag:

• So entwerfen Sie bessere Schaltflächen
• Inklusive Toggle-Buttons bauen
• Ghost-Button-Design: Gibt es das wirklich noch (und warum)?
• Design Patterns: Wenn das Brechen der Regeln in Ordnung ist