Techniken für WCAG 2.0

Zum Inhalt

-

H65: Benutzung des title-Attributs, um Formular-Steuerelemente zu kennzeichnen, wenn das Label-Element nicht benutzt werden kann

Anwendbarkeit

HTML- und XHTML-Formular-Steuerelemente, die nicht durch die Benutzung von value, alt, oder element content gekennzeichnet werden

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

  • Benutzeragenten zeigen einen Tooltip an, wenn die Maus über einem input-Element, das ein titleAttribut hat, schwebt.

  • 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 title-Attribut zu benutzen, um Formular-Steuerelemente zu beschriften, wenn das visuelle Design die Beschriftung nicht aufnehmen kann (wenn es zum Beispiel auf dem Bildschirm keinen Text gibt, der als Beschriftung erkannt werden kann) oder wenn es verwirrend sein könnte, eine Beschriftung anzuzeigen. Benutzeragenten einschließlich assistierender Techniken können das title-Attribut sprechen.

Beispiele

Beispiel 1: Ein Pulldown-Menü, das den Umfang einer Suche begrenzt

Ein Suchformular benutzt ein Pulldown-Menü, um den Umfang der Suche zu begrenzen. Das Pulldown-Menü ist direkt neben dem Textfeld, das zur Eingabe des Suchbegriffs benutzt wird. Die Beziehung zwischen dem Suchfeld und dem Pulldown-Menü ist für die Benutzer klar verständlich, die das visuelle Design, das keinen Platz für eine sichtbare Beschriftung lässt, sehen können. Das title-Attribut wird benutzt, um das select-Menü zu kennzeichnen. Das title-Attribut kann von Screenreadern gesprochen oder für Menschen, die eine Vergrößerungssoftware benutzen, als Tooltip angezeigt werden.

Code-Beispiel:

			<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 

Beispiel 2: Eingabefeld für eine Telefonnummer

Eine Webseite enthält Steuerelemente zur Eingabe einer Telefonnummer in den Vereinigten Staaten von Amerika, mit drei Feldern für Ortsvorwahl (area code), Telefonvermittlung (exchange) und die letzten vier Ziffern (last four digits).

Code-Beispiel:

			<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
type="text" size="4" value="" >
</fieldset> 

Beispiel 3: Eine Suchfunktion

Eine Webseite enthält ein Textfeld, in das der Benutzer Suchbegriffe eingeben kann, und eine Schaltfläche mit der Beschriftung „Suchen“, um die Suche durchzuführen. Das title-Attribut wird benutzt, um das Formular-Steuerelement zu kennzeichnen und die Schaltfläche wird direkt nach dem Textfeld positioniert, so dass es dem Benutzer klar ist, dass das Textfeld das Feld ist, in das der Suchbegriff eingegeben werden soll.

Code-Beispiel:

			<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Beispiel 4: Eine Datentabelle aus Formular-Steuerelementen

Eine Datentabelle aus Formular-Steuerelementen muss jedes Steuerelement mit der Spalte und Zeile für diese Zelle verknüpfen. Ohne einen title (oder ein off-screen LABEL) ist es für nicht-visuelle Benutzer schwierig, innezuhalten und korrespondierende Zeilen-/Spalten-Überschriften-Werten abzufragen, indem sie ihre assistierenden Techniken benutzen während sie durch das Formular tabben.

Ein Umfrage-Formular hat zum Beispiel vier Spalten-Überschriften in der ersten Zeile: Frage, Ich stimme zu, Unentschieden, Ich stimme nicht zu. Jede folgende Rolle enthält eine Frage und eine Optionsschaltfläche in jeder Zelle entsprechend der Alternative in den drei Spalten. Das title-Attribut für jede Optionsschaltfläche ist eine Verknüpfung der Antwort-Alternative (Spaltenüberschrift) und des Frage-Textes (Zeilenüberschrift) mit einem Bindestrich oder einem Doppelpunkt als Trennzeichen.

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Bestimmen Sie jedes Formular-Steuerelement, das nicht mit einem label-Element verbunden ist

  2. Prüfen Sie, ob das Steuerelement ein title-Attribut hat

  3. Prüfen sie, ob das title-Attribut den Zweck des Steuerelementes bezeichnet

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.