Vorwort

Es ist wieder soweit. Der Dezember ist angebrochen und mit ihm die Zeit der Adventskalender. Im letzten Jahr habe ich ja bereits einen geschrieben und damit die Idee von #projekt52 gegeben. Auch wenn ich zum Ende hin vermutlich der einzige übrig gebliebene Blogger war, hat es mir doch Spaß gemacht, jeder Woche einen Artikel zu schreiben.

Eigentlich wollte ich ja zusätzlich zu den 52 Beiträgen nicht auch noch einen Adventskalender starten, aber auf einem Blogger-Meetup hatte ich davon berichtet und die Idee kam so gut an, dass ich dann doch überlegt habe, noch einmal diese große Aufgabe zu versuchen:

Lange Rede, kurzer Sinn, hier ist nun der Startschuss zum diesjährigen Adventskalender. Und obwohl das jetzt auch schon als Artikel zählen könnte, möchte ich mich natürlich nicht ganz so einfach aus der Affäre ziehen und auch einen ersten echten Artikel schreiben. Im letzten Jahr gab es noch sehr viele wild gemischte Themen, dieses Jahr möchte ich aber meine Stammleser, die eher Entwicklerthemen gewohnt sind, mit Beiträgen zu Programmiersprachen beglücken.

Tastatureingaben in HTML semantisch kennzeichnen

Es gibt in der HTML-Spezifikation einige Tags, die wohl kaum Beachtung finden. Eines dieser Tags ist der <kbd> Tag. Es wurde bereits in HTML 4.01 eingeführt und dient der Auszeichnung von Nutzereingaben. Das kann beispielsweise die Eingabe in einer Kommandozeile sein, aber auch das Drücken einer Taste auf der Tastatur.

Bereits im November 2010 hatte ich die Idee regelmäßig einen Beitrag zum „Shortcut des Monats“ zu schreiben. Damals habe ich aber beim regelmäßige Bloggen noch versagt 🙂 Nichts desto trotz stellte sich für mich damals die Frage, wie ich die Shortcuts am besten visuell darstellen könnte und welchen Tag ich dazu verwenden sollte. Zu der Zeit hat es mir das Thema korrekte Semantik angetan, auch aufgrund einer Vorlesung. Es musste also ein passender Tag her und der <kbd> Tag erschien mit damals perfekt dafür geeignet.

Styling des Tags

Der Tag selbst hat kein auffälliges Styling. Es ist lediglich festgelegt, dass eine „Monospace Font“ verwendet werden soll, also eine Schriftart, bei der alle Zeichen die gleiche Breite einnehmen. Dies kommt vermutlich daher, dass der Tag eben auch für Eingaben auf einer Kommandozeile eingesetzt wird, wo solche Schriftarten in der Regel immer verwendet werden.

Ich wollte den Tag aber für Tasten auf einer Tastatur einsetzen. Nach einigen Experimenten bin ich schließlich zu folgendem CSS gekommen:

kbd {
	padding: 2px 4px;
	white-space: nowrap;
	color: #000;
	font-size: inherit;
	background: #eee;
	border-width: 1px 3px 3px 1px;
	border-style: solid;
	border-color: #ccc #aaa #888 #bbb;
	border-radius: 5px;
}

In einem Artikel verwende ich dann den <kbd> Tag wie folgt für einen Shortcode:

<kbd>STRG<kbd> + <kbd>SHIFT</kbd> + <kbd>T</kbd>

Das Ergebnis hiervon sieht dann wie folgt aus (zzgl. einem Absatz zum Zentrieren des Shortcuts):

STRG + SHIFT + T

Das ist doch viel schicker als einfach nur Anführungsstriche zu verwenden, oder? 🙂

Mögliche Verbesserung für die Accessibility?

Ich konnte bisher leider keine verlässlichen Informationen darüber finden, ob die Verwendung eines <kbd> Tags auch beim Vorlesen von Text durch Screen-Reader bietet. Es scheint aber im Moment so zu sein, dass der Tag keine besondere Ausgabe erzeugt.

Es scheint zumindest so zu sein, dass jeder Tag einzeln vorgelesen wird, was vermutlich helfen könnte. Aber vielleicht kann ja jemand von euch hier genauere Informationen beisteuern.

Fazit

Na, wer von euch kannte den Tag bereits und wer setzt ihn auch aktiv ein? 😉 Ich hoffe ich konnte euch mit diesem Beitrag ein wenig ermutigen, euch doch mal die weniger bekannten HTML Tags anzusehen, die es im Standard gibt. Da sind ein paar sehr interessante dabei.

Ich hatte überlegt, jede Adventswoche eine andere Internet-Programmiersprache in den Fokus zu nehmen. Ich wollte mit HTML anfangen und mit CSS, JavaScript und PHP weitermachen. Würdet euch das interessieren? Oder ist euch das zu wenig WordPress 🙂 Vorschläge nehme ich gerne noch entgegen. Da ich morgen ohnehin einige Stunden Aufenthalt in London auf meinem Weg zum WordCamp US in Philadelphia habe und meine Artikel ja, trotz guten Absichten, immer erst kurz vor „Redaktionsschluss“ schreibe, kann ich die Themen noch recht kurzfristig euren Wünschen anpassen. Also immer her damit in den Kommentaren. Falls ihr keine Wünsche äußert, müsst ihr dann eben mit den Inhalten leben, die mir täglich so spontan einfallen 🙂