form-control-label-quality
Beschriftungen von Formularfeldern sollten aussagekräftig und unterscheidbar sein
Markiert eine sichtbare Beschriftung eines Formularfelds, die ein Platzhalter ist („Label“, „Field“) oder die Beschriftung eines anderen Felds wiederholt, ohne dass ein sichtbarer Kontext (Überschrift, Legende oder Zeile) die beiden unterscheidet. Englische Platzhalter werden immer erkannt, deutsche, spanische, französische oder japanische, wenn das Feld in dieser Sprache ist.
Anwendbarkeit. Sichtbare Formularfelder: native input (außer hidden und den button-artigen Typen), select, textarea oder ein Element mit einer der in ACT cc0f0a aufgeführten ARIA-Widget-Rollen (checkbox, combobox, listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox; das erste echte Rollen-Token des role-Attributs, ohne Berücksichtigung der Groß-/Kleinschreibung), die eine sichtbare programmatische Beschriftung haben: eine <label>-Zuordnung oder die Elemente, auf die aria-labelledby verweist. Ein Feld, das nur über aria-label/title benannt ist, hat keine sichtbare Beschriftung, die sich beurteilen ließe, und liegt hier außerhalb des Geltungsbereichs (sein Beschriftungsmechanismus ist Sache von form-control-programmatic-label-quality, sein Vorhandensein Sache von form-control-programmatic-label-present). Ein Custom Element, dem seine ElementInternals eine dieser Rollen geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle. Findet sie nichts nachzufragen, meldet sie notApplicable, nicht pass: Sie gilt nur für das, was ihre Prüfung markiert, und dort nichts zu finden zeigt nicht, dass alles in Ordnung ist.
Erwartung. Der sichtbare Beschriftungstext (a) ist kein im Markup vergessener Platzhalter („label“, „field“, „enter text“, ...), (b) wird nicht mit einem anderen Feld geteilt, das kein sichtbarer Kontext davon unterscheidet (zweimal dasselbe „Name“, ohne dass auf dem Bildschirm sichtbar ist, welches zur Lieferadresse und welches zur Rechnungsadresse gehört), und (c) ist die vollständige programmatische Beschriftung des Felds, nicht der sichtbare Teil einer Beschriftung, deren beschreibender Teil verborgen ist.
Was ein Befund meldet.
label: der sichtbare Labeltext des Felds.sharedWith: wie viele andere Felder dasselbe Label haben, ohne dass etwas Sichtbares sie unterscheidet, als Anzahl. 0, wenn kein anderes Feld es teilt.hiddenLabelParts: wie viele Teile des Labels des Felds nicht sichtbar sind, als Anzahl. 0, wenn das ganze Label sichtbar ist.
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>Label <input type="text" name="f1"></label>
Der Beschriftungstext ist das Platzhalterwort „Label“ selbst, keine echte Beschreibung des Felds.
<label for="e">Email address:</label><input id="e" type="text">
Der Beschriftungstext ist ein echter, aussagekräftiger Name für das Feld.
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.
DUPLICATE_LABEL_TEXT
- Suchen Sie das im Bericht genannte Feld und die anderen Felder mit derselben sichtbaren Beschriftung.
- Sehen Sie sich den Bildschirm um jedes Feld herum an: eine Legende, eine Überschrift, Zeilentext oder Text in der Nähe, der sagt, welches welches ist.
- Entscheiden Sie, ob die Felder dasselbe abfragen (ein wiederholtes Suchfeld) oder Unterschiedliches (Name für Lieferung und für Rechnung).
Bestanden. Die Felder dienen demselben Zweck, oder etwas Sichtbares neben jedem Feld macht klar, welches welches ist.
Nicht bestanden. Unterschiedliche Felder teilen sich eine Beschriftung und nichts Sichtbares unterscheidet sie, sodass Nutzende nicht erkennen, welches auszufüllen ist; das verstößt gegen WCAG 2.4.6 (G131).
PARTIALLY_HIDDEN_LABEL
- Suchen Sie das im Bericht genannte Feld und lesen Sie seine sichtbare Beschriftung auf dem Bildschirm.
- Untersuchen Sie das Feld im Bereich „Barrierefreiheit“ und lesen Sie seinen vollständigen berechneten Namen, einschließlich der verborgenen Teile.
- Sehen Sie sich an, was rund um das Feld sichtbar ist, etwa ein Gruppentitel, eine Überschrift oder die Zeile oder Spalte, in der es steht, die dem verborgenen Teil seine Bedeutung geben kann.
- Fragen Sie sich, ob die sichtbare Beschriftung zusammen mit dem, was rundherum sichtbar ist, sehenden Nutzern sagt, was einzugeben oder zu wählen ist.
Bestanden. Der sichtbare Teil der Beschriftung beschreibt das Feld, allein oder mit dem, was rundherum sichtbar ist; der verborgene Teil ergänzt nur Details.
Nicht bestanden. Weder der sichtbare Teil der Beschriftung noch etwas rundherum Sichtbares kennzeichnet das Feld ohne den verborgenen Teil (etwa wird nur „Los“ angezeigt); das verstößt gegen WCAG 2.4.6 (ACT cc0f0a).
PLACEHOLDER_LABEL_TEXT
- Suchen Sie das im Bericht genannte Feld und lesen Sie seine sichtbare Beschriftung.
- Ermitteln Sie anhand der Seite, wofür das Feld da ist.
- Entscheiden Sie, ob die Beschriftung das sagt oder ein Vorlagentext wie „Label“, „Feld“ oder „Text eingeben“ ist.
Bestanden. Die Beschriftung ist ein echter Name für das, was das Feld in diesem Kontext abfragt (zum Beispiel „Wert“ in einem Schlüssel-Wert-Editor).
Nicht bestanden. Die Beschriftung ist Platzhaltertext, der nicht sagt, wofür das Feld da ist; das verstößt gegen WCAG 2.4.6 (G131).