Eine korrekte semantische Struktur im (X)HTML-Markup ist für State-of-the-Art Webworker unumgänglich. Semantisch ausgezeichnete Textelemente bei Abkürzungen und Akronymen gehören dazu. Diese können Nutzern die ausgeschrieben Form darstellen. Bei visuellen Browsern wird beim Drüberfahren mit der Maus ein Tooltip angezeigt, bei Screenreadern vorgelesen oder anderen Hilfsmitteln ausgegeben. Diese sollten an der Stelle ihres Vorkommens im Inhalt erläutert werden.
Dazu werden folgende Tags geboten: <abbr> und <acronym>
abbr
<abbr> verwendet man bei Abkürzungen, bei denen jeder Buchstabe einzeln ausgesprochen werden soll. Example: USA. <abbr>USA</abbr> wäre die korrekte Auszeichnung.
acronym
<acronym> ist dagegen für Wörter gedacht, die ganz ausgesprochen werden. Example: GUI. <acronym>GUI</acronym> wäre die korrekte Auszeichnung.
CSS
Aktuell ist in der letzten Spezifikation vom W3C <acronym> nicht mehr enthalten und wird durch <abbr> zusammengefasst. Ich verwende trotzdem noch beide Varianten, da Screenreader diese meistens richtig ausgeben. Diese beiden Tags lassen sich dementsprechend im CSS visualisieren.
In diesem Fall:
acronym, abbr { letter-spacing: .07em; border-bottom: .1em dashed #2ECCFF; cursor: help; }
http://www.abbreviations.com/
Ein neues Übersichtsportal bzw. Suchmaschine für Abkürzungen ging vor kurzem live und bietet eine Art Lexikon nach sortierten Rubriken http://www.abbreviations.com/
Du willst mit jemanden über das Thema plaudern?
Einen kostenlosen Termin mit CEO Susanne vereinbaren!
Barrierefreiheit einfach automatisiert testen? Nur die halbe Wahrheit
Für viele Unternehmen ist digitale Barrierefreiheit mittlerweile Pflicht – sei es aus gesetzlichen Gründen (Stichwort: BITV, WCAG, EAA) oder aus unternehmerischer Verantwortung gegenüber allen Nutzer:innengruppen. Doch der Weg zu einer barrierefreien Website oder Anwendung beginnt oft mit einem Accessibility Audit. Und genau hier warten die ersten Hürden.
Jetzt lesen
Episode #9 mit Oliver Schöndorfer
In dieser Folge zieht uns Oliver mit seinem unbändigen Enthusiasmus in die Welt der Schriften hinein. Jede Website schaut mittlerweile gleich aus? Keine Ausrede mehr; die Schrift ist die Stimme deiner Marke, mach was draus!Willkommen zum [...]
Jetzt anhören