<button>: Das Button-Element

Die Attribute dieses Elements beinhalten die globalen Attribute.

autofocus

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

command Experimentell

Gibt die Aktion an, die auf einem Element ausgeführt werden soll, das von einem Steuerungsbutton <button> kontrolliert wird, angegeben über das Attribut commandfor. Mögliche Werte sind:

"show-modal"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .showModal() auf dem Dialogelement.

Der Button zeigt ein <dialog> als Modal an. Wenn der Dialog bereits modal ist, wird keine Aktion durchgeführt.

"close"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .close() auf dem Dialogelement.

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

"request-close"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .requestClose() auf dem Dialogelement.

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

"show-popover"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .showPopover() auf dem Popover-Element.

Dies ist äquivalent zu popovertargetaction mit dem Wert "show".

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt. Weitere Informationen finden Sie in der Popover-API.

"hide-popover"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .hidePopover() auf dem Popover-Element.

Dies ist äquivalent zu popovertargetaction mit dem Wert "hide".

Der Button wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover zu verbergen, wird keine Aktion durchgeführt. Weitere Informationen finden Sie in der Popover-API.

"toggle-popover"

Dies ist ein deklaratives Äquivalent zum Aufrufen der Methode .togglePopover() auf dem Popover-Element.

Dies ist äquivalent zu popovertargetaction mit dem Wert "toggle".

Der Button wird ein Popover zwischen anzeigen und verbergen umschalten. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es verborgen. Weitere Informationen finden Sie in der Popover-API.

Benutzerdefinierte Werte

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

commandfor Experimentell

Verwandelt ein <button>-Element in einen Befehlsbutton, der das gegebene interaktive Element kontrolliert; als Wert nimmt es die ID des zu kontrollierenden Elements.

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, dem der Button zugeordnet werden soll (sein Formular-Eigentümer). 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, falls vorhanden, assoziiert.)

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 Vorfahren-<form>-Element überschreiben.

formaction

Die URL, die die Informationen bearbeitet, die vom Button übermittelt werden. Überschreibt das action-Attribut des Formular-Eigentümers des Buttons. Tut nichts, wenn es keinen Formular-Eigentümer gibt.

formenctype

Wenn der Button ein Senden-Button ist (er ist innerhalb/mit einem <form> assoziiert und hat nicht type="button"), gibt es an, wie die Formular-Daten, 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 auf file gesetzt einzusenden.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für echte Formular-Einreichungen genutzt werden.

Wenn dieses Attribut angegeben ist, überschreibt es das enctype-Attribut des Formular-Eigentümers des Buttons.

formmethod

Wenn der Button ein Senden-Button ist (er ist innerhalb/mit einem <form> assoziiert und hat nicht type="button"), gibt dieses Attribut die HTTP-Methode an, mit der das Formular eingesendet wird. Mögliche Werte:

• post: Die Daten aus dem Formular sind im Körper der HTTP-Anfrage enthalten, wenn sie an den Server gesendet werden. 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 anzuzeigen, dass der Button den Dialog schließt, mit dem er verbunden ist, und keine Formulardaten überträgt.

Wenn angegeben, überschreibt dieses Attribut das method-Attribut des Formular-Eigentümers des Buttons.

formnovalidate

Wenn der Button ein Senden-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 Formular-Eigentümers des Buttons.

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

formtarget

Wenn der Button ein Senden-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein standardisiertes, unterstrich-präfixiertes Schlüsselwort, das angibt, wo die Antwort vom Übermitteln des Formulars angezeigt werden soll. Dies ist der name eines Browsing-Kontextes (ein Tab, Fenster oder <iframe>) oder ein Schlüsselwort dafür. Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formular-Eigentümers des Buttons. Die folgenden Schlüsselwörter haben besondere Bedeutungen:

• _self: Laden Sie die Antwort im selben Browsing-Kontext, wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Laden Sie die Antwort in einen neuen nicht benannten Browsing-Kontext — normalerweise ein neuer Tab oder ein neues Fenster, abhängig von den Browser-Einstellungen des Benutzers.
• _parent: Laden Sie die Antwort in den Elterlichen Browsing-Kontext des aktuellen. Wenn es keinen Eltern gibt, verhält sich diese Option genauso wie _self.
• _top: Laden Sie die Antwort in den obersten Browsing-Kontext (das heißt, der Browsing-Kontext, der ein Vorfahre des aktuellen ist, und keine Eltern hat). Wenn es keinen Eltern gibt, verhält sich diese Option genauso wie _self.

name

