| Titel der Regel | Verknüpfung einer (sichtbaren) Formularbeschriftung mit dem Formularelement durch ein <label> und ein for-Attribut |
|---|---|
| Beschreibung | Wenn ein Formularelement durch sichtbaren Text beschriftet wird und das Formularelement kein Kindelement der Beschriftung (<label>) ist, dann muss die Beschriftung per for-Attribut mit dem Formularelement verknüpft werden. Das Formularelement erhält dadurch seinen Namen. |
| Typ | atomic |
| Eingabeaspekte |
|
| Anforderungen |
|
| Anwendbarkeit | Die Regel ist für Beschriftungen von Formularelementen anwendbar, sofern es sich um die einzige Beschriftung für das Formularelement handelt. |
| Erwartungen | Die Beschriftung wird mit <label> ausgezeichnet, wobei das Element ein for-Attribut besitzt. Das beschriftete Formularelement besitzt ein id-Attribut. Der Wert des for-Attributs und der Wert des id-Attributs sind identisch. Dadurch kann per Maus auf die Beschriftung geklickt werden und der Fokus wird auf das Formularelement gesetzt. Außerdem wird dadurch die Beschriftung auch zum Namen des Formularelements. Die Regel muss von der impliziten Beschriftung für Formularelemente abgegrenzt werden. |
| Annahmen | Der Name des Steuerelements wird nicht mit aria-label oder aria-labelledby überschrieben. Wenn aria-label oder aria-labelledby zur Bezeichnung des Formularelements genutzt werden, dann steht die Beschriftung 1:1 im Namen (Erfolgskriterium 2.5.1). Das <label> Element sowie die Formularelemente haben kein Elternelement mit aria-hidden="true". Das <label> Element wird nur für beschriftbare Formularelemente eingesetzt. Diese sind <input> (außer type="hidden"), <button>, <select>, <textarea>, <output>, <meter> und <progress>. Das <label> Element enthält keine Links (da ein Klick nicht zum Fokussieren des Formularelements führt). |
| Zugänglichkeitsunterstützend | - |
| Beispiele | - |
| Änderungen | - |
| Glossar | - |
| Probleme (optional) | - |
| Hintergrund (optional) | - |
| Danksagung (optional) | - |