Die Attribute dieses Elements umfassen die globalen Attribute.

autofocus

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

command

Gibt die Aktion an, die auf einem von einem Steuer-<button> gesteuerten Element ausgeführt werden soll, 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 das deklarative Äquivalent zum Aufruf der Methode .showModal() auf dem Dialogelement.

"close"

Der Button schließt ein <dialog>-Element. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist das deklarative Äquivalent zum Aufruf der Methode .close() 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 das deklarative Äquivalent zum Aufruf der Methode .requestClose() auf dem Dialogelement.

"show-popover"

Der Button zeigt einen versteckten Popover an. Wenn Sie versuchen, einen bereits sichtbaren Popover anzuzeigen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "show". Dies ist das deklarative Äquivalent zum Aufruf der Methode .showPopover() auf dem Popover-Element.

"hide-popover"

Der Button verbirgt einen sichtbaren Popover. Wenn Sie versuchen, einen bereits verborgenen Popover zu verbergen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "hide". Dies ist das deklarative Äquivalent zum Aufruf der Methode .hidePopover() auf dem Popover-Element.

"toggle-popover"

Der Button wechselt einen Popover zwischen sichtbar und verborgen. Wenn der Popover verborgen ist, wird er angezeigt; wenn der Popover sichtbar ist, wird er verborgen. Siehe Popover API für weitere Details. Dies entspricht popovertargetaction mit dem Wert "toggle". Dies ist das deklarative Äquivalent zum Aufruf der Methode .togglePopover() 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, das das angegebene interaktive Element steuert; 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 weder gedrückt noch fokussiert werden.

form

Das <form>-Element, das dem Button zugeordnet 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> seinem Vorgänger-<form>-Element zugeordnet, wenn vorhanden.)

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

formaction

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

formenctype

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

• application/x-www-form-urlencoded: Der Standardwert, 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: Zur Problemlösung spezifiziert; sollte nicht für die echte Formularübermittlung verwendet werden.

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

formmethod

Wenn der Button ein Submit-Button ist (innerhalb/verbunden mit einem <form> und nicht type="button" hat), gibt dieses Attribut die HTTP-Methode an, die zur Übermittlung des Formulars verwendet wird. Mögliche Werte:

• post: Die Daten des Formulars werden im Body der HTTP-Anfrage gesendet, 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, bei der ein ? als Trennzeichen dient, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat, wie etwa Suchformulare.
• 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 dieses Attribut angegeben ist, überschreibt es das method-Attribut des Formularbesitzers des Buttons.

formnovalidate

Wenn der Button ein Submit-Button ist, gibt dieses boolesche Attribut an, dass das Formular bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formularbesitzers des Buttons.

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

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 Übermittlung 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 im gleichen Browsing-Kontext wie der aktuelle. Dies ist der Standardwert, wenn das Attribut nicht angegeben ist.
• _blank: Lädt die Antwort in einem neuen nicht benannten Browsing-Kontext — normalerweise ein neuer Tab oder ein neues Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Lädt die Antwort im übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option wie _self.
• _top: Lädt die Antwort im obersten Browsing-Kontext (das heißt, der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option wie _self.

name

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

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerschalter um; nimmt die ID des zu steuernden Popover-Elements als Wert. Das Herstellen einer Beziehung zwischen einem Popover und seinem Aufruferbutton mit dem popovertarget-Attribut hat zwei weitere 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 für Benutzer mit Tastatur und unterstützender Technologie (AT) zugänglicher (siehe auch Popover- Zugänglichkeitsmerkmale).
• Der Browser erstellt einen impliziten Anker-Verweis zwischen den beiden, was es sehr praktisch macht, Popover relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Verankerungspositionierung für weitere Details.

popovertargetaction

Gibt die auf einem Popover-Element auszuführende Aktion an, das von einem Steuer-<button> gesteuert wird. Mögliche Werte sind:

"hide"

Der Button verbirgt einen sichtbaren Popover. Wenn Sie versuchen, einen bereits verborgenen Popover zu verbergen, wird keine Aktion ausgeführt.

"show"

Der Button zeigt einen versteckten Popover an. Wenn Sie versuchen, einen bereits sichtbaren Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wechselt einen Popover zwischen sichtbar und verborgen. Wenn der Popover verborgen ist, wird er angezeigt; wenn der Popover sichtbar ist, wird er verborgen. Wenn popovertargetaction nicht angegeben ist, ist "toggle" die Standardaktion, die vom Steuer-Button ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button sendet die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut nicht für mit einem <form> verbundene Buttons angegeben ist oder wenn das Attribut einen leeren oder ungültigen Wert hat.
• reset: Der Button setzt alle Steuerelemente auf ihre ursprünglichen Werte zurück, ähnlich wie <input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu verärgern.)
• button: Der Button hat kein Standardverhalten und tut nichts, wenn er gedrückt wird. Es können clientseitige Skripte die Ereignisse des Elements überwachen, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der mit dem name des Buttons verbunden ist, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird bei der Einsendung des Formulars über diesen Button als Parameter an den Server übermittelt.

Ein Submit-Button mit gesetztem Attribut formaction, der jedoch kein zugehöriges Formular hat, tut nichts. Sie müssen einen Formulareigentümer festlegen, indem Sie ihn entweder in ein <form> einfügen oder das Attribut form auf die id des Formulars setzen.

<button>-Elemente lassen sich viel einfacher gestalten als <input>-Elemente. Sie können inneren HTML-Inhalt hinzufügen (denken Sie an <i>, <br> oder sogar <img>), und die ::after und ::before Pseudo-Elemente für eine komplexe Darstellung verwenden.

Wenn Ihre Buttons nicht für die Übermittlung 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, wodurch möglicherweise der aktuelle Zustand des Dokuments zerstört wird.

Während <button type="button"> kein Standardverhalten hat, können Ereignishandler geskriptet werden, um Verhalten auszulösen. Ein aktivierter Button kann programmierbare Aktionen durchführen, z. B. ein Element aus einer Liste entfernen, mithilfe von JavaScript.

Standardmäßig stilisieren User-Agents Buttons als display: flow-root, was einen neuen Block Formatting Context einrichtet und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, sofern 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 wird, wird wie display: inline-block gestylt.

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

Um einem Icon-Button einen zugänglichen Namen zu geben, setzen Sie 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 dies auf eine zugängliche Weise möglich, indem Sie eine Kombination von CSS-Eigenschaften verwenden, um ihn visuell vom Bildschirm zu entfernen, aber trotzdem von unterstützender Technologie parsen zu lassen.

Es ist jedoch zu beachten, dass das Belassen des Textes auf dem Button sichtbar Personen helfen kann, die möglicherweise mit der Bedeutung des Icons nicht vertraut sind oder die Funktion des Buttons nicht verstehen. Dies ist besonders wichtig für Personen, die technisch nicht versiert sind oder unterschiedliche kulturelle Interpretationen des Icons haben, das der Button verwendet.

• What is an accessible name? | The Paciello Group
• MDN Understanding WCAG, Leitfaden 4.1 Erklärungen
• Erklärung des Erfolgskriteriums 4.1.2 | W3C Understanding WCAG 2.0

Größe

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

• Erfolgskriterium 2.5.5: Zielgröße verstehen | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y-Projekt

Nähe

Eine große Menge an interaktiven Inhalten — einschließlich Buttons — die in enger visueller Nähe zueinander platziert sind, sollte Raum zwischen ihnen haben. Diese Abstände sind vorteilhaft für Menschen, die motorische Kontrollprobleme haben und möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

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

• Handzittern und das Riesenbuttonproblem - Axess Lab

Um den Status eines Buttons zu beschreiben, ist das korrekte ARIA-Attribut aria-pressed zu verwenden und nicht aria-checked oder aria-selected. Weitere Informationen finden Sie in den Informationen über die ARIA-Buttonrolle.

Es ist am besten, den Standardfokus-Ring für Elemente, die den Fokus haben, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genügend Kontrast aufweist, damit Menschen mit Sehbehinderungen ihn wahrnehmen können und Personen mit kognitiven Unterschieden ihn verstehen.

Die :focus-visible Pseudoklasse kann verwendet werden, um Stile auf ein Element anzuwenden, das :focus hat, nur wenn die Heuristik des User Agents bestimmt, dass der Fokus hervorgehoben werden sollte, etwa wenn ein <button> Tastaturfokus erhält. Weitere Informationen finden Sie unter :focus vs :focus-visible.

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit der Text- und Hintergrundfarben des Buttons 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 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: Farb-Kontrast Checker
• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Erklärung des Erfolgskriteriums 1.4.3 | W3C Understanding WCAG 2.0

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