Button im HTML
Eine Schaltfläche, drei Prüfungen
Name, Verschachtelung, Zustand: drei Stellen an jedem HTML-Button.
Anatomie einer Aktion
Der Button ist ein Vertrag
Element, Typ, Name und Zustand bestimmen gemeinsam, was beim Auslösen passiert.
submit sendet, reset setzt zurück, button wartet auf eine Aktion.tabindex darf darin stecken.disabledwird beim Tabben übersprungenlöst nichts ausaria-disabled="true"kündigt „nicht verfügbar“ anVerhalten und Stil müssen Sie selbst sperrenDas Ziel entscheidet über das Element
Beginnen Sie bei der Wirkung. Das Aussehen kommt danach aus dem CSS.
<a href="…">Link<button type="submit">Submit-Button<button type="button">Aktions-Button<button type="reset">selten sinnvollSechs fertige Varianten
Schreiben Sie den Typ auch dann aus, wenn der Browser denselben Standard wählen würde. Damit bleibt die Absicht sichtbar, wenn der Button später in ein Formular wandert.
Für einen Symbol-Button ist sichtbarer Text meist klarer. Bleibt nur das Symbol sichtbar, benennt aria-label die Aktion statt der Form des Symbols.
<!-- Formular senden -->
<button type="submit">Buchung suchen</button>
<!-- Funktion auf der Seite -->
<button type="button">Code kopieren</button>
<!-- Formular zurücksetzen: nur mit klarem Bedarf -->
<button type="reset">Eingaben zurücksetzen</button>
<!-- Reiner Symbol-Button -->
<button type="button" aria-label="Suche schließen">
<span aria-hidden="true">×</span>
</button>
<!-- Vorübergehend nicht verfügbar -->
<button type="submit" disabled>Buchung suchen</button>
<!-- Navigation bleibt ein Link -->
<a class="button" href="/buchung/12345">Buchung öffnen</a>So prüfen Sie es
Testen Sie Bedeutung, Tastatur und Wirkung getrennt.
- TabFokus erreicht den ButtonEin deutlicher Fokusrahmen zeigt den aktuellen Ort.
- AnsageName und Rolle stimmenDas Vorleseprogramm sagt zum Beispiel „Buchung suchen, Schaltfläche“.
- SpaceDie Aktion startetLeertaste und Eingabetaste lösen die Schaltfläche aus.
- WirkungDer Typ hält sein VersprechenSubmit sendet das Formular; ein Link ändert die Adresse.
Aus dem Prüfbericht
Drei Befunde an einer Schaltfläche
Kritisch Der Icon-Button hat keinen Namen Regel button-name
Ein button mit reinem Symbol liefert keinen Text. aria-label an der Schaltfläche benennt die Aktion.
Kritisch Ein Link steckt im Button Regel nested-interactive
Button und Link im selben Element ergeben zwei Ziele an einer Stelle. Setzen Sie den Link neben den Button.
Kritisch Der Zustand des Buttons ist ungültig Regel aria-valid-attr-value
aria-expanded="maybe" beschreibt nichts. Ein Button, der einen Bereich aufklappt, trägt true oder false.
Zum Mitnehmen
Die Schaltfläche, korrigiert
Ein Name, eine Ebene, ein gültiger Zustand.
Korrektur in 3 Schritten ansehen
Dem Symbol-Button einen Namen geben
Das Symbol bleibt sichtbar und für Vorleseprogramme ausgeblendet. aria-label liefert das Wort, das an die Bedienhilfe geht.
KorrekturvergleichSchritt 1 · HTML Vorher
<button class="route-button" id="swapRoute"> <span aria-hidden="true">⇄</span> </button>Nachher
<button class="route-button" id="swapRoute" aria-label="Ausgangspunkt und Ziel tauschen"> <span aria-hidden="true">⇄</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste auf die Schaltfläche. Sie heißt jetzt „Ausgangspunkt und Ziel tauschen“.
Den Link aus dem Button holen
Ein Button darf keinen Link enthalten. Nebeneinander behalten beide ihre Rolle, ihr Ziel und ihren Platz in der Tabulatorreihe.
KorrekturvergleichSchritt 2 · HTML Vorher
<button>Effet wählen <a href="#bandenpult-title">Bandenpunkt</a> </button>Nachher
<button type="button">Effet wählen</button> <a href="#bandenpult-title">Bandenpunkt</a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste durch den Bereich. Sie halten zweimal: Schaltfläche, dann Link.
Den Aufklappzustand richtig angeben
aria-expanded kennt true und false. Der geschlossene Bereich beginnt mit false; die Klickfunktion setzt den Wert danach um.
KorrekturvergleichSchritt 3 · ARIA Vorher
<button aria-controls="drawer-content" aria-expanded="maybe"> Schichtnotiz öffnen </button>Nachher
<button aria-controls="drawer-content" aria-expanded="false"> Schichtnotiz öffnen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Klappen Sie den Bereich auf und wieder zu. Das Programm sagt „erweitert“ und „reduziert“.