Nutzereingaben mit dem HTML-Element kbd

Eines der weniger verbreiteten HTML-Elemente ist <kbd>. Laut W3C dient es dazu, den Text anzuzeigen, den der Nutzer eingeben soll: „KBD: Indicates text to be entered by the user.“ Das klingt natürlich wunderbar schwammig, viele Websites nutzen es aber einfach für die Darstellung von einzelnen Tasten, um so Shortcuts darzustellen. Da auch das W3C-Wiki diese Verwendung als Beispiel bereitstellt, habe auch ich diese Variante etwas modifiziert übernommen.

Semantische Fragwürdigkeit bei der W3C

Das W3C-Beispiel wirkt etwas ungewöhnlich, da man <kbd> in sich selbst verwendet:

Beispiel B

<p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p>

Mir fällt es schwer, die Semantik zu deuten, vor allem wenn man Beispiel A hinzu nimmt:

Beispiel A

<p>Please, input "<kbd>Yes</kbd>" or "<kbd>No</kbd>"</p>

Die Bedeutung des Elements variiert folglich stark, je nachdem in welchem Kontext es genutzt wird:

  1. Wird das Element verwendet, ohne Kind von sich selbst zu sein und enthält sich selbst nicht als Kind, so soll der Nutzer den Inhalt als einzutippenden Text verstehen (Yes).
  2. Wird das Element als Kind von sich selbst verwendet, so ist der Inhalt als einzelne Taste zu verstehen (Strg).
  3. Wird das Element verwendet, ohne Kind von sich selbst zu sein, enthält jedoch weitere KDB-Elemente als Kinder, so ist enthaltener Reintext als Zusatzanweisung zu verstehen, die die Beziehung angegebener Tasten beschreibt (+).

Und das betrifft nur die einfachste Schachtelung. Man stelle sich vor, der Nutzer müsste während der Texteingabe noch eine Tastenkombination drücken… Vielleicht…

<kbd>object.get<kbd><kbd>Strg</kbd>+<kbd>Leertaste</kbd></kbd></kbd>

…?
Liebe W3C, hier sollte man noch mal drüber nachdenken. Oder überhaupt mal drüber nachdenken. Wer weiß, woher das Element kommt. Irgendwie ist ja nicht mal definiert, was KBD denn heißen soll. Keybord vielleicht?

Stylesheets für einzelne Tasten

Wenn ich jetzt also eine einzelne Taste mit Rahmen versehen will, steht die Frage nach dem CSS-Selektor. Die extreme Kontextabhängigkeit macht die Auswahl nahezu unmöglich. Hier müsste man für sich selbst (und ggf. die ganze Redaktion einer Website) die Festlegung treffen, dass einzelne Tasten immer als <kbd> in einem <kbd> angegeben sind und dass das Element maximal einfach verschachtelt werden darf. Dann ließe sich die einzelne Taste mit kbd kbd selektieren.

Für mich ist dies eines der wenigen Male, in denen ich bewusst mit dem Standard brechen und stattdessen mit dem Strom schwimmen werde: Das Element <kdb> beschreibt hier eine einfache Taste der Tastatur.

Mein CSS für eine solche Taste sieht folgendermaßen aus:

kbd {
	font:inherit;
	font-family:monospace;
	font-size:.9em;
	border:1px solid #ccc;
	background:#fdfdfd;
	padding:0 .3em;
	margin:0 .1em 0 0;
	border-radius:2px;
	box-shadow:1px 1px 0 #ccc;
}

Dies sollte auch in verschiedenen Größen zu brauchbaren Ergebnissen führen und auch inline den Text nicht zerreißen, wie das Beispiel Strg + a an dieser Stelle zeigen soll.

Strg + a

Strg + a

Strg + a

Widmung

Dieser Artikel ist Yannick gewidmet, der mich für meinen W3C-Verrat sicher direkt in die Hölle zu den Internet-Explorer-Entwicklern wünschen wird…

3 thoughts to “Nutzereingaben mit dem HTML-Element kbd”

  1. Ja, genau, zu den IE-Entwicklern gehörst Du verbannt. 😀
    Nee, Spaß bei Seite: Ich habe den Sinn des kbd-Elements verstanden und habe begriffen, wie sich die Bedeutung des Elements ändert, wenn es in einem kbd– oder samp-Element verschachtelt ist oder wenn es selbst ein samp– oder kbd-Element beinhaltet.

    Wenn ein kbd-Element also ein samp-Element beinhaltet, stellt samp eine Eingabe basierend auf der Ausgabe des Systems dar. Im folgenden Beispiel des W3C versteht man, was damit gemeint ist:

    <p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
    </p>

    Soweit eigentlich auch ganz logisch. Jetzt sagt die Spezifikation aber auch, dass Folgendes genau so gut ist.

    <p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

    Das finde ich unlogisch und in­kon­se­quent. Dadurch geht die Semantik in meinen Augen wieder verloren. Des Weiteren frage ich mich auch, ob wir diese Elemente überhaupt nötig haben. Vielleicht, denn schließlich gibt es auch das code-Element. Semantisch ist dieses nicht0 dazu geeignet, Computereingaben und -ausgaben zu kennzeichnen. Ich persönlich weiß nicht, was ich davon halten soll.

    1. Dein samp-Beispiel ist ja sogar noch besser 😀

      Also wie gesagt, ich finde es schon absolut unlogisch, dass ein Element je nach Kontext grundlegend seine Bedeutung ändert. Das macht die Sache doch absolut unnötig komplex. Schlussendlich ist ja das Ziel, dass man sowas mal automatisiert auswerten kann. Und solche Programme zu schreiben wird sicher kein Spaß. Vor allem kenne ich auch kein anderes Element, bei dem die Bedeutung von seinen Eltern abhängt. Zumindest fällt mir gerade keines ein…

    2. Ja, wie gesagt: ich auch.
      Mir fällt auch kein Element ein. Man müsste das anders lösen. Zum Beispiel ein Element, vielleicht namens instruc (Instruction) oder so, und darin das Element key für eine Taste. Oder eben irgendwie anders. Ich glaube, es gibt da durchdachtere Lösungen. 😀

Kommentare sind geschlossen.