<kbd> – Ein vernachlässigtes HTML-Element, das nicht nur zur semantischen Auszeichnung dient
Kürzlich habe ich im Blog von Bernhard Kau (Kau-Boys.de) einen Beitrag über das vernachlässigte HTML-Element <kbd> gelesen. Ich danke ihm an dieser Stelle für dieses Posting, das er als ersten seiner heurigen Adventkalendereinträge veröffentlichte und mich damit zu diesem Beitrag inspirierte.
Obwohl ich um semantisch korrekte Auszeichnung bemüht bin, habe auch ich das <kbd> in meinen Ausführungen oftmals vergessen oder vielleicht auch ignoriert. Das kommt mir so vor, wie wenn man über typografisch korrekte Anführungszeichen schreibt, sie aber dann selbst nicht verwendet. Selbstverständlich werde ich dieses HTML-Element ab jetzt immer berücksichtigen (übrigens soll das aber keine „Neujahresvorsatz“ sein).
Wie man sieht, ist so ein Lapsus des Nichtbeachtens wirklich schnell passiert. Deshalb widme ich meinen heutigen Blogbeitrag nun diesem Thema.
Was besagt ein kbd-Tag eigentlich?
Laut W3C-Definition steht <kbd> für Keyboard und bezeichnet, dass die vom Start- und vom End-Tag <kbd></kbd> eingeschlossenen Begriffe, eine vom Benutzer zu tätigende Eingabe erfordert. Diese geschieht meist über die Tastatur – kann aber auch per Stimme erfolgen.
Eine der häufigsten Anwendungen ist bei technischen Instruktionen wie Benutzerhandbüchern zu finden. Ich weiß, die meisten wollen diese aus verschiedensten Gründen, wie beispielsweise verplemperte Zeit oder falscher Stolz, nicht lesen. Ein intuitiv zu bedienendes Gerät oder Programm ist zweifelsfrei gut gestaltet und bedarf daher auch meist keiner Bedienungsanleitung. Aber es gibt auch Leute die Manuals benötigen oder einfach nur ein Faible dafür haben. Zur letzten Gruppe zähle ich mich.
Wie sieht ein kbd-Tag nun in Verwendung aus?
Als Browserstandard wird <kbd> meist in einem Monotype-Schriftfont wie beispielsweise Courier dargestellt. Trotzdem sieht man oft per CSS individuell gestaltete Varianten, bei denen eine Keyboardtaste nachempfunden wird. Mit dieser besonderen Gestaltung versucht man den Benutzerinnen und Benutzern die Aussage direkter vor Augen zu führen.
Anschließend möchte ich hier ein paar Beispiele zeigen, wie mit CSS gänzlich unterschiedlich gestaltete <kbd>s auf verschiedenen Websites zu finden sind.
Dafür habe ich so unterschiedliche Seiten wie 24 ways, Kau-Boys und Bootstrap ausgewählt.
24ways.org:
STRG
kau-boys.de:
STRG
bootstrap.com:
STRG
Wen die Styles dazu interessieren:
http://bits.24ways.org/components/detail/article :
.s-prose--article kbd > kbd {
font-size: 90%;
background-color: #fff;
margin: 0 .125rem;
border: 1px solid hsla(240,7%,50%,.25);
border-radius: .25rem;
padding: .25rem .5rem;
box-shadow: 0 1px 0 hsla(240,7%,50%,.25);
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
}
/* background-color der Seite #fdf7f7; */https://kau-boys.de/3045/adventskalender/adventskalender-tag-1-der-kbd-html-tag
kbd {
padding: 2px 4px;
white-space: nowrap;
color: #000;
background: #eee;
border-width: 1px 3px 3px 1px;
border-style: solid;
border-color: #ccc #aaa #888 #bbb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}http://v4-alpha.getbootstrap.com/content/code/
kbd {
padding: .2rem .4rem;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: .2rem;
font-family: Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}