HTML- und XHTML-Steuerelemente, die sichtbare Label benutzen
Dieser Fehler bezieht sich auf:
Dieser Fehler beschreibt ein Problem, das auftritt, wenn kein Label-Element benutzt wird, um ein Formular-Steuerelement explizit mit einem Label zu verbinden und wo das visuelle Design ein Label benutzt.
Anmerkung 1:Elemente, die explizit verbundene Label benutzen, sind:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
Anmerkung 2:Das labelElement wird nicht für folgendes benutzt, da Label für diese Elemente über das value-Attribut (bei Absenden- und Zurücksetzen-Schaltflächen), das alt-Attribut (für Bild-Schaltflächen) oder über Inhalte des Elements selber (Schaltfläche) zur Verfügung gestellt werden.
Absenden- und Zurücksetzen-Schaltflächen (input type="submit" oder input type="reset")
Bild-Schaltflächen (input type="image")
Versteckte Eingabefelder (input type="hidden")
Skript-Schaltflächen (button-Elemente oder <input type="button">)
Das folgende Beispiel zeigt ein Formular, das Label für Formular-Steuerelemente visuell anzeigt, das label-Element aber nicht benutzt, um diese mit ihren Steuerelementen zu verbinden. Das unten stehende Code-Beispiel ist ein Fehler, weil assistierende Techniken möglicherweise nicht in der Lage sind zu bestimmen, welches label zu welchem Steuerelement gehört.
Code-Beispiel:
<form>
First name:
<input type="text" name="firstname">
<br />
Last name:
<input type="text" name="lastname">
<br />
I have a dog <input type="checkbox" name="pet" value="dog" />
I have a cat <input type="checkbox" name="pet" value="cat" />
</form>In den folgenden Code-Beispielen werden die Namen, die mit den Texteingabe-Steuerelementen verbunden sind, von assistierenden Techniken nicht korrekt bestimmt.
Code-Beispiel:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
<label>
<input type="text" name="lastname">
Last Name
</label>
</p>
</form>Code-Beispiel:
<form action="..." method="post">
<p>
<label>First Name </label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>Die Such-Textbox hat im folgenden Beispiel keinen Namen. Der Name kann entweder mit dem title-Attribut oder mit einem per CSS versteckten label-Element bereitgestellt werden.
Code-Beispiel:
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">Für alle input-Elemente des Typs radio, checkbox, text, file oder password, für alle textareas und für alle select-Elemente auf der Webseite:
Prüfen Sie, ob das visuelle Design ein Text-Label benutzt, das den Zweck des Steuerelements kennzeichnet
Prüfen Sie, ob ein label-Element den Text mit allen input-Elementen des Typs „radio“, „checkbox“, „text“, „file“ oder „password“, mit allen textareaElementen und mit allen select-Elementen verknüpft
Wenn Tests #1 wahr ist und Test #2 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert am Erfolgskriterium.