Verwende Buttons

• In Web-Oberflächen ist es hinsichtlich Barrierefreiheit und Funktionalität die richtige Wahl, statt eines <div> ein <button> zu verwenden
• Ein <div> 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 <button> 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 <div> bauen

• Unter React- oder HTMX-Nutzern gibt es viele Fälle, in denen Interaktionen wie das Öffnen eines Modals in der Form <div onclick="..."> umgesetzt werden
  • Beispielcode:

    <div onclick="showSignIn()">Open Modal</div>
    

• 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 <button> standardmäßig bereits mitbringt

Welche Standardfunktionen <button> mitbringt

• Das <button>-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 <div> umzusetzen, erfordert mehrere Attribute und Skripte,
  während ein <button> das mit nur einer Zeile löst

  <button onclick="showSignIn()">Open Modal</button>
  

Fazit: Einfachheit ist am besten

• Ein <button> 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