Eingabe-Button ohne Text (input-button-name)

Die Regel input-button-name meldet <input type="submit">, type="reset" und type="button" ohne zugänglichen Namen. Ein Screenreader sagt dann nur „Schalter“. Bei diesen Elementen kommt der Name aus dem Attribut value. Die Lösung ist ein value, der sagt, was der Button tut – „Suchen“, „Nachricht senden“, „Filter zurücksetzen“.

Was die Regel bedeutet

Ein <input>-Button kann keinen Inhalt haben: Sein Text ist sein value. Die Regel lässt einen Eingabe-Button bestehen, der seinen Namen bekommt über:

• einen value mit Text,
• aria-label oder aria-labelledby,
• ein title-Attribut oder ein verbundenes <label>,
• oder – nur bei submit und reset – gar kein value-Attribut, weil der Browser dann einen eigenen Standardtext zeigt, etwa „Senden“ oder „Zurücksetzen“.

Gemeldet wird type="button" ohne value, der immer leer ist, und jeder Eingabe-Button, dessen value leer ist oder nur Leerzeichen enthält. value="" am Absende-Button ist die Falle: Es schaltet den Standardtext des Browsers ab und setzt nichts an seine Stelle. Bild-Buttons (type="image") prüft undefined.

Ein Absende-Button ohne value besteht, aber der Standardtext stammt vom Browser – oft in dessen Sprache statt in der Sprache der Seite –, und „Senden“ sagt wenig bei einem Formular, das etwas Bestimmtes tut. Ob ein Name sagt, was der Button tut, beurteilt ein Mensch. Deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader hören am Ende eines Formulars „Schalter“ und müssen raten, ob er absendet, sucht oder zurücksetzt – und wer ein langes Formular versehentlich zurücksetzt, verliert alles Eingetippte. Wer per Sprache steuert, kann nicht „Klick auf Suchen“ sagen, wenn der Button keinen Namen hat. Auf einer Braillezeile erscheint nur die Rolle.

Warum die Prüfung anschlägt

• Suchformulare mit Icon, das als CSS-Hintergrund auf <input type="submit" value=""> liegt: Das Feld wirkt beschriftet und ist es nicht.
• type="button"-Eingaben für JavaScript-Aktionen – „Mehr laden“, „Filter anwenden“ –, deren Beschriftung ein Skript nachträgt oder nie.
• Leerer value aus einer Template-Variable, die CMS oder Theme für eine Sprache nicht gesetzt hat.
• Ältere Formular-Plugins und Shopsysteme, die Eingabe-Buttons mit Stilklasse, aber ohne Wert ausgeben.
• Zurücksetzen-Buttons, die ein Formularbaukasten mit Standardeinstellungen hinzufügt.

So beheben Sie es

1. Geben Sie jedem Eingabe-Button einen value, der die Aktion benennt.
2. Für einen Absende-Button nur mit Icon: Behalten Sie einen echten value und lassen Sie das Icon per CSS zeichnen – oder wechseln Sie zu <button>, der ein SVG und optisch versteckten Text enthalten kann.
3. Überlegen Sie, ob Sie Zurücksetzen-Buttons brauchen: Sie werden leicht versehentlich gedrückt und sind selten nötig.
4. Beheben Sie es im Formular-Template, dann ist jedes Formular, das es nutzt, auf einmal korrigiert.

<!-- Vorher: ein leerer value und ein Button-Input ganz ohne -->
<form class="site-search" action="/suche/">
  <label for="q">Im Shop suchen</label>
  <input id="q" type="search" name="q">
  <input class="site-search__submit" type="submit" value="">
</form>
<input class="filters__reset" type="button">

<!-- Nachher: jeder value sagt, was der Button tut -->
<form class="site-search" action="/suche/">
  <label for="q">Im Shop suchen</label>
  <input id="q" type="search" name="q">
  <input class="site-search__submit" type="submit" value="Suchen">
</form>
<input class="filters__reset" type="button" value="Filter zurücksetzen">

Braucht das Design ein Icon ohne sichtbaren Text, ist <button> das einfachere Element:

<button class="site-search__submit" type="submit">
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20"><circle cx="8" cy="8" r="6"/></svg>
  <span class="visually-hidden">Suchen</span>
</button>

So prüfen Sie es von Hand

1. Suchen Sie im Quelltext nach type="submit", type="reset" und type="button" und prüfen Sie jeweils den value.
2. Wählen Sie jeden Button im Barrierefreiheits-Inspektor Ihres Browsers (Chrome, Edge, Firefox): Der „Name“ darf nicht leer sein.
3. Gehen Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) per Tab ans Ende jedes Formulars: Sagt der Button, was passieren wird?
4. Stellen Sie den Browser auf eine andere Sprache um: Ein Absende-Button ohne value zeigt seinen Standardtext nun in dieser Sprache, die Seite bleibt in ihrer eigenen.

Zugehöriges WCAG-Kriterium

4.1.2 Name, Rolle, Wert, Stufe A: Jedes Bedienelement braucht einen Namen, den assistive Technik lesen kann. Verwandt: 2.5.3 Beschriftung im Namen – ein aria-label muss den sichtbaren value-Text enthalten – und 2.4.6 Überschriften und Beschriftungen, Stufe AA – eine Beschriftung soll den Zweck beschreiben, und „Senden“ tut das selten.

So meldet Reviseberg diese Regel

Reviseberg führt input-button-name auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Buttons und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und alle betroffenen Seiten. Ein Suchformular im Header erscheint auf jeder Seite – ein Fix im Template behebt alle Vorkommen.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 4.1.2 nie als bestanden: Ob jeder Name sagt, was der Button tut, prüft ein Mensch.

Verwandte Regeln

• undefined – dasselbe Problem bei <button>-Elementen, meist Icon-Buttons.
• undefined – Bild-Buttons (<input type="image">) ohne Textalternative.
• undefined – die Formularfelder vor dem Button ohne Beschriftung.

Formulare auf Ihrer Website prüfen – kostenloser Scan