Zum Inhalt springen
Pandus
de Sprache ändern
Menü

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

Selbst gebaute Eingabefelder haben keine Beschriftung

Einige selbst gebaute Eingabefelder, etwa ein Suchfeld oder eine Länderauswahl, haben keinen Namen, den assistive Technologien vorlesen können.

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

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer wissen nicht, wofür das Feld gedacht ist. Dadurch können sie womöglich nicht nach Produkten suchen oder keine Adresse eingeben.

Wen es betrifft

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

So beheben Sie es

Geben Sie jedem Element mit einer Eingaberolle (combobox, textbox, searchbox, listbox, slider, spinbutton) einen Namen per aria-labelledby, das auf sichtbaren Text verweist, oder per aria-label. Noch besser: native <input>- oder <select>-Elemente mit einem <label> verwenden.

Bei Shopify

Meist die Suchvorschläge (Predictive Search), Filter oder App-Widgets. Ergänzen Sie Beschriftungen im Liquid und JavaScript des Themes; App-Widgets melden Sie dem App-Entwickler.

Bei Shoptet (CZ)

Meist Such- oder Filterkomponenten im Template. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Meist Such- oder Filtermodule. Ergänzen Sie Beschriftungen in überschriebenen Modul-Templates oder melden Sie es dem Modul-Entwickler.

Bei WooCommerce

Meist Plugins für Suche, Filter oder Adress-Autovervollständigung. Ergänzen Sie Beschriftungen über die Plugin-Einstellungen oder im Child-Theme-Code oder melden Sie es 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 aria-input-field-name. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen