accessCast

Am Mikrofon heute Manfred »majo« Heinze, Links zum Draufrumklicken gibt's wie immer in der Mitschrift.

Schnelltest auf Barrieren: das Label-Element

Neben dem Alternativ-Attribut für Bilder ist das Label-Element in Formularen eine wirklich simple Sache: mit seinem Einsatz kann man vielen Nutzern ohne großen Aufwand sehr viel gutes tun. Auch für die Tester bei der BIENE eignen sich diese Elemente hervorragend, um sich einen ersten Blick über die Ernsthaftigkeit der Anstrengungen einer Einreichung zu verschaffen.

Ob alt-Attribute überhaupt verwendet werden oder nicht lässt sich maschinell mit Hilfe eines Validators feststellen - seit HTML 4 ist dies Pflichtprogramm (die Sinnhaftigkeit der Alternativtexte ist natürlich ein anderes Thema). Um alternative Texte für nicht-textliche Inhalte kümmern wir uns in einer späteren Folge, heute schauen wir uns mal das label-Attribut etwas näher an.

Im Prüfverfahren der BIENE 2006 steht:

15. Es gibt eine eindeutige Zuordnungsmöglichkeit von Beschriftungen zu den Kontrollelementen (z. B. Radio-Buttons) und zu Formulareingabefeldern.

15.1 Vergrößerte Ansicht: Zuordnung von Beschriftungen zu den Kontrollelementen und Eingabefeldern in Formularen

Prüfen Sie in vergrößerter Ansicht, ob eine eindeutige Zuordnung von Beschriftungen zu den Kontrollelementen und Eingabefeldern möglich ist.

15.2 Verwendung von LABEL bei Kontroll- und Eingabefeldern in Formularen

Prüfen Sie, ob die Zuordnung von Beschriftungen zu den Eingabefeldern und Kontrollelementen mit LABEL umgesetzt ist.

Label – was ist das?

Das englische Wort Label steht für Etikett und bezeichnet ein (Text-)Element, mit dem man Kontrollelementen in Formularen eine Beschriftung verpassen kann. Kontroll- oder Bedienelemente wiederum sind die Dinge in Formularen, mit denen der Benutzer interagiert, Auswahlen trifft oder Eingaben macht – also Textfelder, sogenannte radio buttons und checkboxes, Select-Boxen und einiges mehr.

Diese Etiketten lassen sich nun auf zwei verschiedene Arten mit ihren Bedienelementen verknüpfen:

Zum einen gibt es die implizite Methode, bei der das Bedienelement von einem <label>...</label>-Tag sozusagen eingewickelt wird. Der Webbrowser weiß nun, dass der im <label>-Tag enthaltene Text die Beschriftung des ebenfalls enthaltenen Bedienelementes ist - dessen Etikett. Diese automatische Verknüpfung ergibt sich also aus der Verschachtelung:

<label>Text: <input></label>

Zum anderen gibt es die Methode der expliziten, der ausdrücklichen Verknüpfung. Hier wird dem <label>-Tag ein ID-Attribut mitgegeben, das wie alle IDs in HTML einen einmaligen Wert hat, also nicht mehrfach auf einer Seite vorkommen darf. Die Verknüpfung mit dem Bedienelement geschieht nun dadurch, dass dieses <label> ein zusätzliches for="..."-Attribut mit dem Wert der ID des dazugehörigen Bedienelements erhält. Diese müssen nun nicht mehr ineinander verschachtelt sein (können es aber):

<label for=“foo“>Text:</label> <input id=“foo“>

ist ebenso gültiges HTML wie

<label for=“foo“>Text: <input id=“foo“></label>

Warum sollte man Labels definieren?

Der einfachste Grund ist: Benutzer sind dieses Verhalten gewohnt. Labels im HTML verursachen nämlich nichts anderes als ihre Vorbilder im Rest des Betriebssystems – der Labeltext wird anklickbar und steuert damit das verknüpfte Bedienelement.

Besonders wichtig ist dies für Menschen, die Schwierigkeiten im präzisen Umgang mit der Computermaus haben. Durch die Verwendung von Labels wird die anklickbare Fläche nämlich um ein Vielfaches vergrößert und der Nutzer muss nicht unbedingt die 12 Pixel große Checkbox treffen, um ein Häkchen zu setzen.

In der Wissenschaft ist dies als Fitts' Law bekannt – vereinfacht gesagt: je größer das Scheunentor, desto einfacher ist es mit der Schrotflinte zu treffen. Oder, um es doch etwas wissenschaftlicher auszudrücken: die Zeit, um ein Ziel zu treffen ist eine berechenbare Funktion von dessen Größe.

Neben der Bedienung mit herkömmlichen Eingabegeräten sind Labels auch für Nutzer von Screenreadern interessant. Diese Programme haben zwar eigene Mechanismen, um diese Verknüpfungen bereitzustellen, falls der Anbieter keine Labels definiert hat (was leider auch beinahe 9 Jahre nach Verabschiedung von HTML 4 eher die Ausnahme als die Regel ist). Nur ist dies meist ein munteres Ratespiel, da das Screenreader-Programm über die Nähe der Elemente zueinander versucht, einen Zusammenhang herzustellen. Leider geht dieser Versuch in der Praxis oft daneben, daher wird die Verwendung von Labels im BIENE-Prüfschritt 15.2 getestet.

Wohin mit den Labels?

Der zweite Test ist die optische Zuordnung von Labels, wie in Prüfschritt 15.1 verlangt. Die alleinige Verknüpfung über rein technische Mittel garantiert nicht, dass ein Formular benutzbar ist. Ebenso wichtig ist die optische Platzierung der Label zum Bedienelement, womit wir bei einem der Punkte wären, wo sich Usability und Accessibility, wie so oft, überschneiden.

Im zweiten Teil des BIENE-Prüfschritts untersuchen die Tester, ob sich ein klarer Zusammenhang zwischen dem Bedienelement und seiner Beschriftung herstellen lässt, und ob dieser Zusammenhang auch bei veränderten Schriftgrößen weiterhin besteht, oder ob das Layout dann »auseinanderfliegt«.

Bei der Platzierung der Labels sollten sich Webentwickler generell an die Konventionen halten, wie sie in sämtlichen Betriebssystemen gelten: Labels von Text- und Selectfeldern stehen generell unmittelbar darüber oder links daneben, Labels von checkboxes und radio buttons generell rechts von den Bedienelementen. Bei letzteren ist die Verwendung von <label> auch deswegen so wichtig, weil der Text wie bei Submit-Buttons und anders als bei Textfeldern Teil des Bedienelementes ist - ein kleiner aber wichtiger semantischer Unterschied.

Eine besonders lesenswerte Studie zum Thema Platzierung von Labels ist im Artikel »Label Placement in Forms« von Matteo Penzo beschrieben. Linksbündig platzierte Labels neben Eingabefeldern haben demnach im Test deutlich schlechter abgeschnitten als rechtsbündig platzierte Labels, die an einer gemeinsamen Mittelachse mit den Bedienelementen aufgereiht sind.

So, das war die achte Ausgabe unseres wöchentlichen Podcasts zum Thema barrierefreies Webdesign. Weitere Meldungen zum Thema der heutigen Sendung finden Sie im Weblog von ›Einfach für Alle‹ unter den Tags HTML, Hilfsmittel und BIENE; die Links gibt‘s wie üblich in der Mitschrift.

Wenn es Ihnen gefallen hat, hören wir uns nächste Woche wieder.