Die HTML Abkürzung nehmen – das abbr-Element

In der Barrierefreiheit haben wir Tag ein, Tag aus mit Abkürzungen zu tun. Wir reden über die Web Content Accessibility Guidelines (WCAG), das World Wide Web Consortium (W3C), das Barrierefreiheitsstärkungsgesetz (BFSG) oder das Behindertengleichstellungsgesetz (BGG). Wir schreiben Websites in der Hypertext Markup Language (HTML) und Cascading Stylesheets (CSS) und prüfen dann auf die Barrierefreie Informationstechnikverordnung (BITV). Daraus könnten die Fantastischen Vier glatt einen neuen Hit machen. Wie aber können wir im Rahmen einer barrierefreien Website damit umgehen? Wie lassen sich Abkürzungen im HTML definieren und was hat das eigentlich mit Barrierefreiheit zu tun?

Abkürzungen und Barrierefreiheit

Abkürzungen sind, wenn sie bekannt sind und es nicht übertrieben wird, eine gute Möglichkeit um Texte flüssiger zu schreiben. Niemand möchte in einem Text zehnmal von den Web Content Accessibility Guidelines lesen. Häufig ist die Abkürzung inzwischen schon deutlich bekannter als der eigentliche Name. Doch Abkürzungen haben aus Sicht der Barrierefreiheit einige große Nachteile.

Unbekannte Abkürzungen

Oft entstehen Abkürzungen aus einer Fachsprache heraus, die in einer bestimmten Zielgruppe als Fachbegriffe nicht mehr erklärt werden müssen. So haben alle Menschen, die sich mit der digitalen Barrierefreiheit oder Websites an sich befassen, einmal etwas von HTML gehört. Diesen Begriff noch zu erklären erscheint unnötig. Und doch gibt es immer Personen, denen diese Abkürzung neu ist. Eine Erklärung bei der ersten Verwendung ist deshalb möglicherweise notwendig.

Falsche Aussprache durch Screenreader

Sind Abkürzungen nicht klar ausgezeichnet, dann werden sie von Screenreadern manchmal als normale Wörter erkannt. Das Betrifft insbesondere die Abkürzungen, die nicht aus reinen Großbuchstaben bestehen. Eine Dr. Maria Mustermann könnte dann eben nicht zur Doktorin, sondern zur Drrrr werden. Oft haben sich für Abkürzungen auch eigene Aussprachen eingebürgert, die dann vom Screenreader nicht korrekt wiedergegeben werden.

Notwendiger Kontext zum Verständnis

Meist hilft der Kontext beim Verständnis von Abkürzungen, wenn man diese zwar schon gehört hat, aber nicht direkt zuordnen kann. Auch Personen mit Sprach- oder Leseschwächen gibt der Kontext hilfreiche Informationen über die Bedeutung einer Abkürzung. Abkürzungen können aber je nach Kontext auch eine völlig unterschiedliche Bedeutung haben. Im Englischen steht der Dr. beispielsweise nicht nur für einen Doktor, sondern auch für einen Drive, also eine Straße. Je nach umgebendem Text ist klar, welche Bedeutung gemeint ist.

Das Problem mit der Erklärung durch den Kontext ist aber, dass Menschen mit einer starken Bildschirmvergrößerung oder einer Bildschirmlupe oft einen so kleinen Ausschnitt des Textes sehen, dass dieser Zusammenhang verloren geht.

Das abbr-Element und sein Nutzen für die Barrierefreiheit

Das <abbr>-Element ist einer der versteckten Helden der semantischen Auszeichnung. Es hilft dabei, Abkürzungen und Akronyme verständlich zu machen indem diese direkt am Element erklärt werden. Das Problem mit dem Kontext ist so gelöst.

Beispiel:

Um die WCAG 2.1 zu erfüllen, sollten HTML-Dokumente ARIA-Landmarks korrekt anwenden.

<p>Um die <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 zu erfüllen, sollten <abbr title="Hypertext Markup Language">HTML</abbr>-Dokumente <abbr title="Accessible Rich Internet Applications">ARIA</abbr>-Landmarks korrekt anwenden.</p>

Jede Abkürzung wird mit einem <abbr>-Tag versehen, im title-Attribut wird die ausgeschriebene Bedeutung der Abkürzung ergänzt. Diese Art der Auszeichnung hilft sowohl sehenden Besuchern ihrer Website als auch Nutzern von Screenreadern. Auf der Website sichtbar werden die Abkürzungen mit einer gepunkteten Linie unterstrichen. Bei MouseOver erscheint dank dem Titel ein Tooltip mit der Bedeutung.

Nutzer von Screenreadern können sich diesen Titel bei Bedarf ebenfalls vorlesen lassen. Zusätzlich haben sie aber die Möglichkeit, den Screenreader so zu konfigurieren, dass er bei Abkürzungen immer direkt die ausgeschriebene Version vorliest. Sie können den Text so oft besser verstehen.

Insgesamt lassen sich durch das <abbr>-Element im HTML damit unkompliziert und ohne großen redaktionellen Aufwand bekannte und unbekannte Abkürzungen erklären.

Fordert die WCAG den Einsatz von abbr?

Nein, die WCAG fordert nicht ausdrücklich die Verwendung des <abbr>-Tags. Sie setzt sich aber durchaus mit dem Thema Abkürzungen auseinander. Im Kriterium 3.1.4 heißt es dazu:

Es gibt einen Mechanismus, um die ausgeschriebene Form oder Bedeutung von Abkürzungen zu erkennen.

Wie eine Abkürzung tatsächlich erklärt wird, bleibt dem Entwickler oder dem Redakteur überlassen

Mögliche Umsetzungsoptionen

• Verwendung des <abbr>-Elements: Wie bereits beschrieben ist das die semantisch klarste Methode, die besonders bei assistiven Technologien wie Screenreadern hilfreich ist. Sie ist aber nur für die ausgeschriebene Form einer Abkürzung gedacht, nicht für die Erklärung der Bedeutung.
• Verlinkung auf ein Glossar: Die Bedeutung einer Abkürzung lässt sich besser erklären, indem man auf ein externes oder internes Glossar verlinkt. Hier können Nutzer eine ausführliche Erklärung finden. Diese Methode ist besonders bei sehr komplexen Fachbegriffen sinnvoll und kann für Abkürzungen und sonstige Fachwörter verwendet werden. Auch aus Sicht der Suchmaschinenoptimierung wird gern zu einem Glossar geraten.
• Erklärung bei der ersten Verwendung: Eine häufig genutzte Praxis, insbesondere auf textlastigen Seiten, ist die Erklärung der Abkürzung bei ihrer ersten Verwendung im Fließtext. Diese Variante stellt sicher, dass die Bedeutung sofort erkennbar ist, ohne dass ein zusätzlicher Schritt durch den Nutzer nötig ist. Diese Methode wird auf stolperfrei.digital eingesetzt.

Fazit

Abkürzungen können die Lesbarkeit und Verständlichkeit eines Textes erschweren, insbesondere bei der Nutzung von Screenreadern. Um dies zu verbessern, bietet das HTML-Element <abbr> eine barrierefreie Lösung, da es Abkürzungen semantisch kennzeichnet und ihre Bedeutung klar darstellt. Das erleichtert die Nutzung sowohl für Screenreader-Nutzer als auch für Menschen, die die Bedeutung nicht kennen.