{"id":1833,"date":"2012-12-09T13:52:27","date_gmt":"2012-12-09T12:52:27","guid":{"rendered":"https:\/\/sgaul.de\/?p=1833"},"modified":"2014-03-13T21:34:46","modified_gmt":"2014-03-13T20:34:46","slug":"nutzereingaben-mit-dem-html-element-kbd","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2012\/12\/09\/nutzereingaben-mit-dem-html-element-kbd\/","title":{"rendered":"Nutzereingaben mit dem HTML-Element kbd"},"content":{"rendered":"

Eines der weniger verbreiteten HTML-Elemente ist <kbd><\/a>. Laut W3C dient es dazu, den Text anzuzeigen, den der Nutzer eingeben soll: \u201eKBD:\u00a0Indicates text to be entered by the user.\u201c Das klingt nat\u00fcrlich wunderbar schwammig, viele Websites nutzen es aber einfach f\u00fcr die Darstellung von einzelnen Tasten, um so Shortcuts darzustellen. Da auch das W3C-Wiki diese Verwendung als Beispiel bereitstellt<\/a>, habe auch ich diese Variante etwas modifiziert \u00fcbernommen.<\/p>\n

Semantische Fragw\u00fcrdigkeit bei der W3C<\/h2>\n

Das W3C-Beispiel wirkt etwas ungew\u00f6hnlich, da man <kbd> in sich selbst verwendet:<\/p>\n

Beispiel B<\/a><\/h3>\n
<p>Please, press <kbd><kbd>Shift<\/kbd>+<kbd>A<\/kbd><\/kbd><\/p><\/pre>\n
Mir f\u00e4llt es schwer, die Semantik zu deuten, vor allem wenn man Beispiel A hinzu nimmt:<\/p>\n
Beispiel A<\/a><\/h3>\n
<p>Please, input \"<kbd>Yes<\/kbd>\" or \"<kbd>No<\/kbd>\"<\/p><\/pre>\n
Die Bedeutung des Elements variiert folglich stark, je nachdem in welchem Kontext es genutzt wird:<\/p>\n
    \n
  1. Wird das Element verwendet, ohne Kind von sich selbst zu sein und enth\u00e4lt sich selbst nicht als Kind, so soll der Nutzer den Inhalt als einzutippenden Text verstehen (Yes).<\/li>\n
  2. Wird das Element als Kind von sich selbst verwendet, so ist der Inhalt als einzelne Taste zu verstehen (Strg).<\/li>\n
  3. Wird das Element verwendet, ohne Kind von sich selbst zu sein, enth\u00e4lt jedoch weitere KDB-Elemente als Kinder, so ist enthaltener Reintext als Zusatzanweisung zu verstehen, die die Beziehung angegebener Tasten beschreibt (+).<\/li>\n<\/ol>\n
    Und das betrifft nur die einfachste Schachtelung. Man stelle sich vor, der Nutzer m\u00fcsste w\u00e4hrend der Texteingabe noch eine Tastenkombination dr\u00fccken… Vielleicht…<\/p>\n
    <kbd>object.get<kbd><kbd>Strg<\/kbd>+<kbd>Leertaste<\/kbd><\/kbd><\/kbd><\/pre>\n
    …?
    \nLiebe W3C, hier sollte man noch mal dr\u00fcber nachdenken. Oder \u00fcberhaupt mal dr\u00fcber nachdenken. Wer wei\u00df, woher das Element kommt. Irgendwie ist ja nicht mal definiert, was KBD denn hei\u00dfen soll. K<\/span>eyb<\/span>ord<\/span> vielleicht?<\/p>\n
    Stylesheets f\u00fcr einzelne Tasten<\/h2>\n
    Wenn ich jetzt also eine einzelne Taste mit Rahmen versehen will, steht die Frage nach dem CSS-Selektor. Die extreme Kontextabh\u00e4ngigkeit macht die Auswahl nahezu unm\u00f6glich. Hier m\u00fcsste man f\u00fcr 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\u00dfe sich die einzelne Taste mit kbd kbd<\/code> selektieren.<\/p>\n
    F\u00fcr 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.<\/p>\n
    Mein CSS f\u00fcr eine solche Taste sieht folgenderma\u00dfen aus:<\/p>\n
    kbd {\r\n\tfont:inherit;\r\n\tfont-family:monospace;\r\n\tfont-size:.9em;\r\n\tborder:1px solid #ccc;\r\n\tbackground:#fdfdfd;\r\n\tpadding:0 .3em;\r\n\tmargin:0 .1em 0 0;\r\n\tborder-radius:2px;\r\n\tbox-shadow:1px 1px 0 #ccc;\r\n}<\/pre>\n
    Dies sollte auch in verschiedenen Gr\u00f6\u00dfen zu brauchbaren Ergebnissen f\u00fchren und auch inline den Text nicht zerrei\u00dfen, wie das Beispiel Strg<\/kbd> + a<\/kbd> an dieser Stelle zeigen soll.<\/p>\n
    Strg<\/kbd> + a<\/kbd><\/p>\n
    Strg<\/kbd> + a<\/kbd><\/p>\n
    Strg<\/kbd> + a<\/kbd><\/p>\n
    Widmung<\/h4>\n
    Dieser Artikel ist Yannick<\/a> gewidmet, der mich f\u00fcr meinen W3C-Verrat sicher direkt in die H\u00f6lle zu den Internet-Explorer-Entwicklern w\u00fcnschen wird…<\/p>\n","protected":false},"excerpt":{"rendered":"
    Eines der weniger verbreiteten HTML-Elemente ist <kbd>. Laut W3C dient es dazu, den Text anzuzeigen, den der Nutzer eingeben soll: \u201eKBD:\u00a0Indicates text to be entered by the user.\u201c Das klingt nat\u00fcrlich wunderbar schwammig, viele Websites nutzen es aber einfach f\u00fcr die Darstellung von einzelnen Tasten, um so Shortcuts darzustellen. Da auch das W3C-Wiki diese Verwendung… Nutzereingaben mit dem HTML-Element kbd<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[38,90],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1833"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":17,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1833\/revisions"}],"predecessor-version":[{"id":2358,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1833\/revisions\/2358"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=1833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=1833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}