form-control-single-label
Formularsteuerelemente sollten nicht mehrere Beschriftungen haben
Prüft, dass einem Formularsteuerelement höchstens ein <label> zugeordnet ist (durch Umschließen oder über label[for]).
Anwendbarkeit. Gilt für beschriftbare Formularsteuerelemente (input, außer hidden/submit/reset/button/image; select; textarea).
Erwartung. Dem Steuerelement ist höchstens ein <label> zugeordnet, das zu seinem zugänglichen Namen beitragen kann, so wie HTML das beschriftete Steuerelement (labeled control) definiert: ein <label for="...">, dessen Wert die id des ersten Elements mit dieser id im eigenen Baum des Labels ist, oder ein umschließendes <label> ohne for, dessen erster beschriftbarer Nachfahre das Steuerelement ist (ein Label, das umschließt und zugleich per for auf sich selbst verweist, zählt einmal). Abgestuft danach, ob die überzähligen Labels tatsächlich um den Namen konkurrieren:
- PASS, wenn ein Override (aria-labelledby / aria-label) jedes native <label> ersetzt: Die Labels tragen dann nichts zum Namen bei und können nicht mehrdeutig sein. Eine Abweichung zwischen sichtbarem Label und Name ist Sache von SC 2.5.3 „Beschriftung im Namen“, nicht dieser Regel.
- CANTTELL, wenn zwei oder mehr nicht leere Labels konkurrieren und es keinen Override gibt: Browser fügen ihren Text in DOM-Reihenfolge zu einem Namen zusammen, und nur eine Person kann beurteilen, ob dieser zusammengesetzte Name noch sinnvoll ist („Address Mailing address“) oder wie Rauschen klingt.
- CANTTELL, wenn zu einem nicht leeren Label leere Label-Zuordnungen hinzukommen und es keinen Override gibt: Der Name wird meist zum echten Label aufgelöst, aber der Umgang mit der leeren Zuordnung ist nicht in allen User Agents garantiert.
Sind alle Zuordnungen leer und gibt es keinen Override, ist das ein Fall von fehlendem Namen (die verwandte Regel form-control-programmatic-label-present), keine Mehrdeutigkeit, daher bleibt diese Regel still.
Was ein Befund meldet.
labelCount: wie viele Labels dem Steuerelement zugeordnet sind. Im Fall konkurrierender Labels werden nur die nicht leeren gezählt; im Fall mit leerem Label werden auch die leeren gezählt.contributingLabelCount(der Fall mit leerem Label): wie viele dieser Labels Text haben und dem Steuerelement damit seinen Namen geben.
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<label>Name <input type="text"></label>
Ein einzelnes umschließendes Label; nur ein Beschriftungsmechanismus greift.
<label for="address">Address</label><label for="address">Mailing address</label><input id="address" type="text">
Zwei separate label[for]-Elemente verweisen auf dasselbe Steuerelement. Browser fügen sie zu einem Namen zusammen, „Address Mailing address“, und nur eine Person kann beurteilen, ob er sich noch gut liest.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
FORM_FIELD_EXTRA_EMPTY_LABEL
- Suchen Sie das im Bericht genannte Feld und notieren Sie sein Label mit Text und das leere Label, das ebenfalls darauf verweist.
- Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und prüfen Sie, ob der Name des Feldes der Text des echten Labels ist.
- Springen Sie mit einem Screenreader per Tab zum Feld und hören Sie sich den Namen an.
Bestanden. Der Name des Feldes ist der Text des echten Labels, und durch das leere geht nichts verloren.
Nicht bestanden. Das Feld erhält wegen des leeren Labels keinen oder einen unvollständigen Namen; das verstößt gegen WCAG 3.3.2 (und 4.1.2).
FORM_FIELD_MULTIPLE_LABELS
- Suchen Sie das im Bericht genannte Feld und notieren Sie den Text jedes Labels, das darauf verweist.
- Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und lesen Sie den zugänglichen Namen des Feldes, der alle Labels zusammenfügt.
- Springen Sie mit einem Screenreader per Tab zum Feld und hören Sie sich den Namen an.
- Entscheiden Sie, ob der zusammengefügte Name noch klar sagt, was einzugeben ist.
Bestanden. Der zusammengefügte Name ist klar: Die Labels wiederholen sich, oder das zusätzliche ist nur eine Markierung wie „Pflichtfeld“.
Nicht bestanden. Der zusammengefügte Name ist verwirrend oder irreführend, etwa zwei unzusammenhängende Labels, die ineinanderlaufen; das verstößt gegen WCAG 3.3.2 (und kann gegen 2.5.3 und 4.1.2 verstoßen).