Name ist Pflicht veröffentlicht in 2013
Jedes Steuerelement benötigt eine für Nutzer verständliche Bezeichnung. Im Screendesign erhalten dabei die meisten Steuerelemente eine Beschriftung. Während solche Beschriftungen am Bildschirm meist gut mit dem dazugehörigen Steuerelement visuell in Beziehung stehen, kann eine Software wie ein Screenreader die Zusammengehörigkeit beider Inhalte nicht eindeutig herstellen. Die Beschriftung muss dem Steuerelement explizit zugewiesen werden, damit Software den Namen des Steuerelements feststellen kann.
Erfordernis nach LABEL
Für die Bezeichnung von Steuerelementen mit Namen gibt es unterschiedliche Techniken. Während Schaltflächen ihre Beschriftung quasi mit sich bringen (sollten), wird für Eingabefelder, Auswahllisten, Radio-Buttons oder Checkboxen ein Text vor oder nach dem Steuerelement platziert. Im Allgemeinen muss dieser Text mit LABEL
ausgezeichnet werden und mit dem for
-Attribut mit dem Steuerelement verknüpft werden. Dabei muss der Wert des for
-Attributs mit dem Wert für id
des Steuerelements identisch sein:
<p>
<label for="vorname">Vorname:</label>
<input type="text" name="vorname" id="vorname" />
</p>
Die Steuerelemente, die eine zusätzliche Beschriftung benötigen, sind:
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
<input type="password" />
<textarea> </textarea>
<select> </select>
Buttons benötigen kein LABEL
Schaltflächen benötigen keine zusätzliche Beschriftung, denn Schaltflächen besitzen einen Namen bzw. textlichen Inhalt. Dabei geht es nicht um das name
-Attribut, sondern um den Namen, wie er im Glossar der Web Content Accessibility Guidelines (WCAG) 2.0 definiert ist; es geht um die Bezeichnung eines Steuerelements, die von Software genutzt wird, um das Steuerelement für Menschen zu identifizieren.
value
für INPUT
Für einfache Schaltflächen wird der Name mit dem value
-Attribut festgelegt:
<p>
<input type="submit" value="Jetzt abschicken" />
</p>
bzw. für die Schaltfläche zum Zurücksetzen eines Formulars:
<p>
<input type="reset" value="Alles wieder löschen" />
</p>
alt
für INPUT
Sollten grafische Buttons eingesetzt werden, dann wird das alt
-Attribut für die Bezeichnung benötigt:
<p>
<input type="image" alt="Jetzt abschicken" />
</p>
Text für BUTTON
Wenn statt INPUT
das BUTTON
-Element eingesetzt wird, dann wird der Inhalt des Elements zur Beschriftung. Das kann im einfachen Fall ein Text sein:
<p>
<button type="submit">
Jetzt abschicken
</button>
</p>
Wenn Grafiken im BUTTON-Element verwendet werden, dann muss die Grafik auch einen Alternativtext besitzen:
<p>
<button type="submit">
<img src="fertig.png" alt="Jetzt abschicken" />
</button>
</p>
Bei BUTTON
-Elementen ist zu beachten, dass der komplette Text einschließlich der Alternativtexte von Grafiken der Bezeichnung der Schaltfläche dient. Stehen im BUTTON
-Element Grafik und Text, wird der Name aus dem Alternativtext und Text zusammengesetzt. Damit es nicht zu exzessiv langen Namen für Schaltflächen kommt, kann es nutzerfreundlicher sein, wenn die Grafik einen leeren Alternativtext erhält oder wenn die Grafik per CSS eingebunden wird.
Der Beitrag "Name ist Pflicht" besteht aus folgenden einzelnen Webseiten:
- Beschriftung mit
LABEL
Sichtbare Beschriftungen für Steuerelemente müssen mit dem
LABEL
-Element mit dem dazugehörigen Steuerelement explizit verknüpft werden.title
-Attribut als RettungsankerDie Beschriftung von Steuerelementen mit dem
title
-Attribut sollte nur in Ausnahmefällen vorgenommen werden.- Beschriftungen nur für Screenreader
Wenn auf sichtbare Beschriftungen für Steuerelemente verzichtet wird, gibt es weitere Techniken, die eine Beschriftung zumindest für Screenreadernutzer berücksichtigen.
- Vorbelegung von Eingabefeldern
Wenn in einem Formular Hinweise für den Nutzer bereitgestellt werden, dann sollten sie immer zugänglich sein. Die
value
- undplaceholder
-Attribute sind für solche Hinweise meist nicht geeignet.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Name