Techniken für WCAG 2.0

Zum Inhalt

-

H44: Benutzung von Label-Elementen, um Text-Label mit den Steuerelementen eines Formulars zu assoziieren

Anwendbarkeit

HTML- und XHTML-Steuerelemente, die externe Beschriftungen benutzen

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Die HTML und XHTML-Spezifikationen erlauben sowohl implizite als auch explizite Beschriftungen. Allerdings verarbeiten einige assistierende Techniken implizite Beschriftungen nicht korrekt (zum Beispiel <label>First name <input type="text" name="firstname"></label>).

  • JAWS 7.10 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es liest die Beschriftung für explizite und implizite Beschriftungen von Textfeldern sowohl im Virtuellen-Cursor-Modus als auch im Formularmodus. Im Formularmodus liest es keine Beschriftungen für implizite Beschriftungen bei Kontrollkästchen und Radio-Feldern.

  • Window-Eyes 5.5 wurde unter Windows XP mit Internet Explorer 6.0 und Firefox 1.5 getestet. Es spricht immer die Beschriftung von einem explizit beschrifteten Formularfeld. Es spricht keine Beschriftung für implizit beschriftete Formular-Steuerelemente im browse-on-Modus aber es spricht die implizite Beschriftung, wenn man im browse-off-Modus von Steuerelement zu Steuerelement navigiert.

Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem input-Element, das ein titleAttribut hat, schwebt. Title-Attribute werden assistierenden Techniken gezeigt und als Tooltips in vielen grafischen Browsern angezeigt. Tooltips können nicht per Tastatur geöffnet werden, also kann es sein, dass diese Information sehenden Tastatur-Benutzern nicht zur Verfügung steht.

Wenn keine Beschriftung (label) zur Verfügung steht, sprechen JAWS und Window-Eyes das title-Attribut, wenn das Formular-Steuerlement des Fokus erhält

  • JAWS 6.0 und höher kann so eingestellt werden, dass sowohl label als auch title gesprochen werden, wenn die zwei Elemente unterschiedlich sind; allerdings haben nur sehr wenige Benutzer von dieses Einstellung Kenntnis.

  • WindowEyes 5.5 hat einen Kurzbefehl, ins-E, der that will display additional information, including the title attribute, for the item with focus.

Beschreibung

Das Ziel dieser Technik ist es, das label-Element zu benutzen, um ein Formular-Steuerelement explizit mit einer Beschriftung zu verbinden. Ein label wird durch die Benutzung des for-Attributs an ein bestimmtes Formular-Steuerelement angehängt. Der Wert des for-Attributs muss gleich dem Wert des idAttributs des Formular-Steuerelements sein.

Das id-Attribut kann den gleichen Wert wir das name-Attribut haben, aber beide müssen bereitgestellt werden und die id muss auf der Webseite einmalig sein.

Diese Technik ist ausreichend für die Erfolgskriterien 1.1.1, 1.3.1 und 4.1.2, egal ob das label-Element sichtbar ist. Sprich, es kann durch die Benutzung von CSS versteckt sein. Allerdings muss das label-Element für Erfolgskriterium 3.3.2 sichtbar sein, da es allen Benutzern, die Hilfe brauchen, um den Zweck des Feldes zu verstehen, Unterstützung bietet.

Ein zusätzlicher Nutzen dieser Technik ist ein größerer anklickbarer Bereich für das Steuerelement, da das Klicken auf das Label oder das Steuerelement das Steuerelement aktiviert. Dies kann für Benutzer mit beeinträchtigter Motorik hilfreich sein.

Beachten Sie, dass das label nach den input-Elementen des Typs type="checkbox" und type="radio" positioniert wird.

Anmerkung 1:Elemente, die explizit verbundene Label benutzen, sind:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

Anmerkung 2:Das labelElement wird nicht für folgendes benutzt, da Label für diese Elemente über das value-Attribut (bei Absenden- und Zurücksetzen-Schaltflächen), das alt-Attribut (für Bild-Schaltflächen) oder über Inhalte des Elements selber (Schaltfläche) zur Verfügung gestellt werden.

  • Absenden- und Zurücksetzen-Schaltflächen (input type="submit" oder input type="reset")

  • Bild-Schaltflächen (input type="image")

  • Versteckte Eingabefelder (input type="hidden")

  • Skript-Schaltflächen (button-Elemente oder <input type="button">)

Beispiele

Beispiel 1: Ein Texteingabefeld

Das Textfeld in dem Beispiel unten hat die explizite Beschriftung „Vorname:“. Das for-Attribut des label-Elements entspricht dem id-Attribut des input-Elements.

Code-Beispiel:

			<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />

Beispiel 2: Ein Kontrollkästchen

Code-Beispiel:

			<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

Beispiel 3: Eine Gruppe von Radiobuttons

Eine kleine, zusammenhängende Gruppe von Radiobuttons mit einer eindeutigen Beschreibung und Beschriftungen für jedes individuelle Element.

Anmerkung: Um klare Verbindungen und Anweisungen für eine große Reihe an zusammenhängenden Radiobuttons zur Verfügung zu stellen, sollte H71: Bereitstellung einer Beschreibung für Gruppen von Formular-Steuerelementen, indem fieldset- und legend-Elemente benutzt werden in Betracht gezogen werden.

Code-Beispiel:

			 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für alle input-Elemente des Typs text, file oder Passwort, für alle textareas und für alle select-Elemente auf der Webseite:

  1. Prüfen Sie, ob es ein label-Element gibt, das den Zweck des Steuerelements vor dem input-, textarea- oder select-Element identifiziert.

  2. Prüfen Sie, ob das for-Attribut des label-Elements der id des input-, textarea- oder select-Elements entspricht.

  3. Prüfen Sie, ob das label-Element sichtbar ist.

Für alle input-Elemente des Typs Kontrollkästchen oder Radiobutton auf der Webseite:

  1. Prüfen Sie, ob es ein label-Element gibt, das den Zweck des Steuerelements nach dem input-Element identifiziert

  2. Prüfen Sie, ob das for-Attribut des label-Elements der id des input-Elements entspricht

  3. Prüfen Sie, ob das label-Element sichtbar ist.

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.