<button>: Das Buttonelement

Zu den Attributen dieses Elements gehören die globalen Attribute.

autofocus

Dieses boolesche Attribut legt fest, dass der Button den Eingabe-Fokus haben soll, wenn die Seite geladen wird. Nur ein Element in einem Dokument kann dieses Attribut haben.

command

Gibt die Aktion an, die auf einem Element ausgeführt werden soll, das von einem Steuer-<button> kontrolliert wird, angegeben durch das commandfor-Attribut. Die möglichen Werte sind:

"show-modal"

Der Button zeigt einen <dialog> als Modal an. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufrufen der .showModal()-Methode auf dem Dialogelement.

"close"

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

"request-close"

Der Button fordert das Schließen eines <dialog>-Elements an. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufrufen der .requestClose()-Methode auf dem Dialogelement.

"show-popover"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt. Siehe Popover API für mehr Details. Dies ist äquivalent zu popovertargetaction mit dem Wert "show". Dies ist ein deklaratives Äquivalent zum Aufrufen der .showPopover()-Methode auf dem Popover-Element.

"hide-popover"

Der Button verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion durchgeführt. Siehe Popover API für mehr Details. Dies ist äquivalent zu popovertargetaction mit dem Wert "hide". Dies ist ein deklaratives Äquivalent zum Aufrufen der .hidePopover()-Methode auf dem Popover-Element.

"toggle-popover"

Der Button wechselt ein Popover zwischen Anzeigen und Verstecken. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Siehe Popover API für mehr Details. Dies ist äquivalent zu popovertargetaction mit dem Wert "toggle". Dies ist ein deklaratives Äquivalent zum Aufrufen der .togglePopover()-Methode auf dem Popover-Element.

Benutzerdefinierte Werte

Dieses Attribut kann benutzerdefinierte Werte darstellen, die mit zwei Bindestrichen (--) vorangestellt sind. Buttons mit einem benutzerdefinierten Wert lösen das CommandEvent auf dem gesteuerten Element aus.

commandfor

Wandelt ein <button>-Element in einen Befehlsbutton um, der das angegebene interaktive Element steuert; der Wert des Attributs ist die ID des zu kontrollierenden Elements. Dies ist eine allgemeinere Version von popovertarget.

disabled

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

form

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

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

formaction

Die URL, die die vom Button gesendeten Informationen verarbeitet. Überschreibt das action-Attribut des Formularbesitzers des Buttons. Tut nichts, wenn kein Formularbesitzer vorhanden ist.

formenctype

Wenn der Button ein Absende-Button ist (er befindet sich in/verknüpft mit einem <form> und hat nicht type="button"), gibt er an, wie die Formulardaten, die gesendet werden, kodiert 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 ihren type-Attributen zu senden, die auf file gesetzt sind.
• text/plain: Als Hilfe zum Debuggen 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 Absende-Button ist (er befindet sich in/verknüpft mit einem <form> und hat nicht type="button"), gibt dieses Attribut die verwendete HTTP-Methode zur Übermittlung des Formulars an. Mögliche Werte:

• post: Die Daten aus dem Formular werden im Hauptteil der HTTP-Anfrage enthalten, wenn sie an den Server gesendet wird. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie 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 verknüpft ist, und die Formulardaten überhaupt nicht übermittelt.

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

formnovalidate

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

Dieses Attribut steht auch auf den <input type="image">- und <input type="submit">-Elementen zur Verfügung.

formtarget

