Abkürzungen sind praktisch, beliebt, zeugen von Fachwissen… und sind oft leider verwirrend für den Leser, weil Sie nicht eindeutig oder ganz einfach unbekannt sind. Trotzdem müssen Sie auf Abkürzungen nicht verzichten und dürfen sogar eigene Abkürzungen verwenden – solange Sie sich die Mühe machen, diese auch zu erklären. Es ist nicht nötig, es mit der Beschreibung von Abkürzungen und Akronymen zu übertreiben – „inkl. MwSt.“ muss eigentlich jeder verstehen, der in einem Shop einkaufen will und „USA“ muss auch nicht unbedingt in die Langform aufgelöst werden (es ist auf der anderen Seite aber auch nicht verboten). Aber gerade im Web und unter Verwendung entsprechender Mittel, die CSS und HTML zur Verfügung stellen, ist es einfach, eine Beschreibung zu einem solchen Kurzbegriff zu geben und dem Besucher Aufklärung oder zumindest Gewissheit zu geben, so dass er Ihren Text sicher so versteht, wie er gemeint war. Nutzen Sie diese Mittel, wenn Sie Abkürzungen lieben oder aus anderen Gründen vermehrt verwenden (müssen).

Um z. B. eine Abkürzung zu erklären, können Sie verschiedene Wege wählen. Existiert z. B. ein „Lexikon“ oder ein zentraler Ort auf Ihrer Site, an dem Sie Abkürzungen und andere (Fach-) Begriffe erklären, verweisen Sie einfach mit einem Link hinter dem Begriff auf die Seite – und ggf. durch einen Anker auch direkt zur passenden Stelle. Der Link kann z. B. auf ein der Abkürzung nachgelagertes Sternchen* gelegt werden. Dumm ist hierbei nur, dass der Leser im Web den Kontext des gerade gelesenden Begrifss verlassen muss, um dessen Erklärung lesen zu können.

Daher ist ein ebenso beliebter Weg, ein title – Attribut einzusetzen, um den Begriff zu erklären. Prinzipiell können viele HTML-Tags um die Abkürzung „geklammert“ werden, um einen title zu erhalten, aber es gibt in HTML auch eine Möglichkeit, die extra für Abkürzungen vorgesehen ist: <abbr>. Die Verwendung ist denkbar einfach und erst einmal sehr unauffällig, wenn Sie nicht weitere Schritte unternehmen, um dies zu ändern. So ist das Wort „unauffällig“ im vorherigen Satz mit einem solchen title – Attribut ausgestattet und wenn Sie mit der Maus darüber fahren, wird der Text angezeigt, der als Titel (sprich: title) verwendet wurde.

Allerdings ist es hier kein <abbr> – Tag, sondern ein neutraler <span>, der im Quelltext um den Begriff geklammert wurde (warum, wird gleich verraten).

Als „echte“ Abkürzung würde „HTML“ also im Quelltext einer Seite z. B. so definiert werden:

<abbr title=„Search Engine Marketing (Suchmaschinenmarketing)“>SEM</abbr>

Und damit noch nicht genug: Für Abkürungen, die – anders als „HTML“ – wegen der Anordung der Buchstaben als zusammenhängendes Wort ausgesprochen werden können (sei es absichlich oder zufällig), kennt HTML, genau wie die richtige Welt, ein eigenes Tag namens <acronym>. Und gerade für die Akronyme, die nicht schon so in den Sprachgebrauch übergegangen sind, dass man sie gar nicht mehr als Abkürzung wahrnimmt (NASA, NATO & Co.), ist eine ähnliche Kennzeichnung sinnvoll, wenngleich hier ein Beispiel gewählt wird, das sicher nicht zu den ungebräuchlichen Begriffen gehört :

<acronym title=„Radio Aircraft Detection and Ranging (eine deutsche und sicher holprige Übersetzung erspare ich Ihnen und mir hier)“>Radar</acronym>

Ob nun Kunstwort oder Abkürzung: Der Unterschied zwischen <abbr> und <acronym> erscheint auf den ersten Blick sicher banal und zumeist werden beide auch nach belieben eingesetzt, wenn sie denn überhaupt bekannt sind. Für einen Besucher, der Ihre Seite aber mit einem Screenreader „konsumiert“ ist das ein Riesenunterschied, denn Abkürzungen werden auch als einzelne Buchstaben vorgelesen („Es Pe De“); Akronyme hingegen werden als Wort ausgesprochen („Nato“, nicht „En A Te O“).

Damit eine Abkürzung beim Leser im Browser nicht darauf angewiesen ist, die Maus über einen Begriff zu bewegen, zu dem eine Erklärung gehört, können Sie mittels CSS dafür sorgen, dass der Browser die Erklärung direkt am Bildschirm ausgibt. Und während der Screenreader einen Unterschied zwischen Abkürzung und Akronym macht, müssen Sie das nicht unbedingt machen und können für beide gleiche Formatierungsanweisungen geben. Die folgende Anweisung sorgt dafür, dass nach jeder Abkürzung und jedem Akronym der Inhalt des definierten Titels in Klammern und „etwas“ kleinerer, kursiver Schrift ausgegeben wird.

abbr:after,
acronym:after { content: “ („attr(title)“)“; font-style: italic; font-size: 0.9em; }

Ein Beispiel, wie die Ausgabe so gekennzeichneter und formatierter Abkürzungen und Akronyme dann aussieht, finden Sie im Abschnitt „Wozu Barrierefreiheit“ am Ende des letzten Absatzes.