Verwende Buttons

• In Web-Oberflächen ist es hinsichtlich Barrierefreiheit und Funktionalität die richtige Wahl, statt eines ein zu verwenden
• Ein `` wird von Screenreadern nicht als interaktives Element erkannt und reagiert weder auf Tastaturfokus noch auf Eingaben per Enter oder Spacebar
• Selbst wenn man Attribute wie [role="button"] oder [tabindex="0"] hinzufügt, bleiben Probleme mit der Fokusreihenfolge und der Verarbeitung von Tastaturereignissen bestehen
• Um diese Probleme zu lösen, mehrere Event-Listener und Bedingungen hinzuzufügen, erzeugt unnötige Komplexität
• Ein `` bringt Barrierefreiheit, Fokus und die Verarbeitung von Tastatureingaben von Haus aus mit und ist daher die einfache und standardkonforme Lösung

---

Falscher Ansatz: Einen Button mit `` bauen

• Unter React- oder HTMX-Nutzern gibt es viele Fälle, in denen Interaktionen wie das Öffnen eines Modals in der Form `` umgesetzt werden
  • Beispielcode:

    Open Modal
    
    

• Probleme dieses Ansatzes
  • Screenreader erkennen das Element nicht als interaktives Element
  • Es ist per Tastatur nicht fokussierbar
  • Nur das click-Event funktioniert; auf Enter- oder Spacebar-Eingaben reagiert es nicht

Grenzen von Versuchen, die Barrierefreiheit zu „reparieren“

• Fügt man das Attribut [role="button"] hinzu, wird das Erkennungsproblem für Screenreader gelöst, die Probleme mit Fokussierbarkeit und Tastatureingaben bleiben jedoch bestehen
• Mit [tabindex="0"] kann man das Element fokussierbar machen, doch es besteht das Risiko einer fehlerhaften Fokusreihenfolge oder unerwarteter Sprünge
• Um Tastatureingaben zu verarbeiten, muss man ein keydown-Event global auf document registrieren und bei Enter oder der Taste ' ' (Leertaste) das fokussierte Element finden und ausführen

  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter' && event.key !== ' ') return;
    const notRealBtn = document.activeElement.closest('[onclick]');
    if (!notRealBtn) return;
    // 실행 코드
  });
  

• Letztlich implementiert man damit auf komplizierte Weise Funktionen neu, die ein `` standardmäßig bereits mitbringt

Welche Standardfunktionen `` mitbringt

• Das ``-Element unterstützt automatisch Folgendes
  • eine implizite Rolle ([role="button"])
  • automatische Fokussierbarkeit
  • im fokussierten Zustand das Auslösen eines click-Events bei Enter- und Spacebar-Eingaben
• Dasselbe Verhalten mit einem umzusetzen, erfordert **mehrere Attribute und Skripte**, während ein das mit nur einer Zeile löst

  Open Modal
  

Fazit: Einfachheit ist am besten

• Ein `` ist die einfachste Methode, um Barrierefreiheitsstandards einzuhalten und zugleich die Code-Menge zu reduzieren
• Statt unnötiger Event-Verarbeitung oder zusätzlicher Attribute ist es für Wartbarkeit und Effizienz vorteilhafter, standardmäßige HTML-Elemente zu verwenden
• Mit der Botschaft „Je fauler der Entwickler, desto eher sollte er das richtige Element verwenden“ wird die Bedeutung guter Entwicklungsgewohnheiten betont: unnötige Komplexität vermeiden und die eingebauten Standardfunktionen nutzen

[come2mecome]

Ein wirklich guter Artikel. Die Kernaussage des Haupttextes lässt sich mit „Verwenden wir HTML-Tags semantisch sinnvoll.“ zusammenfassen. Wenn man mit div-Tags (oder anderen) Klick-Events bereitstellt, hat sich das meiner Meinung nach überhaupt nicht von der Zeit unterschieden, als man Layouts mit table-Tags aufgebaut hat.

[carnoxen]

Natürlich kann man es mit aria-*-Attributen zwar eindeutiger machen, aber bevor man sich diese Mühe macht, verwendet man lieber einfach den passenden Tag lol

