LABEL-Element)
Der Nachteil einer impliziten Bezeichnung für Eingabefelder ist die fehlende logische Verknüpfung zwischen Bezeichnung und Eingabefeld. Das heißt, dass beispielsweise in einer linearisierten Ausgabe nicht unbedingt ersichtlich ist, welche Bezeichnung zu welchem Eingabefeld zugeordnet ist. Deswegen wurde in HTML 4 - und entsprechend auch in ![[intern]](../../lib/img/intern.gif){kind=small}
BITV 12.4 festgehalten - das LABEL-Element mit dem for-Attribut eingeführt, das explizite Bezeichnung eines Formularfeldes erlaubt. Die Verwendung des LABEL-Elements erlaubt es vor allem Screen-Reader-Benutzern die Bezeichnung eines Eingabefeldes direkt vom Eingabefeld aus abzurufen.
Browser-Unterstützung
Ein Nachteil des LABEL-Elements - das geht aus der Einleitung der HTML 4-Spezifikation hervor - ist die Interpretation nur durch moderne Browser. Da aber immer mehr Blinde Standard-Software einsetzen, wird der Anteil derjenigen, die einen echten Nutzen vom LABEL-Element haben, immer größer.
Außerdem, wenn ein Benutzer mit der Maus auf den Text des LABEL-Elements klickt, wird in den meisten Browsern der Systemfokus auf das damit verbundene Eingabefeld gelegt. Dies hilft dem intuitiven Verhalten des Benutzers und bietet eine größere Fläche für den Klick mit dem Mauszeiger.
Für die Nutzung des LABEL-Elements ist die Vergabe einer id für das jeweilige Eingabefeld notwendig. Der Inhalt des id-Attributs des Eingabefelds muss identisch sein mit dem Inhalt des for-Attributs des LABEL-Elements. Der Quelltext:
<form>
<table><tr>
<td><label for="vorname">Vorname:</label></td>
<td><input type="text" id="vorname" /></td>
</tr><tr>
<td><label for="nachname">Nachname:</label></td>
<td><input type="text" id="nachname" /></td>
</tr></table>
</form>
ergibt folgende Darstellung auf einer Webseite:
In diesem Beispiel werden die beiden Eingabefelder mit dem id-Attribut gekennzeichnet, wobei der Wert des Attributs laut W3C-Spezifikationen
accesskey
Setzen Sie das accesskey-Attribut in Formularen ein, dann sollten Sie diese über die LABEL-Elemente vergeben. Diese werden über das id-Attribut mit der Bezeichnung auf die Eingabefelder herangezogen.
Existiert ein LABEL-Element mit einem for-Attribut mit genau demselben Inhalt wie in dem id-Attribut, gibt der Screen-Reader den Inhalt des LABEL-Elements aus, wenn der Benutzer im verknüpften Eingabefeld ist und den entsprechenden Befehl zum Auslesen der Bezeichnung gibt.
Weitere Quelltextbeispiele für die Zuweisung von LABEL in Eingabefeldern (INPUT und TEXTAREA) sowie zu Auswahlmenüs (SELECT) sind:
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" size="28" /><br>
<label for="farbe">Lieblingsfarbe</label>
<select name="farbenliste" id="farbe">
<option>rot</option>
<option>grün</option>
<option>blau</option>
</select><br>
<label for="kennwort">Kennwort</label>
<input type="password" size="12" id="kennwort" /><br><br>
<label for="kommentar">Kommentar:</label><br>
<textarea rows="10" cols="50" id="kommentar"></textarea>
</div>
</form>
Die Beispiele sehen dann wie folgt aus:
Wenn Sie nun mit der Maus auf die Bezeichnung der Eingabefelder, z.B. Lieblingsfarbe, klicken, dann können Sie feststellen, ob Ihr Browser den Systemfokus auf die Auswahlliste legt. Dies dürfte in allen modernen Browsern funktionieren.
Eine Identifizierung für INPUT-Felder der Art submit oder reset erfolgt über das Attribut value und der Art image über das entsprechende alt-Attribut. D.h., das LABEL-Element ist für diese drei zuletzt genannten Varianten des INPUT-Elements überflüssig.
In der BITV-Bedingung 10.2 wird auch mit Priorität I Rücksicht darauf genommen, und für Browser, die diese for- und id-Verknüpfung nicht kennen, empfiehlt es sich, Feldbezeichnungen wie folgt anzubieten:
Der Text vor dem Eingabefeld ("Adresse:") sichert, dass auch ältere Browser eine Bezeichnung für Eingabefelder liefern.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
LABEL-Element)
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