Der Name des Buttons, der bei der Nutzung dieses Buttons zum Absenden des Formulars als Paar mit dem value des Buttons als Teil der Formulardaten übermittelt wird.

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerungsbutton um; nimmt die ID des zu kontrollierenden Popover-Elements als seinen Wert. Die Herstellung einer Beziehung zwischen einem Popover und seinem auslösenden Button mithilfe 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 bei Anzeige in einer logischen Position in der Tastaturnavigationsreihenfolge. Dies macht das Popover für Tastatur- und unterstützende Technologie-Nutzer (siehe auch Popover-Accessibilitétsmerkmale) zugänglicher.
• Der Browser erstellt eine implizite Anker-Referenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerungen mithilfe der CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

popovertargetaction

Gibt die Aktion an, die an einem von einem Steuerungsbutton <button> kontrollierten Popover-Element ausgeführt werden soll. 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 verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt.

"toggle"

Der Button wird ein Popover zwischen anzeigen und verbergen umschalten. Wenn das Popover verborgen ist, wird es gezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction nicht angegeben ist, 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 nicht für Buttons angegeben ist, die mit einem <form> verbunden sind, oder wenn das Attribut ein leerer oder ungültiger Wert ist.
• reset: Der Button setzt alle Steuerungen auf ihre ursprünglichen Werte zurück, wie <input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu nerven.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er gedrückt wird, sofern er nicht entsprechend programmiert wurde. Er kann clientseitige Skripte haben, die auf die Ereignisse des Elements lauschen, die ausgelöst werden, wenn die Ereignisse auftreten.

value

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

Ein Senden-Button mit gesetztem Attribut formaction, aber ohne ein zugehöriges Formular, tut nichts. Sie müssen einen Formulareigentümer angeben, 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 (denken Sie an <i>, <br> oder sogar <img>) hinzufügen und ::after- und ::before-Pseudo-Elemente für komplexes Rendering verwenden.

Wenn Ihre Buttons nicht dazu gedacht sind, Formulardaten an einen Server zu senden, stellen Sie sicher, dass das type-Attribut auf button gesetzt ist. Andernfalls versuchen sie, Formulardaten zu senden und die (nicht existierende) Antwort zu laden, was möglicherweise den aktuellen Zustand des Dokuments zerstören könnte.

Während <button type="button"> kein Standardverhalten hat, können Ereignishandler geskriptet werden, um Verhalten 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, das 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 Button, der auf display: inline gesetzt ist, wird gestylt, als ob der Wert auf display: inline-block gesetzt wäre.

Buttons, die nur ein Icon anzeigen, haben keinen zugänglichen Namen. Zugängliche Namen stellen Informationen für unterstützende Technologien bereit, wie Bildschirmlesegeräte, um zuzugreifen, wenn sie das Dokument analysieren und einen Zugänglichkeitsbaum erzeugen. Unterstützende Technologien nutzen dann den Zugänglichkeitsbaum, um sich durch den Seiteninhalt zu navigieren und diesen zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, geben Sie Text im <button>-Element ein, der die Funktionalität des Buttons treffend 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 verbergen möchten, ist ein zugänglicher Weg, dies zu tun, eine Kombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, aber ihn für unterstützende Technologien parsierbar zu halten.

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

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Verständnis von WCAG, Richtlinien 4.1 Erklärungen
• Verständnis des Erfolgskriteriums 4.1.2 | W3C Verständnis von 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 Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die ungenaue Formen der Eingabe wie einen Stift oder Finger verwenden. Eine Mindestgröße von 44×44 CSS-Pixel wird empfohlen.

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

Nähe

Große Mengen an interaktivem Inhalt – einschließlich Buttons – sollten in enger visueller Nähe zueinander Raum voneinander haben. Dieser Abstand ist vorteilhaft für Menschen, die motorische Kontrollprobleme erleben und versehentlich den falschen interaktiven Inhalt aktivieren könnten.

Der Abstand kann durch CSS-Eigenschaften wie margin erzeugt werden.

• Handzittern und das Problem der riesigen Buttons - Axess Lab

Um den Zustand 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 Standard-Fokus-Ring für Elemente, die im Fokus stehen, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genügend Kontrast hat, damit Menschen mit Sehbehinderungen ihn wahrnehmen können und Menschen mit kognitiven Unterschieden ihn verstehen.

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

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit der Button-Text- und Hintergrundfarbwerte mit dem Hintergrund, auf dem der Button platziert ist, verglichen wird. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalt 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-Prüfer
• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von WCAG 2.0

Ob das Klicken auf einen <button> oder <input> Button-Typen ihn (standardmäßig) in den Fokus versetzt, variiert je nach Browser und Betriebssystem. Die meisten Browser geben einem geklickten Button den Fokus, aber Safari tut dies aus Designgründen nicht.