Auswahlliste ohne Beschriftung
CriticalWCAG criterion 4.1.2BFSG-relevant
What is the 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.
Why does it matter?
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.
How to fix it
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.
Is your website affected?
The free quick check tests up to 5 pages within minutes — no registration.
Start a free quick check