Vermeiden Sie Labels für nicht beschriftbare Steuerelemente

Silktide überprüft Formular-Labels, die per ID auf ein anderes Element verweisen, und meldet Labels, die auf Elemente zielen, die keines haben sollten – Schaltflächen, schaltflächenähnliche Eingaben und Elemente, die überhaupt kein Label annehmen können. Diese Elemente werden von ihrem eigenen Text oder Wert benannt, und ein separates Label erzeugt widersprüchliche Namen.

In HTML benennt ein <label> ein Formularfeld über sein for-Attribut. Einige Steuerelemente tragen jedoch ihren Namen bereits in sich: Der Name einer Schaltfläche ist ihr Text, und der Name eines Submit-Eingabefelds ist sein value. Andere Elemente, wie ein schlichtes <div> oder ein verstecktes Eingabefeld, können auf diese Weise überhaupt nicht beschriftet werden.

<!-- Problem: Die Schaltfläche zeigt bereits \"Speichern\" an; das Label konkurriert damit -->
<label for=\"save\">Speichern</label>
<button id=\"save\">Speichern</button>

Warum das wichtig ist

Wenn ein Steuerelement zwei Namensquellen hat – seinen eigenen Text und ein darauf verweisendes Label –, lösen unterschiedliche Browser und Screenreader den Konflikt unterschiedlich. Das Steuerelement kann doppelt angesagt werden, mit falschem Text angekündigt werden oder sich unerwartet verhalten, wenn auf das Label geklickt wird. Das Entfernen des redundanten Labels stellt sicher, dass alle Besucher genau das hören, was das Steuerelement sagt.

So beheben Sie das Problem

1. Bei Schaltflächen und schaltflächenähnlichen Eingabefeldern entfernen Sie das <label> und verlassen Sie sich auf den eigenen Text bzw. den value des Steuerelements:

<!-- Behoben: Die Schaltfläche benennt sich selbst -->
<button id=\"save\">Speichern</button>
<input type=\"submit\" value=\"Senden\">

2. Bei einem Label, das auf ein verstecktes Eingabefeld zeigt, entfernen Sie das Label – versteckte Felder werden nie angezeigt oder angesagt und benötigen daher keinen Namen.
3. Wenn Sie ein Nicht-Formular-Element wie ein <div> beschriften wollten, das als benutzerdefiniertes Steuerelement fungiert, verwenden Sie stattdessen ARIA: Geben Sie dem Element aria-labelledby, das auf den Text verweist, der es benennt.

So testet Silktide dies

1. Auf jeder Seite alle <label>-Elemente mit einem for-Attribut finden.
2. Das Element nachschlagen, dessen id übereinstimmt. Labels, die auf IDs verweisen, die nicht existieren, werden hier übersprungen – sie werden stattdessen unter Gültige Label-IDs gemeldet.
3. Das Label melden, wenn sein Ziel eines der folgenden ist:
   • ein <button>-Element,
   • ein <input> mit Typ button, submit, reset, image oder hidden,
   • jedes Element, das kein Label annehmen kann, z. B. ein <div> oder eine Überschrift.
4. Labels, die auf normale Felder zeigen – Texteingaben, <select>, <textarea> und Ähnliches – sind in Ordnung.

Mehr erfahren

• Erklärung zum Erfolgskriterium 1.3.1: Informationen und Beziehungen (WCAG 2.2)
• Technik H44: Verwendung von label-Elementen (WCAG)
• Das label-Element (MDN)
• Feldbeschriftungen