<button>: Das Button-Element

Probieren Sie es aus

<button class="favorite styled" type="button">Add to favorites</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

autofocus

Dieses boolesche Attribut gibt an, dass der Button bei Seitenaufruf den Eingabe-Fokus erhalten soll. Nur ein Element in einem Dokument kann dieses Attribut haben.

command

Gibt die Aktion an, die bei einem vom Steuerungselement <button> kontrollierten Element über das commandfor-Attribut ausgeführt werden soll. Die möglichen Werte sind:

"show-modal"

Der Button zeigt ein <dialog> als Modal an. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt. Dies ist eine deklarative Entsprechung zum Aufrufen der Methode HTMLDialogElement.showModal() auf das <dialog>-Element.

"close"

Der Button schließt ein <dialog>-Element. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist eine deklarative Entsprechung zum Aufrufen der Methode HTMLDialogElement.close() auf das <dialog>-Element.

"request-close"

Der Button löst ein cancel-Ereignis auf einem <dialog>-Element aus, um den Browser zu bitten, es zu schließen, gefolgt von einem close-Ereignis. Dies unterscheidet sich vom close-Befehl dadurch, dass Autoren Event.preventDefault() auf das cancel-Ereignis aufrufen können, um zu verhindern, dass sich das <dialog> schließt. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist eine deklarative Entsprechung zum Aufrufen der Methode HTMLDialogElement.requestClose() auf das <dialog>-Element.

"show-popover"

Der Button zeigt einen verborgenen Popover an. Wenn Sie versuchen, einen bereits angezeigten Popover erneut anzuzeigen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies ist gleichbedeutend mit dem Setzen eines Werts von show für das Attribut popovertargetaction und bietet auch eine deklarative Entsprechung zum Aufrufen der Methode HTMLElement.showPopover() auf das Popover-Element.

"hide-popover"

Der Button versteckt einen angezeigten Popover. Wenn Sie versuchen, einen bereits verborgenen Popover zu verbergen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies ist gleichbedeutend mit dem Setzen eines Werts von hide für das Attribut popovertargetaction und bietet auch eine deklarative Entsprechung zum Aufrufen der Methode HTMLElement.hidePopover() auf das Popover-Element.

"toggle-popover"

Der Button wechselt einen Popover zwischen angezeigt und verborgen. Wenn der Popover verborgen ist, wird er angezeigt; wenn der Popover angezeigt wird, wird er verborgen. Siehe Popover API für weitere Details. Dies ist gleichbedeutend mit dem Setzen eines Werts von toggle für das Attribut popovertargetaction und bietet auch eine deklarative Entsprechung zum Aufrufen der Methode HTMLElement.togglePopover() auf das Popover-Element.

Benutzerdefinierte Werte

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

commandfor

Wandelt ein <button>-Element in einen Befehls-Button um, der ein bestimmtes interaktives Element durch den im Attribut command des Buttons angegebenen Befehl steuert. Das commandfor-Attribut nimmt die ID des zu steuernden Elements als Wert. Dies ist eine allgemeinere Version von popovertarget.

disabled

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

form

