Barrierefreiheit

Auswahlliste (select) ohne zugänglichen Namen

Üblicher Schweregrad: mittel · Aufwand: minimal

Woran du es erkennst

Ein <select>-Dropdown hat weder <label>, aria-label noch aria-labelledby (axe-Regel select-name) — Screenreader-Nutzer hören nur „Auswahlklappliste", ohne zu wissen, wofür.

Warum es zählt

Ein Dropdown ohne Namen ist ein Ratespiel: Land? Anzahl? Sortierung? Wer nicht sehen kann, welche Beschriftung danebensteht, kann das Feld nicht sicher ausfüllen — Formulare scheitern an einer einzigen fehlenden Zeile Markup.

So behebst du es

  1. Verknüpfe jede Auswahlliste mit einem sichtbaren <label for="..."> — das hilft zusätzlich Maus- und Touch-Nutzern durch die größere Klickfläche.
  2. Wenn kein sichtbares Label gewünscht ist, nutze aria-label mit klarem Text (z. B. aria-label="Sortierung wählen").
  3. Prüfe Filter- und Sortier-Dropdowns in Templates: Sie werden oft label-los als „reine Icons" gebaut und mehrfach wiederverwendet.

Zum Nachlesen