<button>: Das Button-Element

Die Attribute dieses Elements umfassen die globalen Attribute.

autofocus

Dieses Boolean-Attribut gibt an, dass der Button beim Laden der Seite den Fokus haben soll. Nur ein Element in einem Dokument kann dieses Attribut haben.

command

Gibt die Aktion an, die an einem Element, das von einem Steuerungs-<button> kontrolliert wird, mit dem commandfor-Attribut ausgeführt werden soll. Mögliche Werte sind:

"show-modal"

Der Button wird ein <dialog> als modal anzeigen. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der .showModal()-Methode am Dialogelement.

"close"

Der Button wird ein <dialog>-Element schließen. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der .close()-Methode am Dialogelement.

"request-close"

Der Button wird anfordern, dass ein <dialog>-Element geschlossen wird. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der .requestClose()-Methode am Dialogelement.

"show-popover"

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "show". Dies ist ein deklaratives Äquivalent zum Aufruf der .showPopover()-Methode am Popover-Element.

"hide-popover"

Der Button wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "hide". Dies ist ein deklaratives Äquivalent zum Aufruf der .hidePopover()-Methode am Popover-Element.

"toggle-popover"

Der Button wird ein Popover zwischen Anzeigen und Verbergen umschalten. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es ausgeblendet. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "toggle". Dies ist ein deklaratives Äquivalent zum Aufruf der .togglePopover()-Methode am Popover-Element.

Benutzerdefinierte Werte

Dieses Attribut kann benutzerdefinierte Werte darstellen, die mit einem doppelten Bindestrich (--) versehen sind. Tasten mit einem benutzerdefinierten Wert lösen das CommandEvent am gesteuerten Element aus.

commandfor

Wandelt ein <button>-Element in einen Steuerungsbutton um, der das angegebene interaktive Element steuert; übernimmt die ID des zu steuernden Elements als Wert. Dies ist eine allgemeinere Version von popovertarget.

disabled

Dieses Boolean-Attribut verhindert, dass der Benutzer mit dem Button interagiert: Er kann nicht gedrückt oder fokussiert werden.

form

Das <form>-Element, das mit dem Button verbunden werden soll (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <button> mit seinem übergeordneten <form>-Element, falls vorhanden, verknüpft.)

Dieses Attribut ermöglicht es, <button>-Elemente mit <form>s im gesamten Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <form>-Element ersetzen.

formaction

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formularbesitzers des Buttons. Tut nichts, wenn es keinen Formularbesitzer gibt.

formenctype

Wenn der Button ein Submit-Button ist (er ist in einem <form> innerhalb/verbunden und hat nicht type="button"), gibt er an, wie die übermittelten Formulardaten codiert werden sollen. Mögliche Werte:

• application/x-www-form-urlencoded: Der Standard, wenn das Attribut nicht verwendet wird.
• multipart/form-data: Wird verwendet, um <input>-Elemente mit ihrem type-Attribut auf file zu setzen.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für echte Formularübermittlungen verwendet werden.

Wenn dieses Attribut angegeben ist, überschreibt es das enctype-Attribut des Formularbesitzers des Buttons.

formmethod

Wenn der Button ein Submit-Button ist (er ist in einem <form> innerhalb/verbunden und hat nicht type="button"), gibt dieses Attribut die HTTP-Methode an, die verwendet wird, um das Formular zu übermitteln. Mögliche Werte:

• post: Die Daten aus dem Formular werden im Rumpf der HTTP-Anfrage bei der Übertragung an den Server eingebunden. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie z.B. Anmeldedaten.
• get: Die Formulardaten werden an die action-URL des Formulars angehängt, mit einem ? als Trennzeichen, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat, wie Suchformulare.
• dialog: Diese Methode wird verwendet, um anzugeben, dass der Button den Dialog schließt, mit dem er verbunden ist, und die Formulardaten nicht überträgt.

Wenn angegeben, überschreibt dieses Attribut das method-Attribut des Formularbesitzers des Buttons.

formnovalidate

Wenn der Button ein Submit-Button ist, gibt dieses Boolean-Attribut an, dass das Formular nicht validiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formularbesitzers des Buttons.

Dieses Attribut ist auch auf <input type="image"> und <input type="submit">-Elementen verfügbar.

formtarget

Wenn der Button ein Submit-Button ist, ist dieses Attribut ein vom Autor definierter Name oder standardisiertes, unterstrich-präfixiertes Schlüsselwort, das angibt, wo die Antwort vom Absenden des Formulars angezeigt werden soll. Dies ist der name oder das Schlüsselwort für einen Browsing-Kontext (ein Tab, Fenster oder <iframe>). Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formularbesitzers des Buttons. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Lädt die Antwort in den gleichen Browsing-Kontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Lädt die Antwort in einen neuen unbenannten Browsing-Kontext — normalerweise ein neuer Tab oder ein Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen übergeordneten gibt, verhält sich diese Option wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (d.h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten hat). Wenn es keinen übergeordneten gibt, verhält sich diese Option wie _self.

name

Der Name des Buttons, der als Paar mit dem value des Buttons als Teil der Formulardaten übermittelt wird, wenn dieser Button verwendet wird, um das Formular zu senden.

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerungsbutton um; übernimmt die ID des zu steuernden Popover-Elements als Wert. Die Herstellung einer Beziehung zwischen einem Popover und seinem Auslöser-Button mittels des popovertarget-Attributs hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover beim Anzeigen in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge. Dies macht das Popover zugänglicher für Tastatur- und unterstützende Technologie (AT)-Nutzer (siehe auch Popover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Anker-Referenz zwischen den beiden, was es sehr bequem macht, Popover mit CSS-Anker-Positionierung relativ zu ihren Steuerelementen zu positionieren. Siehe Popover-Anker-Positionierung für mehr Details.

popovertargetaction

Gibt die Aktion an, die an einem von einem Steuerungs-<button> kontrollierten Popover-Element ausgeführt werden soll. Mögliche Werte sind:

"hide"

Der Button wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wird ein Popover zwischen Anzeigen und Verbergen umschalten. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es ausgeblendet. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Steuerungsbutton ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button übermittelt die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut für Buttons, die mit einem <form> verbunden sind, nicht angegeben ist oder wenn das Attribut einen leeren oder ungültigen Wert hat.
• reset: Der Button setzt alle Steuerelemente auf ihre Ausgangswerte zurück, wie <input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu verärgern.)
• button: Der Button hat kein Standardverhalten und tut von Haus aus nichts, wenn er gedrückt wird. Er kann clientseitige Skripts haben, die auf die Ereignisse des Elements lauschen, die ausgelöst werden, wenn die Ereignisse eintreten.

value

Definiert den Wert, der mit dem name des Buttons verknüpft ist, wenn es zusammen mit den Formulardaten gesendet wird. Dieser Wert wird beim Absenden des Formulars mit diesem Button als Parameter an den Server übergeben.

Ein Submit-Button mit dem Attribut formaction gesetzt, aber ohne ein zugehöriges Formular tut nichts. Sie müssen einen Formularbesitzer festlegen, entweder indem Sie ihn in ein <form> einbetten oder das Attribut form auf die ID des Formulars setzen.

<button>-Elemente sind viel einfacher zu stylen als <input>-Elemente. Sie können inneren HTML-Inhalt hinzufügen (denken Sie an <i>, <br> oder sogar <img>), und ::after und ::before Pseudo-Elemente für komplexes Rendering verwenden.

Wenn Ihre Buttons nicht zum Übermitteln von Formulardaten an einen Server gedacht sind, stellen Sie sicher, dass ihr type-Attribut auf button gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht vorhandene) Antwort zu laden, was möglicherweise den aktuellen Zustand des Dokuments zerstört.

Während <button type="button"> kein Standardverhalten hat, können Ereignis-Handler geskriptet werden, um Aktionen auszulösen. Ein aktivierter Button kann programmierbare Aktionen mit JavaScript ausführen, wie z.B. das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen User-Agents Buttons als display: flow-root, welches einen neuen Block-Formatierungskontext erstellt und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, solange sie nicht überlaufen. Wenn der Button als Flex- oder Grid-Container definiert ist, verhalten sich die Kinder als Flex- oder Grid-Elemente. Ein auf display: inline gesetzter Button wird so gestylt, als wäre der Wert display: inline-block.

Buttons, die nur ein Symbol anzeigen, haben keinen accessible name. Zugängliche Namen bieten Informationen für unterstützende Technologie, wie Bildschirmleser, die beim Parsen des Dokuments und Erstellen eines Zugänglichkeitsbaumes zugreifen können. Unterstützende Technologie verwendet dann den Zugänglichkeitsbaum, um auf den Seiteninhalt zuzugreifen und ihn zu manipulieren.

Um einem Symbol-Button einen zugänglichen Namen zu geben, setzen Sie einen Text in das <button>-Element, der die Funktionalität des Buttons prägnant beschreibt.

Beispiele

<button name="favorite">
  <svg fill="#000000" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  Add to favorites
</button>

Ergebnis

Wenn Sie den Text des Buttons visuell ausblenden möchten, ist es eine zugängliche Möglichkeit, eine Kombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, ihn aber von unterstützender Technologie weiterhin parsen zu lassen.

Es ist jedoch erwähnenswert, dass das Belassen des Textes auf dem Button sichtbar Menschen helfen kann, die möglicherweise mit der Bedeutung des Symbols nicht vertraut sind oder die Funktion des Buttons nicht verstehen. Dies ist besonders wichtig für Menschen, die nicht technikaffin sind oder unterschiedliche kulturelle Interpretationen des Symbols auf dem Button haben könnten.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Verständnis der WCAG, Richtlinie 4.1 Erklärungen
• Verständnis des Erfolgskriteriums 4.1.2 | W3C Verständnis WCAG 2.0

Größe

Interaktive Elemente wie Buttons sollten eine ausreichend große Fläche haben, um einfach aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die ungenaue Eingabeformen wie einen Stift oder Finger verwenden. Eine minimale Interaktionsgröße von 44×44 CSS-Pixeln wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verständnis WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y-Projekt

Nähe

Große Mengen interaktiver Inhalte — einschließlich Buttons — die in enger visueller Nähe zueinander platziert werden, sollten durch Leerraum getrennt sein. Dieser Abstand ist für Menschen von Vorteil, die motorische Kontrollprobleme haben und versehentlich den falschen interaktiven Inhalt aktivieren könnten.

Abstand kann mit CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Riesen-Button-Problem - Axess Lab

Um den Zustand eines Buttons zu beschreiben, ist das korrekte ARIA-Attribut aria-pressed und nicht aria-checked oder aria-selected. Um mehr zu erfahren, lesen Sie die Informationen über die ARIA-Button-Rolle.

Es ist am besten, den Standard-Fokusrahmen für fokussierte Elemente nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand ausreichend Kontrast hat, damit Menschen mit Sehbehinderungen ihn wahrnehmen können und Menschen mit kognitiven Unterschieden ihn verstehen.

Die :focus-visible-Pseudo-Klasse kann verwendet werden, um Stile auf ein Element anzuwenden, das :focus erhält, nur wenn die Heuristiken des Benutzer-Agents bestimmen, dass der Fokus hervorgehoben werden sollte, wie wenn ein <button> über Tastaturfokus verfügt. Siehe :focus vs :focus-visible für mehr Informationen.

Das Farbkontrastverhältnis wird verglichen, indem die Helligkeit der Button-Text- und Hintergrundfarbwerte mit dem Hintergrund verglichen wird, auf dem der Button platziert ist. Um den aktuellen Richtlinien für Webinhalte (WCAG) zu entsprechen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für großen Text erforderlich. (Großer Text wird definiert als 18,66px und bold oder größer, oder 24px oder größer.)

• WebAIM: Farbkontrast-Checker
• MDN Verständnis der WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0

Ob das Klicken auf ein <button> oder <input>-Button-Typen dazu führt, dass sie (standardmäßig) fokussiert werden, variiert je nach Browser und Betriebssystem. Die meisten Browser fokussieren einen gerade geklickten Button, aber Safari nicht, absichtlich.