Das <form>-Element, das dem Button zugeordnet werden soll (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben Dokument sein. (Falls dieses Attribut nicht gesetzt ist, wird der <button> seinem übergeordneten <form>-Element zugeordnet, falls 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 übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formularbesitzers des Buttons. Macht nichts, wenn es keinen Formularbesitzer gibt.

formenctype

Wenn der Button ein Submit-Button ist (er befindet sich innerhalb/ist mit einem <form> verbunden und hat nicht type="button"), gibt dies an, wie die Formulardaten kodiert werden, die übermittelt werden. Mögliche Werte:

• application/x-www-form-urlencoded: Die Standardeinstellung, wenn das Attribut nicht verwendet wird.
• multipart/form-data: Wird verwendet, um <input>-Elemente mit ihren type-Attributen, die auf file gesetzt sind, zu übermitteln.
• 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 befindet sich innerhalb/ist mit einem <form> verbunden und hat nicht type="button"), gibt dieses Attribut die verwendete HTTP-Methode zur Übermittlung des Formulars an. Mögliche Werte:

• post: Die Daten des Formulars werden im Hauptteil der HTTP-Anfrage an den Server gesendet. Wird verwendet, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, z. B. Zugangsdaten.
• get: Die Formulardaten werden an die action-URL des Formulars angefügt, mit einem ? als Trennzeichen, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat, wie bei Suchformularen.
• dialog: Diese Methode gibt an, dass der Button den Dialog schließt, mit dem er verbunden ist, und die Formulardaten überhaupt 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 boolesche Attribut an, dass das Formular beim Absenden nicht validiert werden soll. 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 ein standardisiertes, mit Unterstrich versehenes Schlüsselwort, das angibt, wo die Antwort auf das Übermitteln 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 besondere Bedeutungen:

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

name

Der Name des Buttons, der beim Absenden des Formulars als Paar zusammen mit dem value des Buttons übermittelt wird.

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerungs-Button um; nimmt die ID des Popover-Elements an, das gesteuert werden soll. Das Herstellen einer Beziehung zwischen einem Popover und seinem Auslöser-Button mit dem popovertarget-Attribut hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslöser und ordnet das Popover beim Anzeigen logisch in die Tastaturfokus-Navigationsreihenfolge ein. Dies macht das Popover für Benutzer von Tastatur und unterstützenden Technologien (AT) zugänglicher (siehe auch Popover-Zugänglichkeitseigenschaften).
• Der Browser erstellt eine implizite Anker-Referenz zwischen beiden, wodurch es sehr praktisch ist, Popovers relativ zu ihren Steuerungen mit CSS-Anker-Positionierung zu positionieren. Siehe Popover-Anker-Positionierung für weitere Details.

popovertargetaction

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

"hide"

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

"show"

Der Button zeigt ein verborgenes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover erneut anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wechselt ein Popover zwischen angezeigt und verborgen. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es verborgen. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die durch den Steuerungs-Button ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button sendet die Formulardaten an den Server. Dies ist die Standardoption, wenn das Attribut für Buttons, die mit einem <form> verbunden sind, nicht angegeben ist oder wenn das Attribut ein leerer oder ungültiger Wert ist.
• reset: Der Button setzt alle Steuerungen auf ihre Anfangswerte zurück, ähnlich wie <input type="reset">. (Dieses Verhalten kann Benutzer verärgern.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er gedrückt wird. Es können clientseitige Skripts erstellt werden, die auf die Ereignisse des Elements hören, die beim Auftreten der Ereignisse ausgelöst werden.

value

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

Hinweise

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

<button>-Elemente lassen sich viel einfacher stylen als <input>-Elemente. Sie können inneren HTML-Inhalt hinzufügen (denken Sie an <i>, <br> oder sogar <img>) und die Pseudoelemente ::after und ::before für eine komplexe Darstellung 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 vorhandene) 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 Ereignis-Handler geskriptet werden, um Verhaltensweisen auszulösen. Ein aktivierter Button kann programmierbare Aktionen mit JavaScript ausführen, wie das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen User-Agents Buttons als display: flow-root, was einen neuen Block Formatting Context 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 wie Flex- oder Grid-Elemente. Ein Button, der auf display: inline gesetzt ist, wird so gestylt, als ob der Wert auf display: inline-block gesetzt wäre.

Barrierefreiheit

Icon-Buttons

Buttons, die nur ein Icon darstellen, haben keinen zugänglichen Namen. Zugängliche Namen liefern Informationen für unterstützende Technologien, wie Bildschirmlesegeräte, um beim Parsen des Dokuments einen Barrierefreiheitsbaum zu erzeugen. Unterstützende Technologien verwenden dann den Barrierefreiheitsbaum, um auf Seiteninhalte zuzugreifen und diese zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, fügen Sie Text im <button>-Element ein, der die Funktionalität des Buttons knapp 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 von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, aber ihn für unterstützende Technologien weiterhin parsierbar zu machen.

Allerdings ist es wichtig zu beachten, dass das Lassen des Button-Textes sichtbar Menschen helfen kann, die möglicherweise nicht mit der Bedeutung des Icons vertraut sind oder den Zweck des Buttons verstehen. Dies ist besonders wichtig für Menschen, die nicht technisch versiert sind oder unterschiedliche kulturelle Interpretationen des vom Button verwendeten Icons haben können.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 4.1
• Verständnis des Erfolgskriteriums 4.1.2 | W3C Verständnis von WCAG 2.0

Größe und Nähe

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 Menschen, 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 Verständnis von WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - Das A11Y-Projekt

Nähe

Große Mengen interaktiver Inhalte — einschließlich Buttons —, die in enger visueller Nähe zueinander platziert sind, sollten einen Abstand zwischen sich haben. Diese Platzierung ist vorteilhaft für Menschen, die motorische Kontrollprobleme haben, die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

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

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

ARIA-Statusinformationen

Um den Zustand eines Buttons zu beschreiben, ist das richtige ARIA-Attribut aria-pressed und nicht aria-checked oder aria-selected. Weitere Informationen finden Sie in den Informationen über die ARIA-Button-Rolle.

Button-Stile

Es ist am besten, den Standardfokus-Ring für Elemente, die im Fokus stehen, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokusszustand genügend Kontrast hat, damit Menschen mit Sehschwäche ihn wahrnehmen können und Menschen mit kognitiven Unterschieden ihn verstehen können.

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

Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtdichte der Button-Text- und Hintergrundfarbwerte mit dem Hintergrund verglichen wird, auf dem der Button platziert ist. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für Großtext erforderlich. (Großtext wird als 18,66px und bold oder größer oder 24px oder größer definiert.)

• WebAIM: Farbkontrast-Checker
• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von WCAG 2.0

Klicken und Fokus

Ob das Klicken auf einen <button> oder <input>-Button-Typen dazu führt, dass dieser (standardmäßig) fokussiert wird, variiert je nach Browser und Betriebssystem. Die meisten Browser geben einem angeklickten Button den Fokus, aber Safari tut dies nicht, aus Designgründen.

Beispiele

<button name="button">Press me</button>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität