Mit FIELDSET und LEGEND zu beschreibenden Formularbeschriftungen veröffentlicht in 2013

Beschreibende Labels

Jedes Steuerelement benötigt eine beschreibende Beschriftung (Label). Diese Anforderung der Web Content Accessibility Guidelines (WCAG) 2.0 dürfte selbstverständlich sein. Es dürfte ebenfalls selbstverständlich sein, dass jede Beschriftung mit dem dazugehörigen Steuerelement über ein LABEL-Element verknüpft wird. Dennoch gibt es Situationen, in denen eine verknüpfte Beschriftung alleine für die barrierefreie Nutzung nicht ausreicht.

Screenreader und Formular-Beschriftungen

Auch wenn die Beschriftungen (Labels) für Steuerelemente korrekt ausgezeichnet werden so sind nicht alle Steuerelemente beschreibend. Das nachfolgende Beispiel mit einer einfachen Frage und zwei Antwortmöglichkeiten "Ja" und "Nein" zeigt die Problematik:

Am Bildschirm ist der Kontext der beiden Radio-Buttons vermutlich offensichtlich. Nutzer werden die Frage und die beiden Radio-Buttons sehen und wissen, dass die beiden Radio-Buttons als Antwort zur Frage genutzt werden sollen.

In einem Screenreader ist der Zusammenhang zwischen Frage und Antworten nicht unmittelbar gegeben. Damit Formulare in einem Screenreader bedient werden können, muss der Nutzer meist in den Formular- oder Editiermodus des Screenreaders wechseln. Im Formularmodus werden generell nur Steuerelemente (und deren verknüpfte Beschriftungen), Links und andere fokussierbare Inhalte angesteuert. In dem Beispiel wird die Frage im Formularmodus nicht angezeigt. Im Formularmodus sieht der Screenreader-Nutzer lediglich die verknüpften Beschriftungen, also das "Ja" und das "Nein":

Die Beschriftungen sind nicht aussagekräftig

Beschreibungen für Radio-Buttons

Obwohl die Radio-Buttons korrekt mit einer Beschriftung verknüpft sind, so sind die Steuerelemente außerhalb ihres Kontextes (also im Formularmodus eines Screenreaders) nicht beschreibend. Damit die Beschriftung in diesem Beispiel beschreibend wird, muss die Frage mit in die Beschriftung eingebunden werden. Mögliche Lösungen sind:

Die Frage als LABEL auszeichnen

Eine explizite Verknüpfung der Frage mit for und id kommt zwar nicht in Frage, weil die Beschriftung nur mit einem einzigen Steuerelement verknüpft werden kann, aber eine implizite Beschriftung könnte eine Lösung darstellen. Aber: So einfach die Lösung auch ist, sie wird in Screenreadern nicht korrekt aufbereitet.

<p><label>Sind Sie bei uns bereits Kunde?
  <input type="radio" name="kunde" value="kunde" id="kunde1" /> <label for="kunde1">Ja</label>
  <input type="radio" name="kunde" value="neu" id="kunde2" /> <label for="kunde2">Nein</label>
</label></p>

Der Einsatz einer impliziten Beschriftung ist nicht zu empfehlen.

Die Frage als unsichtbaren Text in die Beschriftung aufnehmen

Im den beiden LABEL-Elementen der Radio-Buttons könnte unsichtbarer Text mit einer Wiederholung der Frage eingesetzt werden.

<p>Sind Sie bei uns bereits Kunde?</p>
<p><input type="radio" name="kunde" value="kunde" id="kunde1" /> <label for="kunde1"><span class="unsichtbar">Sind Sie bei uns bereits Kunde?</span> Ja</label></p>
<p><input type="radio" name="kunde" value="neu" id="kunde2" /> <label for="kunde2"><span class="unsichtbar">Sind Sie bei uns bereits Kunde?</span> Nein</label></p>

Diese Technik funktioniert. Allerdings ist diese Lösung aufgrund der redundanten Texte eine Technik, auf die zurückgegriffen werden sollte, wenn andere Techniken nicht implementiert werden können.

Die Frage als Gruppenbeschriftung auszeichnen

