Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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:

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.