[roxie]

Das weckt Erinnerungen, hahaha

[nemorize]

background, border, outline, appearance, -webkit-appearance, cursor
Es gibt viel zu viele Standard-Stylesheets, die man überschreiben muss. seufz

[rtyu1120]

Deshalb gibt es ja ein CSS-Reset.

[carnoxen]

Unsere Behörden-Websites scheinen oft `` zu verwenden...

[GN⁺]

Hacker-News-Kommentare

• Einer meiner größten Kritikpunkte ist, wenn Websites Navigation mit onclick-Handlern umsetzen Wenn man einfach ein ``-Tag verwendet, funktionieren neues Tab öffnen, Integration mit Hilfstechnologien, Rechtsklick-Menü usw. automatisch korrekt Wenn es Navigation ist, sollte man Links statt JavaScript-Suppe verwenden

  • In den letzten Jahren ist die Zahl solcher Implementierungen gestiegen Wahrscheinlich wegen Frameworks oder Gleichgültigkeit Trotzdem ist die traditionelle Methode in Bezug auf UX fast immer besser Ich hoffe, dass Leute, die ``-Tags ersetzen wollen, dabei ein wenig Unannehmlichkeiten haben
  • Ich denke, das Problem ist, dass Entwickler, die mit React angefangen haben, ohne grundlegende HTML-Konzepte zu lernen direkt zu den „spannenden Dingen“ gesprungen sind Diese Leute etablieren falsche Muster, die nachfolgende Entwickler dann einfach übernehmen Ich musste nur äußerst selten ein `` wie einen Button gestalten
  • JS-basiertes Scrollen sollte auch verschwinden Ich scrolle oft mit der mittleren Maustaste, und viele Websites machen das kaputt
  • Das erinnert mich an den Link-Checker von Microsoft Office 365 Beim Linksklick erscheint eine Sicherheitsprüfungsseite, beim Mittelklick geht es aber einfach direkt weiter
  • Auch in einem React-Projekt, an dem ich kürzlich gearbeitet habe, lief die gesamte Navigation über onClick Sogar Elemente, die faktisch Links sind, wurden alle über Klick-Handler verarbeitet, was ich nicht nachvollziehen kann

• Bei den meisten Buttons sollte man type="button" explizit angeben Der Standardwert ist submit, daher wird innerhalb eines Formulars automatisch abgesendet Vermutlich verwenden manche Entwickler deshalb ``

  • Ich finde, dass diese Kerninformation im langen Beitrag des OP fehlt Buttons mit Standardtyp verhalten sich merkwürdig und umgehen JS-Handler teilweise
  • Der Standard entspricht , und ist anders
  • Das habe ich auch durch eigene Erfahrung gelernt
  • Wenn man verwendet, kann man das Problem mit `type="submit"` vermeiden Ein ist von Anfang an leer, sodass man nur die Funktionen hinzufügt, die man braucht, und später leichter Änderungen vornehmen kann Bei `` muss man dagegen die Dokumentation lesen, um das Standardverhalten zu verstehen Letztlich ist es eine Frage von expliziter Kontrolle vs. eingebauten Funktionen

• Ich hätte mir gewünscht, dass der Artikel stärker in die Richtung „Verwendet einfach die HTML-Elemente, die für diesen Zweck gemacht sind“ erweitert wird Viele SPA-Entwickler kennen die Semantik von HTML-Elementen nicht gut und erfinden deshalb ständig das Rad neu

  • Es wäre gut, wenn die Elemente etwas besser stylbar wären Der standardmäßige Date Picker ist zum Beispiel so hässlich, dass man ihn durch eine JS-basierte Variante ersetzt
  • Der Satz „Benutzt einfach die Plattform“ taucht seit HTML5 im Frontend immer wieder auf, hat sich aber noch nicht überall durchgesetzt
  • In der Praxis kennen die meisten Entwickler HTML-Elemente kaum und versuchen, alles mit einem einzigen DIV zu lösen
  • Um 2010 sahen Buttons je nach Browser unterschiedlich aus, sodass man sie selbst bauen musste Das ist ein Teil des Hintergrunds dafür, warum es überhaupt Custom Buttons gibt

