Tastaturkürzel in Webformularen hervorheben

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Tastaturkürzel für ein Webformular sollen visuell hervorgehoben werden.

Lösung

Verwenden Sie Nachkommen-Selektoren, um die Zeichen im label-Tag hervorzuheben, die den Tastaturkürzeln entsprechen.

Zuerst legen Sie hierfür eine CSS-Regel an, die besagt, dass der Text innerhalb von em-Tags, die sich ihrerseits in einem Formular befinden, unterstrichen dargestellt werden soll:

form em {
 text-decoration: underline;
 font-style: normal;
}

Um die Buchstaben für die Tastaturkürzel hervorzuheben, umgeben Sie diese im HTML-Text entsprechen der CSS-Regel mit em-Tags.

<form id="msgform" name="msgform" method="post" action="/process.php">
  <label for="fmtitle" accesskey="a"><em>A</em>nrede</label>
  <select name="fmtitle" id="fmtitle">
    <option value="herr">Herr</option>
    <option value="frau">Frau</option>
    <option value="firma">Firma</option>
  </select>
  <label for="fmname" accesskey="n"><em>N</em>ame</label>
  <input type="text" name="fmname" id="fmname" />
  <label for="fmemail" accesskey="e"><em>E-</em>Mail</label>
  <input type="text" name="fmemail" id="fmemail" /> 
  <label for="fmstate" accesskey="b"><em>B</em>undesland</label>
  <input type="text" name="fmstate" id="fmstate" />
  <label for="fmzip" accesskey="p"><em>P</em>ostleitzahl</label>
  <input type="text" name="fmzip" id="fmzip" />
  <label for="fmmsg" accesskey="h">Nac<em>h</em>richt</label>
  <textarea name="fmmsg" id="fmmsg" rows="5" cols="14"></textarea>
  <input type="submit" name="submit" value="Abschicken" class="submit" />
</form>

Diskussion

Die Tastaturkürzel erleichtern es Benutzern mit Behinderungen, durch die verschiedenen Teile einer Webseite zu navigieren. Durch die Unterstreichung der für die Tastaturkürzel stehenden Buchstaben lässt sich leicht erkennen, wie die Navigation im Formular auch ohne Maus funktioniert.

Die folgenden Browser unterstützen die Verwendung von Tastaturkürzeln: Safari, Internet Explorer for Windows 4+, Mozilla, Firefox, Netscape Navigator 6+ und Opera 7+.

Siehe auch

Den Artikel "Accesskeys: Unlocking Hidden Navigation" von Stuart Robertson und das Rezept Navigationsmenüs mit Tastatursteuerung.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln