form-control-programmatic-label-quality
Formularsteuerelemente sollten eine auf dem Bildschirm angezeigte Beschriftung haben
Markiert Formularsteuerelemente, deren zugänglicher Name aus placeholder, title, aria-label oder einem aria-labelledby stammt, das nur auf verborgenen Text verweist; nichts davon ist eine auf dem Bildschirm angezeigte Beschriftung. Verwenden Sie besser ein sichtbares <label> oder ein aria-labelledby, das auf sichtbaren Text verweist.
Anwendbarkeit. Gilt für beschriftbare native Formularsteuerelemente, die assistiven Technologien bereitgestellt werden:
- input (außer type=hidden|submit|reset|button|image)
- select
- textarea
role="presentation"/"none" werden nur ausgeschlossen, wenn sie nicht fokussierbar sind. Ein Steuerelement, das nicht auf dem Bildschirm dargestellt wird, ist ausgeschlossen: transparent (opacity 0, eigene oder die eines Vorfahren) oder weggeschnitten (wie visuell verborgener Text), wie etwa eine Checkbox, die hinter einem gestalteten Umschalter verborgen ist. Es hat keine sichtbare Beschriftung, die sich beurteilen ließe; sein sichtbarer Stellvertreter schon. Nur Steuerelemente mit einem programmatischen Namen zählen: Eines ohne Namen ist ein Befund von form-control-programmatic-label-present, keine Frage danach, wie gut sein Name ist.
Erwartung. Hat ein Steuerelement einen programmatischen Namen, sollte dieser nicht AUSSCHLIESSLICH stammen aus:
- placeholder (nicht leer)
- title (nicht leer)
- aria-label
- aria-labelledby, dessen referenzierte Elemente allesamt nicht gerendert werden (hidden, display:none, visibility:hidden)
Verwenden Sie besser ein zugeordnetes <label> oder ein aria-labelledby, das auf sichtbaren Text verweist.
Was ein Befund meldet.
labelMethod: woher das Label des Bedienelements stammt:placeholder,title,aria-labeloderaria-labelledby.reasonCode:label_from_placeholder_primary,label_from_title_primary,label_from_aria_label_onlyoderlabel_from_hidden_labelledby.sourceText: der Labeltext, bis zu 120 Zeichen.
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 for="email">Email address</label><input type="text" id="email" placeholder="name@example.com">
Ein dauerhaftes <label> liefert den Namen; placeholder ist hier nur ein Hinweis zum Format.
<input type="text" placeholder="Email address">
Der einzige Name des Steuerelements stammt aus placeholder, das verschwindet, sobald die Eingabe beginnt.
<input type="text" title="Name">
Der einzige Name des Steuerelements stammt aus title, das nur beim Überfahren mit der Maus angezeigt wird. Wie placeholder gibt auch title dem Steuerelement einen Namen, daher ist WCAG 4.1.2 erfüllt; was fehlt, ist eine Beschriftung, die allen angezeigt wird, und das betrifft SC 3.3.2.
<input type="search" aria-label="Search">
Der einzige Name des Steuerelements stammt aus aria-label, das nie auf dem Bildschirm angezeigt wird. Sichtbarer Text neben dem Feld, etwa ein Such-Button, kann sehenden Personen trotzdem zeigen, wofür es da ist; das verlangt daher einen prüfenden Blick statt eines fail.
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.
label_from_aria_label_only
- Suchen Sie das im Bericht genannte Feld auf dem Bildschirm und lesen Sie sein aria-label, das der Bericht angibt.
- Suchen Sie neben dem Feld angezeigten Text (ein sichtbares Label, eine Überschrift oder eine Legende), der sagt, was einzugeben ist.
Bestanden. Neben dem Feld angezeigter Text oder ein Symbol mit eindeutiger Bedeutung, etwa eine Lupe an einem Suchfeld, sagt, was einzugeben ist.
Nicht bestanden. Nichts auf dem Bildschirm sagt, was in das Feld einzugeben ist; das verstößt gegen WCAG 3.3.2.
label_from_hidden_labelledby
- Suchen Sie das im Bericht genannte Feld und folgen Sie in den Entwicklertools seinen aria-labelledby-IDs zu den Elementen, auf die sie verweisen.
- Prüfen Sie, ob diese Elemente auf dem Bildschirm angezeigt werden, wenn das Feld angezeigt wird.
- Suchen Sie nach anderem Text neben dem Feld, der sagt, was einzugeben ist. Eine Schaltfläche direkt nach dem Feld, die sagt, was sie tut, etwa „Suchen“ nach einem Suchfeld, zählt ebenfalls.
Bestanden. Der beschriftende Text wird mit dem Feld angezeigt, oder anderer Text daneben oder eine Schaltfläche direkt danach wie „Suchen“ sagt, was einzugeben ist.
Nicht bestanden. Das Label steht nur in verborgenen Elementen, und nichts auf dem Bildschirm sagt, was einzugeben ist; das verstößt gegen WCAG 3.3.2.
label_from_placeholder_primary
- Suchen Sie das im Bericht genannte Feld und lesen Sie seinen Platzhalter.
- Geben Sie etwas in das Feld ein.
- Prüfen Sie, ob noch etwas auf dem Bildschirm sagt, wofür das Feld da ist: eine Beschriftung oder Text daneben. Eine Schaltfläche direkt nach dem Feld, die sagt, was sie tut, etwa „Suchen“ nach einem Suchfeld, zählt ebenfalls.
Bestanden. Eine Beschriftung, Text neben dem Feld oder eine Schaltfläche direkt danach wie „Suchen“ bleibt nach dem Ausfüllen sichtbar und sagt, was einzugeben ist.
Nicht bestanden. Sobald das Feld ausgefüllt ist, sagt nichts auf dem Bildschirm, wofür es ist; das verstößt gegen WCAG 3.3.2.
label_from_title_primary
- Betrachten Sie das im Bericht genannte Feld, ohne mit dem Zeiger darüberzufahren.
- Suchen Sie nach Text daneben, der sagt, was einzugeben ist. Eine Schaltfläche direkt nach dem Feld, die sagt, was sie tut, etwa „Suchen“ nach einem Suchfeld, zählt ebenfalls.
- Springen Sie mit der Tastatur per Tab zum Feld und beachten Sie, dass der title-Tooltip nicht erscheint.
Bestanden. Ohne Darüberfahren sagt Text neben dem Feld oder eine Schaltfläche direkt danach wie „Suchen“, was einzugeben ist.
Nicht bestanden. Was einzugeben ist, sagt nur der title, der beim Überfahren mit der Maus erscheint, sodass Nutzende von Tastatur und Touch ihn nie sehen; das verstößt gegen WCAG 3.3.2.