<button>: Das Button-Element

Die Attribute dieses Elements umfassen die globalen Attribute.

autofocus

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

command Experimentell

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

"show-modal"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .showModal() Methode auf das Dialogelement.

Der Button wird einen <dialog> als modal anzeigen. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt.

"close"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .close() Methode auf das Dialogelement.

Der Button wird ein <dialog> Element schließen. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt.

"request-close"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .requestClose() Methode auf das Dialogelement.

Der Button wird anfordern, ein <dialog> Element zu schließen. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt.

"show-popover"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .showPopover() Methode auf das Popover-Element.

Dies entspricht popovertargetaction mit dem Wert "show".

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits sichtbares Popover anzuzeigen, wird keine Aktion ausgeführt. Siehe Popover API für mehr Details.

"hide-popover"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .hidePopover() Methode auf das Popover-Element.

Dies entspricht popovertargetaction mit dem Wert "hide".

Der Button wird ein sichtbares Popover verbergen. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt. Siehe Popover API für mehr Details.

"toggle-popover"

Dies ist ein deklaratives Äquivalent zu einem Aufruf der .togglePopover() Methode auf das Popover-Element.

Dies entspricht popovertargetaction mit dem Wert "toggle".

Der Button wird ein Popover zwischen sichtbar und versteckt umschalten. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover sichtbar ist, wird es versteckt. Siehe Popover API für mehr Details.

Benutzerdefinierte Werte

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

commandfor Experimentell

Verwandelt ein <button>-Element in einen Kommando-Button, der das angegebene interaktive Element kontrolliert; nimmt die ID des zu kontrollierenden Elements als seinen Wert.

Dies ist eine allgemeinere Version von popovertarget.

disabled

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

form

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

Dieses Attribut ermöglicht es Ihnen, <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 übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formulierungsbesitzers des Buttons. Hat keine Wirkung, wenn kein Formulierungsbesitzer vorhanden ist.

formenctype

Wenn der Button ein Submit-Button ist (er steht in Verbindung mit einem <form> und hat nicht type="button"), legt fest, 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 übermitteln.
• text/plain: Als Debugging-Hilfe angegeben; sollte nicht für die tatsächliche Formularübermittlung verwendet werden.

Wenn dieses Attribut festgelegt ist, überschreibt es das enctype-Attribut des Formulierungsbesitzers des Buttons.

formmethod

Wenn der Button ein Submit-Button ist (er steht in Verbindung mit einem <form> und hat nicht type="button"), legt dieses Attribut die verwendete HTTP-Methode fest, um das Formular zu übermitteln. Mögliche Werte:

• post: Die Daten des Formulars werden im Body der HTTP-Anfrage an den Server gesendet. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie Login-Daten.
• get: Die Formulardaten werden an die action-URL des Formulars angehängt, mit einem ? als Separator, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat, wie Suchformulare.
• dialog: Diese Methode zeigt an, dass der Button den Dialog schließt, mit dem er verbunden ist, und die Formulardaten überhaupt nicht übermittelt.

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

formnovalidate

Wenn der Button ein Submit-Button ist, gibt dieses boolesche Attribut an, dass das Formular nicht validiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formulierungsbesitzers 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 ein standardisierter, mit einem Unterstrich vorangestellter Schlüsselwort, das angibt, wo die Antwort auf die Formularübermittlung angezeigt werden soll. Dies ist der name oder das Schlüsselwort für einen Browskontext (einem Tab, Fenster oder <iframe>). Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formulierungsbesitzers des Buttons. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: lädt die Antwort in denselben Browskontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: lädt die Antwort in einen neuen, unbenannten Browskontext — normalerweise ein neuer Tab oder ein neues Fenster, abhängig von den Einstellungen des Benutzers.
• _parent: lädt die Antwort in den übergeordneten Browskontext des aktuellen. Wenn es keinen übergeordneten Kontex gibt, verhält sich diese Option wie _self.
• _top: lädt die Antwort in den obersten Browskontext (d.h. den Browskontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn es keinen Elternteil 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 zum Übermitteln des Formulars verwendet wird.

popovertarget

Verwandelt ein <button>-Element in einen Popover-Steuerbutton; nimmt die ID des zu kontrollierenden Popover-Elements als seinen Wert. Das Herstellen einer Beziehung zwischen einem Popover und seinem aufrufenden Button mit dem popovertarget-Attribut hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded Beziehung zwischen Popover und Aufrufer und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Tastatur- und unterstützende Technologie-Nutzer (siehe auch Popover Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Verankerungsreferenz zwischen den beiden, was es sehr praktisch macht, Popover relativ zu ihren Steuerungen mit CSS-Verankerungspositionierung zu positionieren. Siehe Popover Verankerungspositionierung für mehr Details.

popovertargetaction

Gibt die Aktion an, die für ein durch einen Steuer-<button> kontrolliertes Popover-Element ausgeführt werden soll. Mögliche Werte sind:

"hide"

Der Button wird ein sichtbares Popover verbergen. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt.

"show"

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

"toggle"

Der Button wird ein Popover zwischen sichtbar und versteckt umschalten. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover sichtbar ist, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Steuerbutton 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 Steuerungen auf ihre Anfangswerte zurück, ähnlich wie <input type="reset">. (Dieses Verhalten neigt dazu, Nutzer zu ärgern.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er gedrückt wird. Es können clientseitige Skripte geschrieben werden, um auf die Ereignisse des Elements zu reagieren.

value

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

Ein Submit-Button mit dem Attribut formaction gesetzt, aber ohne ein zugehöriges Formular, tut nichts. Sie müssen einen Formularbesitzer festlegen, entweder durch Einbettung in ein <form> oder indem Sie 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 komplexe Darstellungen verwenden.

Wenn Ihre Buttons nicht dazu gedacht sind, Formulardaten an einen Server zu übermitteln, stellen Sie sicher, dass ihr type-Attribut auf button gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht existierende) 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 Aktionen auszulösen. Ein aktivierter Button kann programmierbare Aktionen mit JavaScript ausführen, wie das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen Benutzeragenten Buttons als display: flow-root, was einen neuen Blockformatierungskontext etabliert 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 Button, der auf display: inline gesetzt ist, 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 bieten Informationen für unterstützende Technologien, wie Screenreader, damit sie das Dokument analysieren und einen Zugänglichkeitsbaum generieren können. Unterstützende Technologien verwenden dann den Zugänglichkeitsbaum, um die Seiteninhalte zu navigieren und zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, fügen Sie im <button>-Element Text ein, der knapp die Funktionalität des Buttons 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 ein zugänglicher Weg, eine Kombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, während er für unterstützende Technologien interpretiert bleibt.

Es ist jedoch erwähnenswert, dass es hilfreich sein kann, den Button-Text sichtbar zu lassen, damit Personen, die möglicherweise nicht mit der Bedeutung des Icons vertraut sind, oder den Zweck des Buttons verstehen. Dies ist besonders wichtig für Personen, die nicht technisch versiert sind oder unterschiedliche kulturelle Interpretationen des Icons haben, das der Button verwendet.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Verständnis für WCAG, Erklärung der Richtlinie 4.1
• Erklärung des Erfolgskriteriums 4.1.2 | W3C Verständnis für 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 einer Vielzahl von Personen, einschließlich Personen mit motorischen Steuerungsproblemen und Personen, die ungenaue Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindestinteraktivgröße von 44×44 CSS-Pixel wird empfohlen.

• Erklärung des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verständnis für 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 interaktivem Inhalt — einschließlich Buttons — die in enger visueller Nähe zueinander platziert sind, sollten Abstand haben, der sie voneinander trennt. Dieser Abstand ist vorteilhaft für Personen, die motorische Steuerungsprobleme haben und möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

Abstände können 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 zu verwenden 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-Fokus-Ring für Elemente, 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 einem Element, das :focus hat, nur dann Stile hinzuzufügen, 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 bestimmt, indem die Leuchtkraft der Werte der Button-Schriftfarbe und der Hintergrundfarbe mit dem Hintergrund verglichen wird, auf dem der Button platziert ist. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist für Textinhalte ein Verhältnis von 4.5:1 und für großen Text 3:1 erforderlich. (Großer Text ist definiert als 18,66px und bold oder größer, oder 24px oder größer.)

• WebAIM: Farbkontrast-Prüfer
• MDN Verständnis für WCAG, Erklärung der Richtlinie 1.4
• Erklärung des Erfolgskriteriums 1.4.3 | W3C Verständnis für WCAG 2.0

Ob ein Klick auf einen <button> oder <input>-Buttontypen ihn (standardmäßig) fokussiert, variiert je nach Browser und Betriebssystem. Die meisten Browser fokussieren einen geklickten Button, aber Safari tut dies nicht, von Design her.