• Inzwischen gibt es eine Generation, die über den Bildschirm tippt oder klickt, um überhaupt herauszufinden, was anklickbar ist Vor zehn Jahren hat jemand das Ziehen von Links wichtiger gemacht als Textauswahl, und jetzt ist Textauswahl fast unmöglich Um das zu beheben, müsste man den Browser vielleicht forken

  • Ich habe die Gewohnheit, Links per Drag in einem Hintergrund-Tab zu öffnen Mit gedrückter Alt- (oder Option-)Taste kann man Text innerhalb eines Links auswählen
  • Ähnlich nervig ist es auf iOS, wenn man eine Telefonnummer kopieren will und stattdessen automatisch ein Anruf gestartet wird Das ist wirklich ein unerwünschtes Verhalten
  • Nicht auswählbarer Text macht mich wahnsinnig Mit der macOS-App TextSniper kann man einen Bereich markieren und den Text per OCR kopieren Dadurch wird sogar Google Analytics ein wenig erträglicher
  • Mir passiert es auch oft, dass ich einen Teil des Textes in einem Link auswählen will und daran scheitere Solche Probleme sollten viel öfter angesprochen werden
  • Es gibt auch Browser-Erweiterungen für die Auswahl von Linktext Früher hieß eine davon Select Like A Boss, heute Drag-Select Link Text

• Im Standard-Stylesheet von Chrome gibt es button {align-items: flex-start}, und ich habe deshalb lange nach einem Flexbox-Größenfehler gesucht Trotzdem versuche ich, soweit möglich die korrekten HTML-Elemente zu verwenden, auch wenn in kleinen Nebenprojekten ein `` manchmal bequemer ist

  • Die Eigenschaft appearance: none ist nützlich, um Button-Styling zurückzusetzen Ich erstelle dafür eine Klasse .unbuttonify, die sich wie ein Button verhält, aber anders aussieht
  • Ich möchte betonen, dass Frontend-Entwickler solide CSS-Grundlagen haben sollten

• Man sollte Elemente so weit wie möglich entsprechend ihrer ursprünglichen Bestimmung verwenden

• Ich habe zwei Beschwerden über Buttons Die eine ist, dass man sie ohnehin neu stylen muss, die andere ist die Warnung, dass Buttons nicht verschachtelt werden dürfen Damit stößt man in der Praxis ziemlich häufig zusammen

• LLMs erzeugen solche falschen Muster sehr häufig Sie ignorieren oft die Standardfunktionen des Browsers und implementieren Dinge unnötig kompliziert Ich bitte Claude oft, solchen Code zu vereinfachen Auch in TypeScript neigen sie dazu, die Fehlerbehandlung auf merkwürdige Weise zu gestalten

  • LLMs sind hervorragend darin, Code zu schreiben, aber ihnen fehlt oft das Gespür für Software Engineering
  • Aufgrund ihrer Token-Vorhersageeigenschaften wählen LLMs häufiger komplexe Muster

• Ich verwende nach Möglichkeit standardmäßig Buttons Wenn sich etwas tatsächlich wie ein Link verhalten soll, verwende ich aber ein ``-Tag

  • Wenn sich die URL ändert, ist es ein Link; wenn nicht, dann ein Button
  • Ein „Hyperlink, der innerhalb einer Web-App navigiert“, ist ein ``-Tag

• Ich habe mich gefragt, warum überhaupt vorgeschlagen wird, `` zu verwenden

  • Vermutlich, weil ein `` sich besser für seltsame optische Anpassungen eignet Dadurch sieht es am Ende weder wie ein Button aus noch verhält es sich wie einer
  • Zum Beispiel hat eine Seite wie TV Tropes lange Listen im Stil von „Ordnern“ ein- und ausgeklappt und das mit `` umgesetzt
  • Der häufigste Grund ist vermutlich, dass es lästig ist, das Standard-Button-Styling zu überschreiben