form-control-programmatic-label-present

Formularsteuerelemente müssen eine programmatische Beschriftung haben

automaticWCAG 1.3.1, 3.3.2, 4.1.2 (A)Konfidenz: mediumSchweregrad: seriousrobust

Prüft, dass Formularsteuerelemente über <label>, aria-label, aria-labelledby, title oder placeholder eine programmatische Beschriftung haben.

Anwendbarkeit. Gilt für <input>-, <select>- und <textarea>-Elemente im Accessibility Tree, außer den input-Typen hidden, submit, reset, button und image, die ihren Namen aus einem value- oder alt-Attribut beziehen statt aus einer Beschriftung. Ein Steuerelement, dessen role-Attribut (erstes Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung) zu einer expliziten ARIA-Widget-Rolle aufgelöst wird, liegt außerhalb des Geltungsbereichs – button, checkbox, combobox, listbox, textbox, slider und die übrigen Einträge von ROLE_OWNED_ELSEWHERE haben jeweils eine eigene Benennungsregel –, und role="presentation"/"none" nimmt ein Steuerelement heraus, sofern es nicht weiterhin per Tab erreichbar ist.

Erwartung. Jedes anwendbare Steuerelement hat eine programmatische Beschriftung über einen der Mechanismen, die helpers.getLabelMethod in seiner Prioritätsreihenfolge auflöst: ein zugeordnetes <label>, aria-labelledby, aria-label, title, dann placeholder. Jeder der fünf erfüllt diese Regel. Ob die beiden schwächeren als primäre Beschriftung angemessen sind, ist eine eigene Frage, die form-control-programmatic-label-quality stellt.

Beispiele

pass
<label for="email">Full name</label>
<input id="email" type="text">

Die <label for>-Zuordnung gibt dem Input eine programmatische Beschriftung.

fail
<input type="text">

Kein <label>, kein aria-label und kein aria-labelledby – nichts benennt das Feld programmatisch.

Verwandte Regeln

Quellcode ansehen