Auswahlliste ohne Beschriftung
KritischWCAG-Kriterium 4.1.2BFSG-relevant
Was ist das Problem?
Ein Auswahlfeld (select) hat keinen zugänglichen Namen. Screenreader-Nutzer erfahren nicht, was hier ausgewählt wird — etwa Größe, Farbe oder Stückzahl im Produktformular.
Warum ist das relevant?
WCAG 2.1 Erfolgskriterium 4.1.2 (Name, Rolle, Wert, Stufe A) verlangt für Bedienelemente einen programmatisch bestimmbaren Namen. Relevant für die BFSG-Bewertung.
So behebst du es
Gib jedem Auswahlfeld eine programmatisch verknüpfte Beschriftung: <label for="feld-id">Sortierung</label> plus passender id am <select>. Wo ein sichtbares Label das Layout sprengt (z. B. kompakte Filterleisten), nutze aria-label direkt am Feld: <select name="sort" aria-label="Sortierung">.
Shopware
Filter- und Varianten-Selects stammen aus dem Theme: im Theme-Child das betroffene Twig-Template (z. B. component/listing/filter-*.html.twig) überschreiben und <label> oder aria-label ergänzen.
WooCommerce
Sortier- und Varianten-Dropdowns: Viele Themes bieten Beschriftungs-Optionen; sonst im Child-Theme den Hook (z. B. woocommerce_catalog_ordering) anpassen und dem Select ein aria-label geben.
Shopify
Varianten-Picker und Sortier-Selects liegen in den Sektionen (main-product.liquid, main-collection-*.liquid): dort <label> ergänzen oder aria-label setzen; aktuelle Themes haben oft nur die Übersetzung im Locale-File leer.
WordPress
Bei Formular-Plugins die Label-Option des Feldes aktivieren. Theme-eigene Selects (z. B. Archiv-Dropdowns) im Child-Theme mit <label> oder aria-label versehen.
TYPO3
Selects aus dem Form Framework bekommen ihr Label in der Formular-Definition; eigene Fluid-Selects immer mit <label for> ausgeben.
Ist deine Website betroffen?
Der kostenlose Schnell-Check prüft bis zu 5 Seiten in wenigen Minuten — ohne Registrierung.
Kostenlosen Schnell-Check starten