Wenn der Button ein Absende-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein standardisiertes, unterstrich-vorangestelltes Schlüsselwort, das angibt, wo die Antwort vom Übermitteln des Formulars angezeigt werden soll. Dies ist der name eines oder das Schlüsselwort für ein browsing context (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 besondere Bedeutungen:

• _self: Laden Sie die Antwort im selben Browsing-Kontext wie derzeit. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Laden Sie die Antwort in einen neuen unbenannten Browsing-Kontext — normalerweise ein neues Tab oder Fenster, abhängig von den Einstellungen des Benutzers.
• _parent: Laden Sie die Antwort im übergeordneten Browsing-Kontext des aktuellen. Gibt es kein übergeordnetes Element, verhält sich diese Option genauso wie _self.
• _top: Laden Sie die Antwort im obersten Browsing-Kontext (d.h. dem Browsing-Kontext, der ein Vorfahre des aktuellen ist und kein übergeordnetes Element hat). Gibt es kein übergeordnetes Element, verhält sich diese Option genauso wie _self.

name

Der Name des Buttons, der als Paar mit dem value des Buttons als Teil der Formulardaten gesendet wird, wenn dieser Button verwendet wird, um das Formular abzusenden.

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerungsbutton um; der Wert des Attributs ist die ID des zu kontrollierenden Popover-Elements. Die Etablierung einer Beziehung zwischen einem Popover und seinem auslösenden Button durch das popovertarget-Attribut 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 in einer logischen Position in der Tastaturfokusnavigation, wenn es angezeigt wird. Dadurch wird das Popover für Tastatur- und Unterstützungstechnologie-Benutzer (AT) zugänglicher (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, wodurch es sehr praktisch wird, Popover relativ zu ihren Steuerungen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für mehr Details.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover zu verbergen, wird keine Aktion durchgeführt.

"show"

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

"toggle"

Der Button wird ein Popover zwischen Anzeigen und Verstecken wechseln. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. 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> verknüpft sind, nicht angegeben oder wenn das Attribut leer oder ungültig ist.
• reset: Der Button setzt alle Steuerungen auf ihre Anfangswerte zurück, ähnlich wie <input type="reset">. (Dieses Verhalten neigt dazu, Nutzer zu irritieren.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er gedrückt wird. Er kann Client-seitige Skripte haben, die auf die Ereignisse des Elements hören, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der mit dem name des Buttons verknüpft ist, wenn er mit den Formulardaten gesendet wird. Dieser Wert wird an den Server in Parametern übermittelt, wenn das Formular mit diesem Button gesendet wird.

Ein Absende-Button mit gesetztem formaction-Attribut, aber ohne ein zugehöriges Formular, tut nichts. Sie müssen einen Formularbesitzer setzen, entweder indem Sie es 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 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 zur Übermittlung von Formulardaten an einen Server verwendet werden, 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 Ereignishandler geskriptet werden, um Verhaltensweisen 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 Benutzeragenten Buttons als display: flow-root, was einen neuen Block-Formatierungskontext schafft und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, solange sie nicht überlaufen. Wenn der Button als flex- oder raster-Container definiert ist, verhalten sich die Kinder als flex- oder raster-Elemente. Ein auf display: inline gesetzter Button wird so gestylt, als wäre der Wert auf display: inline-block gesetzt.

Buttons, die nur ein Icon anzeigen, haben keinen Zugänglichen Namen. Zugängliche Namen liefern Informationen für unterstützende Technologien, wie Bildschirmlesegeräte, um darauf zuzugreifen, wenn sie das Dokument analysieren und einen Barrierefreiheitsbaum generieren. Unterstützende Technologien verwenden dann den Barrierefreiheitsbaum, um Seiteninhalte zu navigieren und zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, fügen Sie Text in das <button>-Element ein, das die Funktionalität des Buttons kurz beschreibt.

Beispiele

<button name="favorite">
  <svg fill="black" 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 Methode, eine Kombination aus CSS-Eigenschaften zu verwenden, um ihn optisch vom Bildschirm zu entfernen, aber von unterstützenden Technologien weiterhin analysierbar zu halten.

Es ist jedoch erwähnenswert, dass es hilfreich sein kann, den Text des Buttons sichtbar zu lassen, um Personen zu unterstützen, die mit der Bedeutung des Icons möglicherweise nicht vertraut sind oder den Zweck des Buttons nicht verstehen. Dies ist besonders wichtig für Menschen, die technologisch nicht versiert sind oder möglicherweise unterschiedliche kulturelle Interpretationen des verwendeten Icons haben.

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

Größe

Interaktive Elemente wie Buttons sollten eine ausreichend große Fläche haben, um leicht aktiviert werden zu können. Dies hilft verschiedenen Personen, einschließlich Personen mit motorischen Kontrollproblemen und Personen, die ungenaue Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixel wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - The A11Y Project

Nähe

Große Mengen an interaktiven Inhalten - einschließlich Buttons - die in unmittelbarer visueller Nähe zueinander platziert sind, sollten Abstand haben, der sie voneinander trennt. Dieser Abstand kommt Personen zugute, die unter motorischen Kontrollproblemen leiden oder versehentlich den falschen interaktiven Inhalt aktivieren könnten.

Abstände können mit CSS-Eigenschaften wie margin erstellt werden.

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

Um den Status eines Buttons zu beschreiben, ist das richtige 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 standardmäßigen Fokusring von Elementen, die den Fokus haben, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genug Kontrast hat, damit Personen mit Sehschwächen ihn wahrnehmen können und Personen mit kognitiven Unterschieden ihn verstehen.

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

Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Button-Text- und Hintergrundfarbwerte mit dem Hintergrund bestimmt, auf dem der Button platziert ist. Um den aktuellen Web Content Accessibility Guidelines (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 ist definiert als 18.66px und bold oder größer oder 24px oder größer.)

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

Ob das Klicken auf einen <button> oder <input>-Buttontypen dazu führt, dass dieser (standardmäßig) fokussiert wird, hängt vom Browser und Betriebssystem ab. Die meisten Browser geben einem angeklickten Button den Fokus, aber Safari tut dies nicht, absichtlich.