Webdesign - Vorgehensweise bei einer Textauszeichnung

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie werden Textauszeichnungen geschrieben?

12Jun2018

Textauszeichnung für eine Abkürzung


Die sichtbare Anzeige ist nur eine Art der Textauszeichnungen. Je nachdem mit welchem Programm Sie eine Webseite verarbeiten, zum Beispiel mit einem Sprachausgabegerät, ist es sehr wichtig, bestimmte Wörter im Text entsprechend zu deklarieren.

Bei der Kennzeichnung der Abkürzungen in unseren Texten geht es uns um die Verständlichkeit!

Es kann jedem einmal passieren, dass einem eine Abkürzung gerade nicht einfällt, oder nicht jeder Besucher unserer Website die deutsche Sprache gut beherrscht. Und der konsequente Einsatz kann außerdem für den Lesefluss in Sprachausgaben genutzt werden.
Wenn man in der Konfiguration eines Sprachausgabegerätes das vollständige Lesen von Abkürzungen eingestellt hat, wird die Erklärung anstatt der Abkürzung ausgegeben. "z.B. (zum Beispiel)" wird als "zum Beispiel" und nicht als "Zett Punkt Be Punkt" ausgegeben.

Auch wenn die Begriffserklärungen auf der Webseite angezeigt werden sollen, funktioniert diese Möglichkeit leider nicht immer.

Abkürzungsprobleme

  • Besucher, die mit der Tastatur anstatt der Maus navigieren, können diesen Effekt nicht auslösen
  • Bei dem Druck einer Webseite werden die Begriffserklärungen nicht mit ausgedruckt
  • Der Internet Explorer in den älteren Versionen ignoriert leider den entsprechenden HTML (HyperText Markup Language)-Befehl

Damit gehen in manchen Situationen den Nutzern viele Informationen verloren.

Aus diesem Grund haben wir möglichst auf Abkürzungen in unseren Texten verzichtet!

Vorgehensweise bei einer Textauszeichnung für eine Abkürzung:

Das Element abbr zeichnet einen Teil eines Fließtextes als Abkürzung aus, und ist aus dem englischen "abbreviation" abgeleitet. Bei diesem Element handelt es sich um ein "inline-Element" und es erzeugt keinen Zeilenumbruch. Ein "Start-Tag" und ein "Ende-Tag" sind notwendig. Im "title-Attribut" wird die Abkürzung ausgeschrieben und der erklärende Text dem Anwender beim Überfahren der Textstelle mit der Maus als Tool-Tipp angezeigt.
Die Abkürzung "ges. (gesamt)" wird zum Beispiel in HTML (HyperText Markup Language) wie folgt geschrieben:

<abbr title="(gesamt)">ges.</abbr>

Wenn Sie nun mit der Maus über die Textstelle "z.B. (zum Beispiel)" fahren, wird der Tool-Tipp "zum Beispiel" angezeigt. Und damit beim Überfahren mit der Maus das Fragezeichen erscheint, benötige ich noch zusätzlich ein paar Zeilen in CSS (Cascading Style Sheet). Hier wird dann auch noch zusätzlich eine gestrichelte Linie unter der Abkürzung notiert.

abbr {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted #c93;
}

Damit aber ein Text nicht dauernd durch unterstrichene Textstellen überfrachtet wird, wird beim nochmaligen Auftreten der gleichen Abkürzung die gestrichelte Linie weggelassen. Diese Abkürzung wird dann z.B. (zum Beispiel) wie folgt gekennzeichnet:

<abbr class="standard" title="(zum Beispiel)">z.B.</abbr>

Der Unterschied zwischen diesen beiden Auszeichnungen besteht nur in der zugefügten Klasse und wird in CSS (Cascading Style Sheet) wie folgt geschrieben.

.standard {
    cursor: help;
    border: none;
}

Textauszeichnung für ein Akronym


In den Texten haben wir bestimmte Akronyme (Kurzwörter) mit einem Hilfstext versehen und mit einer gestrichelten Linie gekennzeichnet.
Geht man nun mit der Maus auf so einen Text, erscheint ein schwarzes Fragezeichen und der zugehörige Hilfstext wird eingeblendet.
Damit aber der Inhaltsbereich einer Seite durch zu viele Unterstreichungen nicht zu unruhig und unübersichtlich aussieht, haben wir uns für die folgende Vorgehensweise entschieden:

