Jedes Formularelement muss ein sichtbares Label haben und darf nicht ausschließlich mit title oder aria-describedby gekennzeichnet sein
Formular-<input>-Elemente können zusätzliche Informationen über title oder aria-describedby erhalten, aber nicht ausschließlich durch diese Attribute gekennzeichnet sein.
Warum es wichtig ist
Title und aria-describedby sind keine Ersatzlabels, sondern dienen zur Bereitstellung zusätzlicher Hinweise. Hinweise werden von Barrierefreiheits-APIs anders dargestellt als Labels, was zu Problemen mit unterstützenden Technologien führen kann.
Behebung des Problems
Entwickler sollten sicherstellen, dass jedes <input>-Element, das ein Label benötigt, ein sichtbares Label hat und nicht ausschließlich mit den Attributen title oder aria-describedby gekennzeichnet ist.
Gute Codebeispiele
Das Label wird direkt auf das Element angewendet und ist für sehende Benutzer vollständig unsichtbar, aber Screenreader lesen das Label vor.
Wie bei aria-label sollte diese Methode NICHT verwendet werden, es sei denn, es gibt einen zwingenden Grund dafür. Dieses Beispiel ist übermäßig vereinfacht, um zu zeigen, dass aria-labelledby auf technischer Ebene funktioniert. Die Verwendung von aria-labelledby in einem so einfachen Fall ist unangemessen. Ein standardmäßiges <label>-Tag wäre besser.
Explizite Labels
Erstellen Sie eine explizite Zuordnung, indem Sie dem label-Element ein for-Attribut mit demselben Wert wie das id-Attribut des Formularelements geben. Dies stellt eine eindeutige Zuordnung zwischen dem Label und dem Element her. Dies ist der beste Ansatz für die Kennzeichnung, da er von allen modernen Browsern und allen wichtigen unterstützenden Technologien für alle Formularelemente unterstützt wird.
Explizite Labels machen die Zuordnung für unterstützende Technologien eindeutig.
<label for="fname">Vorname:</label> <input type="text" name="fname" id="fname"><br>
<label for="lname">Nachname:</label> <input type="text" name="lname" id="lname">
Kopieren Implizite Labels
Obwohl wir empfehlen, explizite Labels zu erstellen, können Sie eine implizite Zuordnung erstellen, indem Sie das Formularelement innerhalb des label-Elements platzieren. Dieser Ansatz hat eine inkonsistente Unterstützung unter unterstützenden Technologien.
<label>Vorname: <input type="text" name="fname"><br>
<label>Nachname: <input type="text" name="lname"></label>
Kopieren