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…