Akronymauszeichnung

  • Alle entsprechenden Kurzwörter werden ausgezeichnet
  • Das erste Auftreten in einem Abschnitt wird mit einer gestrichelten Linie gekennzeichnet
  • Alle weiteren Akronyme die kurz hintereinander in dem Textabschnitt vorkommen, werden nur ausgezeichnet aber nicht mit einer Linie versehen

Vorgehensweise bei einer Textauszeichnung für ein Akronym:

Ein Akronym ist ein Sonderfall einer Abkürzung, und besteht aus den Anfangsbuchstaben der einzelnen Wörter, wie zum Beispiel bei HTML (HyperText Markup Language) (HyperText Markup Language). Ein Beispiel, wie das für HTML (HyperText Markup Language) geschrieben wird, ist hier aufgeführt:

<acronym title="(HyperText Markup Language)">HTML</acronym>

Hier wird ebenfalls der entsprechende Hilfstext beim Überfahren mit der Maus eingeblendet. Und in CSS (Cascading Style Sheet) werden die Eigenschaften wie bei einer Abkürzung geschrieben. Die Angabe für "keine Linie anzeigen" braucht man bei dieser Vorgehensweise auch nur einmal als Klasse anzugeben, und kann sie sowohl bei einer Abkürzung als auch bei einem Akronym benutzen.

acronym {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted #c93;
}

.standard {
    cursor: help;
    border: none;
}

Wichtig! Das acronym-Element ist in HTML5 (HyperText Markup Language) als missbilligt eingestuft worden, und sollte daher nicht mehr verwendet werden.


Neuere Umsetzung für die Kennzeichnung einer Abkürzung oder einem Akronym!

In älteren HTML (HyperText Markup Language)-Versionen gab es die Textauszeichnungen "abbr" und "acronym" um die Erklärung zum jeweiligen Kürzel im Quelltext zu hinterlegen. HTML5 (HyperText Markup Language) fügt nun diese beiden Elemente zusammen und werden ausschließlich über "abbr" ausgezeichnet.

Ich habe aber auf diesen Seiten sowohl die Abkürzungen als auch die Akronyme mit einer individuellen Tool-Tipp-Anzeige realisiert. Das hat den Vorteil, dass die Erklärungen beim Druck einer Webseite ebenfalls mit ausgedruckt werden.


Textauszeichnung bei einem Sprachwechsel


Warum werden Sprachwechsel gekennzeichnet?

Textpassagen oder Wörter in Fremdsprachen werden bei jedem Auftreten im Text entsprechend in HTML (HyperText Markup Language) ausgezeichnet.

Das ist für die Besucher interessant, die aufgrund Ihrer Sehschwäche auf die Nutzung eines Vorlesegerätes angewiesen sind. Diese Geräte lesen den Inhalt einer Webseite vor und es hört sich schrecklich an, wenn Sie zum Beispiel "beautiful" deutsch aussprechen. Es ist also verständlich, dass diese Programme wissen müssen, in welcher Sprache die Wörter vorgelesen werden sollen.

Vorgehensweise bei einer Textauszeichnung für einen Sprachwechsel:

Im Header-Bereich einer Webseite, die mit HTML5 (HyperText Markup Language) erstellt wird, wird zuerst die allgemeine Sprache einer Webseite wie folgt deklariert:

<html lang="de">

Damit weiß der Screenreader, dass es sich um eine deutsche Seite handelt. Erfolgt nun im Text dieser Webseite ein Sprachwechsel ins Englische, weil zum Beispiel das Wort "beautiful" vorkommt, wird das wie folgt ausgezeichnet:

<span lang="en">beautiful</span>

Bei dem <span>-Element handelt es sich um ein Inline-Element und das hat den Vorteil, dass es keine neue Zeile im Fließtext erzeugt.

Tipp bei einem Sprachwechsel:

  • Diese Kennzeichnung nur bei Wörtern anwenden, die sich vom Klang der Sprache unterscheiden. Es macht zum Beispiel keinen Sinn das Wort "Meta" extra zu kennzeichnen.
  • Wörter, die in den deutschen Sprachgebrauch übergangen sind, zum Beispiel der Begriff "Internet", benötigen ebenfalls keine separate Kennzeichnung
  • Wenn es geht, den deutschen Text verwenden, zum Beispiel "Barrierefreiheit" statt "Accessibility"

Damit ist ein weiterer Baustein für die Zugänglichkeit und Barrierefreiheit einer Website erfüllt!

Zum Seitenanfang springen Λ