Webdesign - Vorgehensweise bei einer Textauszeichnung

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie werden Textauszeichnungen geschrieben?

27Nov2015

Textauszeichnung für eine Abkürzung


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


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


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 Λ