Techniken für WCAG 2.0

Zum Inhalt

-

G162: Positionierung von Labels, um die Vorhersehbarkeit von Beziehungen zu maximieren

Anwendbarkeit

Alle Techniken, die Formulare unterstützen

Die Technik bezieht sich auf:

Beschreibung

Wenn Beschriftungen (Labels) für Formularfelder da positioniert sind, wo Benutzer diese visuell erwarten, dann ist leichter, komplexe Formulare zu verstehen und bestimmte Felder ausfindig zu machen. Die Beschriftungen der meisten Felder werden unmittelbar vor dem Feld positioniert, d.h. für von links nach rechts geschriebene Sprache entweder links oder oberhalb des Feldes, und für von rechts nach links geschriebene Sprache rechts oder oberhalb des Feldes. Beschriftungen für Radiobuttons und Kontrollkästchen werden nach dem Feld positioniert.

Diese Positionen sind definiert, weil dies die gängige (und daher vorhersehbarste) Position für die Beschriftung von Feldern, Radiobuttons und Kontrollkästchen ist.

Beschriftungen werden vor Eingabefeldern positioniert, da die Felder manchmal in der Länge variieren. Die Positionierung davor ermöglicht es, die Beschriftungen auszurichten. Außerdem sind die Beschriftungen dadurch mit einer Vergrößerungssoftware einfacher ausfindig zu machen, da sie direkt vor dem Feld sind und auch in einer vertikalen Spalte gefunden werden können (wenn die Anfänge der Felder vertikal ausgerichtet sind). Schließlich und endlich ist es, wenn das Feld Daten enthält, einfacher, die Daten zu verstehen oder zu überprüfen, wenn man zuerst die Beschriftung liest und dann den Inhalt statt anders herum.

Kontrollkästchen und Radiobuttons haben eine einheitliche Breite, während ihre Beschriftungen dies oft nicht haben. Zuerst Radiobuttons und Kontrollkästchen zu haben ermöglicht es daher, sowohl die Schaltflächen als auch die Beschriftungen vertikal auszurichten.

Beispiele

Beispiel 1: Beschriftungen oberhalb der Textfelder

Zwei Formularfelder mit Beschriftungen, die unmittelbar darüber positioniert sind.

Beispiel 2: Beschriftungen links neben den Textfeldern

Zwei Formularfelder mit Beschriftungen, die unmittelbar links davon positioniert sind.

Beispiel 3: Beschriftungen rechts von Radiobuttons

Eine Gruppe von Formularsteuerelementen enthält zwei Radiobuttons mit Beschriftungen, die rechts der Radiobuttons positioniert sind.

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für jedes Formularfeld auf der Webseite:

  1. Prüfen Sie, ob das Formularfeld eine sichtbare Beschriftung hat.

  2. Wenn es sich bei dem Formularfeld um ein Kontrollkästchen oder einen Radiobutton handelt, dann prüfen Sie, ob die Beschriftung unmittelbar nach dem Feld kommt.

  3. Wenn es sich bei dem Formularfeld nicht um ein Kontrollkästchen oder einen Radiobutton handelt, dann prüfen Sie, ob die Beschriftung unmittelbar vor dem Feld kommt.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.