HTML abbr: Abkürzungen erklären und das title-Attribut verwenden

HTML <abbr> kennzeichnet eine Abkürzung oder ein Akronym. Sein optionales title-Attribut kann den vollständigen Begriff liefern, aber wesentliche Erklärungen sollten auch im sichtbaren Text erscheinen, damit Leser sie ohne Maus verstehen können.

Markieren Sie eine Abkürzung und erklären Sie ihren vollständigen Begriff

Wenn ein Fachbegriff zum ersten Mal auftaucht, hilft es den Lesern, den vollständigen Begriff zusammen mit seiner Abkürzung zu schreiben. Das abbr-Element kennzeichnet den Text als Abkürzung; es sucht oder übersetzt den vollständigen Begriff nicht automatisch. Sie müssen nicht jede Abkürzung, die Ihr Publikum bereits kennt, in dieses Element einfügen.

Speichern Sie das folgende Dokument als abbreviation.html und öffnen Sie es in einem Browser. Der erste Satz hält die Erklärung sichtbar, während der zweite das title-Attribut demonstriert.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Abkürzungen und ausgeschriebene Begriffe</title>
</head>
<body>
  <p>Webdokumente verwenden HyperText Markup Language
    (<abbr>HTML</abbr>) zur Strukturierung ihrer Inhalte.</p>
  <p>Weitere Abkürzung: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

Der erste Satz zeigt den vollständigen Ausdruck neben HTML an. Abhängig vom Browser kann WWW im zweiten Satz eine gepunktete Unterstreichung haben, und beim Darüberfahren kann in einem Tooltip World Wide Web angezeigt werden. Der Browser bestimmt das Standardverhalten für Unterstreichung und Tooltip, daher handelt es sich hierbei nicht um ein Designmerkmal, das ein einheitliches visuelles Ergebnis garantiert.

Was gehört ins title-Attribut?

Das title-Attribut bei abbr ist optional. Wenn Sie es verwenden, geben Sie den vollständigen Ausdruck an, der durch diese Abkürzung dargestellt wird, ohne Werbetexte oder nicht verwandte Erklärungen. Ein title-Wert bei einem abbr-Element gilt nicht automatisch für andere abbr-Elemente im selben Artikel. Wenn Sie das title-Attribut im Beispiel entfernen, bleibt die sichtbare Abkürzung WWW bestehen.

Verwechseln Sie nicht das globale title-Attribut mit dem title-Element des Dokuments. Das title-Attribut auf abbr liefert ergänzende Informationen zu dieser Abkürzung; das title-Element im head-Element des Dokuments liefert den Seitentitel.

Verlassen Sie sich nicht nur auf Tooltips

Touchscreens bieten kein Mouseover, und der Zugriff auf title-Informationen variiert auch bei Tastaturnavigation und unterstützender Technologie. Wenn eine Erklärung notwendig ist, um eine Abkürzung zu verstehen, machen Sie sie im Text sichtbar, wie im ersten Satz des Beispiels. Machen Sie den Inhalt selbst lesbar, anstatt abbr in einen unnötigen Tab-Stopp oder Button zu verwandeln, nur um einen Tooltip anzuzeigen.

Wenn die Erklärung lang ist, schreiben Sie sie in die Nähe des ersten Auftretens oder verlinken Sie auf eine Definition. Berücksichtigen Sie den Lesefluss, bevor Sie den vollständigen Begriff im title-Attribut wiederholen, wenn derselbe Absatz ihn bereits erklärt. Die MDN-Referenz zu abbr behandelt Verwendung und Barrierefreiheit.