Infos zur Barrierefreiheit für:

Abkürzungen und Akronyme

Im Redakteurs-Bereich wird beschrieben wie Abkürzungen und Akronyme auf einer Webseite genutzt und gekennzeichnet werden (siehe weiterführende Links). Der folgende Artikel widmet sich nun den technischen Aspekten der Kennzeichnung mit HTML und CSS. Die Redakteure werden zwar dazu angehalten Wörter möglichst nicht abzukürzen und auch bei Akronymen des öfteren die ausgeschriebene Variante im Text zu erwähnen, aber besonders Akronyme werden trotzdem hin und wieder vorkommen. Wie kennzeichnet man also diese Elemente ohne den Textfluss zu stören?

Wie oft kennzeichnet man Abkürzungen und Akronyme?

Ich nutze in meinen Artikeln im Entwickler-Bereich sehr oft die Akronyme CSS und HTML. Wie oft sollen diese Akronyme nun ausgezeichnet werden? Einmal ganz am Anfang des Textes, wie es in vielen Richtlinien zur Barrierefreiheit gefordert wird? Was geschieht aber, wenn ein Leser durch einen Querverweis direkt zu einem bestimmten Abschnitt eines Artikels geführt wird? Er kann die erste Kennzeichnung des Akronyms gar nicht sehen.

Aus diesem Grund rate ich dazu, dass Sie entweder alle Akronyme bei jedem Auftreten im Text kennzeichnen, oder aber zumindest mehrfach im ganzen Text verteilt.

Wie vermeidet man die optische Überladung?

Auch wenn Sie alle Abkürzungen / Akronyme kennzeichnen um dem Besucher soweit nötig eine zusätzliche Hilfeleistung zu bieten, könnte es bewirken, dass der Text durch die Unterstreichungen unruhig wirkt. Aus diesem Grund bevorzuge ich die Variante, dass zwar alle entsprechenden Elemente ausgezeichnet werden, aber nicht alle optisch so erkennbar sind.

Mit einer CSS-Anweisung wird für Akronyme und Abkürzungen eine Unterstreichung sowie eine leichte farbliche Hervorhebung festgelegt. Danach wird eine CSS-Klasse angelegt, die diese Unterstreichung und die Hervorhebung wieder aufhebt. So können Sie nun selbst definieren wie oft Akronyme / Abkürzungen innerhalb des Textes sichtbar gekennzeichnet werden. Wenn ein Akronym sehr oft vorkommt, geben Sie dem Großteil der Kennzeichnungen des Textes die genannte Klasse, so dass sie sich optisch nicht vom restlichen Text unterscheiden. Sinnvoll verstreut bieten Sie aber auch das gekennzeichnete Akronym ohne diese Klasse, so dass es eindeutig hervorgehoben wird. 

acronym, abbr {
    border-bottom: 1px dotted #000;
    cursor: help;
    background-color: #F5F5FB;
}
acronym.standard, abbr.standard {
    border: none;
    cursor: help;
    background: transparent;
}

Durch die Hervorhebung wird der Leser neugierig, weshalb der Text optisch anders ist und wird dazu animiert mit der Maus darüber zu fahren. Die gute Verteilung sorgt dafür, dass auch Leser die über Querverweise in den Text einsteigen, die Möglichkeit haben das Akronym mit Hervorhebung zu sehen und sich die Erklärung anzeigen zu lassen. Alle restlichen Akronyme die per Klasse optisch unscheinbar gemacht wurden stehen zusätzlich allen Nutzern von Vorlesegeräten zur Verfügung, die sich auf diese Art alle Akronyme ausgeschrieben vorlesen lassen können.

Natürlich ist diese Lösung auch noch nicht optimal, aber mir ist keine Lösung bekannt, die alle Experten gleichermaßen akzeptieren und für gut befinden. Die vorgestellte Lösung ist zwar aufwendig und daher nicht für jedes Projekt geeignet, aber sie kann mit Hilfe von Automatismen gut gesteuert werden.
Falls Sie eine besser Lösung kennen, können Sie mir diese gerne über das Kontaktformular empfehlen.

zum Seitenanfang