Die Frage kann als Gruppenbeschriftung für die beiden Steuerelemente ausgezeichnet werden:

<fieldset>
<legend>Sind Sie bei uns bereits Kunde?</legend>
<p><input type="radio" name="kunde" value="kunde" id="kunde1" /> <label for="kunde1">Ja</label></p>
<p><input type="radio" name="kunde" value="neu" id="kunde2" /> <label for="kunde2">Nein</label></p>
</fieldset>

Screenreader stellen die Inhalte eines LEGEND-Elements jeder in der Gruppe enthaltenen Beschriftung voran. Im Formularmodus eines Screenreaders werden die beiden Steuerelemente wie folgt identifiziert:

Jetzt kann die Frage beantwortet werden

Wenn möglich, sollte diese Technik für die zusätzliche Beschreibung von Radio-Buttons genutzt werden.

Die Steuerelemente mit WAI-ARIA-Attributen verknüpfen mit den relevanten Texten

Es gibt auch einige WAI-ARIA-Techniken, die ähnliche Ergebnisse erzielen. Im folgenden Beispiel wird mit aria-describedby und aria-labelledby gearbeitet:

<p id="beschreibung">Sind Sie bei uns bereits Kunde?</p>
<p><input aria-describedby="beschreibung" type="radio" name="kunde" value="kunde" id="kunde1" /> <label for="kunde1">Ja</label></p>
<p><input type="radio" aria-labelledby="antwort2 beschreibung" name="kunde" value="neu" id="kunde2" /> <label id="antwort2" for="kunde2">Nein</label></p>

Die Lösungen sind leicht unterschiedlich:

• Mit aria-describedby wird der Text des referenzierten Elements der Beschriftung angehängt, hier also "Ja Sind Sie bereits bei uns Kunde?".
• Mit aria-labelledby wird die eigentliche Beschriftung ersetzt, so dass beide Elemente mit dem relevanten Text referenziert werden müssen. Die Beschriftung hier lautet "Nein Sind Sie bereits bei uns Kunde?".

Leider wird WAI-ARIA noch nicht in allen Screenreadern unterstützt, so dass diese Technik erst in der Zukunft empfohlen werden kann.

Überdosis an Beschreibungen

Aus den verschiedenen Lösungsansätzen für nicht beschreibende Beschriftungen von Radio-Buttons ist die Technik mit dem LEGEND-Element für die meisten Webseiten die zweckmäßigste Lösung. Diese Technik wird für die Einbindung von Fragen wie im Beispiel eingesetzt, aber sie kann für diverse andere Situationen nützlich sein wie z.B. die Kennzeichnung von Fehleingaben:

Neben der fehlenden Beschreibung von Steuerelementen gibt es bei der Technik mit LEGEND auch den umgekehrten Fall, nämlich dass zu viel Text ein Steuerelement beschreibt. Im folgenden Beispiel werden längere Texte mit LEGEND ausgezeichnet:

Es muss viel Text im Screenreader gelesen werden

Formal ist die Vorgehensweise der Gruppierung korrekt, denn die einzelnen Fragen und die Fragestellung stehen in Beziehung zueinander. Praktisch ist die Technik aber nicht zu empfehlen. Das Problem dabei ist, dass im Screenreader sämtliche Steuerelemente sehr lange Beschreibungen erhalten und dadurch das Lesen im Formularmodus erschwert wird.

Abgesehen von den redundanten Informationen in diesem Beispiel werden wichtige Anweisungen im Formularmodus des Screenreaders nicht vermittelt. Zu nennen ist vor allem die Kennzeichnung von Pflichtfeldern bei den Radio-Buttons , weil die Kennzeichnung in der nicht zur Beschriftung gehörenden Frage steht.

Wenn FIELDSET und LEGEND eingesetzt werden, sollte immer bedacht werden, dass die Gruppenbeschreibung (LEGEND) der eigentlichen Beschriftung des Steuerelements vorangestellt wird. Der Text im LEGEND-Element sollte beschreibend, aber möglichst kurz und prägnant sein. In diesem Beispiel wären die Texte im LEGEND-Element besser als beschreibende Überschriftentexte ausgezeichnet gewesen.