Auswahlliste ohne Beschriftung (select-name)

Die Regel select-name meldet <select>-Auswahllisten ohne zugänglichen Namen. Ein Screenreader sagt dann „Kombinationsfeld, Relevanz“, aber nicht, was hier ausgewählt wird. Die Lösung ist ein sichtbares <label>, das über for und id mit der Liste verbunden ist oder sie umschließt.

Was die Regel bedeutet

Eine Auswahlliste braucht einen Namen, der sagt, worum es geht – „Sortieren nach“, „Land“, „Größe“. Die gerade gewählte Option ist der Wert, nicht der Name. Die Regel lässt ein <select> bestehen, das seinen Namen bekommt über:

• ein <label>, dessen for zur id der Liste passt, oder ein <label>, das sie umschließt,
• aria-label oder aria-labelledby,
• ein title-Attribut.

Gemeldet wird eine Liste ohne all das – und eine, deren einziges Label mit display: none versteckt ist. Anders als ein Textfeld hat eine Auswahlliste keinen Platzhalter als Notlösung. Deshalb taucht eine fehlende Beschriftung hier auch in Formularen auf, deren Textfelder die Regel undefined bestehen.

Die Regel prüft nur, dass es einen Namen gibt. „Auswählen“ oder „Bitte wählen“ als Beschriftung besteht und sagt nichts – das beurteilt ein Mensch. Deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader hören die aktuelle Option und sonst nichts – „Relevanz“ sagt wenig ohne „Sortieren nach“. Wer per Sprache steuert, kann nicht „Klick auf Land“ sagen, wenn die Liste keinen Namen hat. Menschen mit kognitiven Einschränkungen verlieren den Überblick, welcher Filter welcher ist, wenn mehrere unbeschriftete Listen nebeneinander stehen – wie so oft auf Kategorieseiten von Shops.

Warum die Prüfung anschlägt

• Filter- und Sortierleisten auf Kategorieseiten, in denen die Listen nebeneinander stehen, mit einer Überschrift oder ganz ohne Text.
• Die erste Option als Beschriftung – <option>Land wählen</option> – ohne echtes Label.
• Individuell gestaltete Auswahllisten, die das native <select> hinter einem Ersatz verstecken, es aber ohne Namen im Barrierefreiheitsbaum lassen.
• Geburtsdatum in drei Listen (Tag, Monat, Jahr) unter einem sichtbaren Text, der keine davon beschriftet.
• Sprach- und Währungsumschalter im Header oder Footer.
• Formular-Plugins, die den Beschriftungstext in ein <div> über das Feld setzen.

So beheben Sie es

1. Geben Sie jeder Auswahlliste eine sichtbare Beschriftung und verbinden Sie sie über for und id.
2. Für mehrere Listen unter einer gemeinsamen Frage – Tag, Monat, Jahr – nutzen Sie ein <fieldset> mit <legend> und geben jeder Liste zusätzlich ein kurzes eigenes Label.
3. Beheben Sie es in der Filterleiste oder Formularkomponente, nicht Seite für Seite.

<!-- Vorher: der Text steht neben der Liste, ist aber nicht verbunden -->
<span class="sort-bar__label">Sortieren nach</span>
<select class="sort-bar__select" name="sortierung">
  <option value="relevanz">Relevanz</option>
  <option value="preis-auf">Preis aufsteigend</option>
  <option value="neu">Neueste zuerst</option>
</select>

<!-- Nachher: das Label ist über for und id mit der Liste verbunden -->
<label class="sort-bar__label" for="sortierung">Sortieren nach</label>
<select class="sort-bar__select" id="sortierung" name="sortierung">
  <option value="relevanz">Relevanz</option>
  <option value="preis-auf">Preis aufsteigend</option>
  <option value="neu">Neueste zuerst</option>
</select>

Drei Listen unter einer Frage bekommen ein Fieldset, und jede Liste trotzdem einen Namen:

<fieldset class="geburtsdatum">
  <legend>Geburtsdatum</legend>
  <label for="geb-tag">Tag</label>
  <select id="geb-tag" name="geb-tag"><option>1</option><option>2</option></select>
  <label for="geb-monat">Monat</label>
  <select id="geb-monat" name="geb-monat"><option>Januar</option><option>Februar</option></select>
  <label for="geb-jahr">Jahr</label>
  <select id="geb-jahr" name="geb-jahr"><option>1990</option><option>1991</option></select>
</fieldset>

So prüfen Sie es von Hand

1. Klicken Sie auf den Text neben jeder Auswahlliste. Bekommt die Liste keinen Fokus, sind die beiden nicht verbunden.
2. Wählen Sie die Liste im Barrierefreiheits-Inspektor Ihres Browsers (Chrome, Edge, Firefox): Der „Name“ sollte dem sichtbaren Text entsprechen, nicht der gewählten Option.
3. Gehen Sie mit einem Screenreader (NVDA unter Windows, VoiceOver unter macOS) per Tab zu jeder Liste: Hören Sie, was ausgewählt wird, und nicht nur den aktuellen Wert?
4. Prüfen Sie, ob die Beschriftung etwas aussagt: „Bitte wählen“ benennt nichts.

Zugehöriges WCAG-Kriterium

Die Regel ist drei Kriterien zugeordnet, und eine Auswahlliste ohne Namen berührt meist alle drei: 1.3.1 Info und Beziehungen, weil die Verbindung zwischen sichtbarem Text und Liste im Code fehlt; 3.3.2 Beschriftungen oder Anweisungen, weil niemandem gesagt wird, was zu wählen ist; und 4.1.2 Name, Rolle, Wert, weil das Bedienelement keinen Namen hat. Alle drei sind Stufe A. Verwandt: 2.5.3 Beschriftung im Namen – der Name im Code muss die Wörter der sichtbaren Beschriftung enthalten.

So meldet Reviseberg diese Regel

Reviseberg führt select-name auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterien und Stufe, der Zahl der betroffenen Auswahllisten und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und alle betroffenen Seiten. Eine Sortierleiste auf jeder Kategorieseite ist eine einzige Komponente – ein Fix behebt sie überall.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 1.3.1, 3.3.2 oder 4.1.2 nie als bestanden: Ob die Beschriftungen das Richtige sagen, prüft ein Mensch und hält es als manuelles Ergebnis fest.

Verwandte Regeln

• undefined – dasselbe Problem bei Textfeldern, Checkboxen und Radiobuttons.
• undefined – eigene Auswahllisten mit role="combobox" oder role="listbox" ohne Namen.
• undefined – bei einer Länderliste muss autocomplete="country-name" ein gültiger Wert sein.

Alle Auswahllisten Ihrer Website prüfen – kostenloser Scan