Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Kritisch

Manche Formular-Schaltflächen haben keinen Namen

Manche Schaltflächen, die mit <input type="button">, "submit" oder "reset" erstellt sind, haben keinen lesbaren Text – etwa eine Such- oder Newsletter-Schaltfläche, die nur ein Symbol oder einen leeren value zeigt.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Screenreader- und Sprachsteuerungs-Nutzer erkennen nicht, was die Schaltfläche tut: suchen, abonnieren, Gutschein einlösen oder Formular absenden. Sie überspringen sie womöglich oder drücken die falsche – und finden keine Produkte oder kommen nicht weiter.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Nutzer von Sprachsteuerung

So beheben Sie es

Geben Sie jeder Input-Schaltfläche einen Namen. Üblich ist ein aussagekräftiges value-Attribut, etwa value="Suchen" oder value="Gutschein einlösen". Bei Symbol-Schaltflächen ergänzen Sie aria-label oder ersetzen das Input durch ein <button> mit sichtbarem oder visuell verstecktem Text. Lassen Sie value nicht leer und verlassen Sie sich nicht auf ein Hintergrundbild oder das title-Attribut.

Bei Shopify

Meist die Such- oder Newsletter-Schaltfläche im Theme, als Symbol mit leerem value gestaltet, oder von Apps eingefügte Schaltflächen. Ergänzen Sie value oder aria-label in den Liquid-Snippets des Themes; bitten Sie App-Entwickler, ihre eigenen Schaltflächen zu korrigieren.

Bei Shoptet (CZ)

Meist im Such- oder Newsletter-Formular des Templates oder in eigenen Formularen. Korrigieren Sie zuerst Ihren eigenen Code; zum Template fragen Sie Shoptet oder einen Shoptet-Partner, ob eine neuere Version diese Schaltflächen beschriftet.

Bei PrestaShop

Meist in Such-, Newsletter- oder Gutscheinmodulen, deren .tpl-Templates ein Symbol-Input mit leerem value verwenden. Ergänzen Sie value oder aria-label im Theme oder in überschriebenen Modul-Templates.

Bei WooCommerce

Häufig in Such-Widgets, Newsletter-Formularen, Gutscheinfeldern und Formular-Plugins, die <input type="submit" value=""> ausgeben. Legen Sie den Schaltflächentext in den Widget- oder Plugin-Einstellungen fest oder korrigieren Sie das Child-Theme-Template; Plugin-Schaltflächen melden Sie dem Plugin-Entwickler.

Standards

Standards
StandardAbschnitt
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatische Prüfung: axe-core-Regel input-button-name. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen