HTML abbr – Abkürzung und Akronym

abbr – abbreviation – Kürzel

Die meisten Browser markieren den Text innerhalb eines abbr-Tags durch einen Unterstrich, aber eine zuverlässige Kennzeichnung gibt es nur durch eine CSS-Eigenschaft für abbr.

HTML abbr ist ein Phrase-Tag (Inlineelement), d.h., es führt nicht zu einem Zeilenvorschub und kann in jedem Block- und Inline-Element stehen. Phrase-Tags wie code und cite umschließen eine oder mehrere Wörter innerhalb eines Satzes.

<abbr title="World Wide Web Consortium">W3C</abbr> ist eine Abkürzung. 
<abbr title="Joint Photographic Experts Group">JPG</abbr>     

Beim Hovern mit der Maus soll der Browser einen Tooltip zeigen – d.h., hier besteht nur ein eingeschränkter Zugriff, denn Benutzern ohne Maus oder mit Sprachausgabe wird die Bedeutung nicht angezeigt.

Einige Browser kennzeichnen einen von abbr eingeschlossenen Begriff durch eine Unterstreichung. Firefox gibt dem Inhalt eines <abbr>- bzw. <acronym>-Tags seit Version 2 einen eigenen Stil mit einer feinen gepunkteten Linie, so dass Tooltips im Text leicht hervorgehoben werden.

Trotzdem: Ohne expliziten Hinweis werden die wenigsten Benutzer die Funktion entdecken, und selbst wenn: Die Verzögerung, bis der Browser den Titel anzeigt, wird von den meisten Users als Fehlfunktion interpretiert.

abbr: Ohne CSS kein Verlass

Safari und Chrome haben das abbr-Tag von jeher nicht gekennzeichnet, so dass es ohne weitere CSS-Eigenschaften nicht zu erkennen war. Das war keinesfalls ein Manko: HTML ist für die Struktur und nicht für die Darstellung verantwortlich. Inzwischen hat Safari eingelenkt und unterstreicht den Text in abbr mit der gestrichelten Linie.

Eine zuverlässige Kennzeichnung gibt es – wie bereits anfangs erwähnt – nur durch CSS. Eine gepunktete Linie ist ein Quasi-Standard, der Cursor als Fragezeichen (help) bietet sich zusätzlich an.

abbr[title] {
	border-bottom: 1px dotted gray;
	cursor: help;
}

HTML abbr mobile – etwas für die Barrierefreiheit

Auf den mobilen Geräte gibt es kein Hovern. Eine Abkürzung aus drei Buchstaben mit einem Touch zu erwischen geht an die Grenzen der Feinmotorik.

Zeigen wir die Erklärung aus dem title-Attribut auf einem Touch Device und im Print direkt an:

abbr[title]:after {content: " (" attr(title) ") "}

@media (min-width:1160px) {
   abbr[title] {border-bottom: 1px dotted }
   abbr[title]:after {content: "" }
}

Touch-Events emmulieren die Maus auf mobilen Geräten mit Touchscreen und sind ein Äquivalent zu den Click-Events der Maus – wenn auch mit Einschränkungen. Ein Skript könnte den Klick auf ein abbr-Element abfangen und den Ausdruck in ein Overlay schreiben – ähnlich wie die »eingebaute« Anzeige auf dem Desktop.

if 	(('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0)) {
	…
}

abbr vs acronym

acronym und abbr waren von je her fast gleichbedeutend, sichtbare Unterschiede gab es nicht. Ein Akronym (Radar, JPEG [ˈdʒeɪpɛɡ], LOL ) kann man als Wort aussprechen, Abkürzungen (JPG, IBM, ZDF, USA) werden als einzelne Buchstaben ausgesprochen.

RADAR ist ein Akronym für RAdio Detection And Ranging.

IP ist die Abkürzung von Internet Protocol

In HTML ist nur noch abbr, nicht aber mehr das veraltete acronym-Element vertreten. Wunderbar – der Unterschied war immer nur ein Spielplatz für Pendanten.