Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Name ist Pflicht veröffentlicht in 2013

title-Attribut als Rettungsanker

Im barrierefreien Webdesign gilt, dass jedes Steuerelement eine Beschriftung mit LABEL benötigt. Allerdings gibt es eine Ausnahme für Intern: Buttons. Darüber hinaus gibt es einige weitere Situationen, in denen eine Beschriftung für ein Steuerelement nicht mit einem LABEL-Element vergeben werden kann, z.B. weil es nur eine Beschriftung gibt und diese mehreren Steuerelementen zugewiesen werden müsste. Beispiele für solche Situationen sind mehrteilige Eingabefelder für eine Eingabe eines Datums oder einer Telefonnummer.

Eingabefelder für Datumsfelder, wobei es einen Tooltip beim Monat gibt

Alternativ zu einem LABEL-Element können Steuerelemente auch mit einem title-Attribut bezeichnet werden. Damit erhalten die Steuerelemente einen Intern: Namen. In diesem Beispiel wird das erste Feld mit dem LABEL und die anderen Felder mit title-Attributen bezeichnet:

<p>
<label for="datum1">Datum<span class="unsichtbar"> (tt.mm.jjjj)</span>:</label>
  <input id="datum1" type="text" maxlength="2" name="tag" /> -
  <input title="monat" type="text" maxlength="2" name="monat" /> -
  <input title="Jahr" type="text" maxlength="4" name="jahr" />
</p>

Hinweis: Es ist ratsam, entweder nur title oder nur LABEL für die Beschriftung eines Steuerelements zu nutzen. Wenn beide Techniken zur Beschriftung genutzt werden, sollte zwar nur das LABEL-Element im Screenreader ausgegeben werden, aber in manchen Browser-Screenreader-Kombinationen werden dann beide Texte oder doch nur der Inhalt des title-Attributs ausgegeben.

Es gibt weitere Beispiele, in denen Beschriftungen nicht mit allen Steuerelementen verknüpft werden können. In einer Umfrage-Tabelle mit vielen Radio-Buttons können beispielsweise die Beschriftungen der obersten Reihe und der linken Spalte ebenfalls den dazugehörigen Steuerelementen nicht zugewiesen werden. Die Beschriftung "Sehr zufrieden" in der ersten Reihe müsste gleich mehreren Radio-Buttons zugewiesen werden können, was mit dem for-Attribut gar nicht geht:

Tabellendarstellung von Auswahlschaltern, die jeweils im Spaltenkopf und im Reihenkopf eine Beschriftung zugeordnet werden können

In solchen Situationen muss das title-Attribut zum Einsatz kommen. Wichtig dabei ist, dass das title-Attribut in Screenreadern meist Extern, englischsprachig: nur dann ausgewertet wird, wenn kein LABEL-Element vorhanden ist. Außerdem sind title-Attribute im Allgemeinen nicht Intern: geräteunabhängig und für Tastaturnutzer nicht zugänglich; allerdings ist es in diesem Beispiel nicht notwendig, dass sehende Tastaturnutzer Zugriff auf die title-Attribute bekommen, wenn genau das drin steht, was im Spalten- und Reihenkopf zu sehen ist.

Damit also beispielsweise die ersten beiden Radio-Buttons auch für Screenreader barrierefrei werden, können die Beschriftungen wie folgt vergeben werden:

<td>
  <input title="Preis sehr zufrieden" type="radio" name="preis" value="1" />
</td>
<td>
  <input title="Preis zwischen zufrieden und sehr zufrieden" type="radio" name="preis" value="2" />
</td>

Nach den Web Content Accessibility Guidelines (WCAG) 2.0 muss es für jedes Steuerelement eine Beschriftung oder eine Anweisung geben, womit eine visuell erkennbare Beschreibung des Steuerelements gemeint ist. In den beiden dargestellten Beispielen ist dies im Prinzip gegeben, auch wenn die Beschriftungen im zweiten Beispiel nicht vollständig aufgeführt werden; ob Intern: Erfolgskriterium 3.3.2 im zweiten Beispiel erfüllt ist, hängt davon ab, ob es vor der Tabelle eine entsprechende Anweisung gibt (im Screenshot nicht erkennbar).

Das title-Attribut wird verwendet, um den Steuerelementen durch Software feststellbare Namen zu geben. Dennoch: Die Technik mit dem title-Attribut sollte nur in Ausnahmefällen genutzt werden. Wenn immer möglich, ist das LABEL-Element vorzuziehen.