Web Development
Oliver Thiele

Akronyme & Abkürzungen im TYPO3 Rich-Text-Editor
Eine kleine Anpassung für barrierefreie Webseiten und eine verbesserte Usability

Wie aktiviert man die Schaltflächen für Akronyme und Abkürzungen im TYPO3 Rich-Text-Editor (RTE)?

Auf der Root-Seite muss in das TSConfig-Feld folgender Eintrag gemacht werden:

RTE.default.showButtons := addToList(acronym)
RTE.default.FE < RTE.default

Die Extension static_info_tables muss installiert sein, sonst wird der Button im RTE nicht angezeigt!

Die erste Zeile fügt die Schaltfläche für das Zuweisen von Akronymen und Abkürzungen bei dem RTE hinzu.

Die zweite Zeile übernimmt die geänderte RTE-Konfiguration für den Editor, wenn dieser im Frontend verwendet wird.

Änderungen in den TypoScript-Konstanten

styles.content.links.allowTags := addToList(abbr, acronym)

Diese Zeile muss in den TypoScript-Konstanten in dem Root-Template eingetragen werden. Ohne diese Zeile würde der RTE die Tags als normalen Text ausgeben.

Wie formatiert man die <abbr> und <acronym>-Tags sinnvoll mit CSS?

abbr, acronym {
	border-bottom: .1em dotted;
	cursor: help;
}

Der gepunkteten Linie ist bewusst keine Farbe zugewiesen worden. Da keine Farbe bei der CSS-Eigenschaft „border-bottom” angegeben wurde, wird diese von dem übergeordneten Element übernommen.

Der Internet Explorer kennt das <abbr>-Tag nicht.

Lösung 1:

Man verwendet anstatt dem abbr-Tag das acronym-Tag. Dies ist die leichteste Möglichkeit, allerdings wäre dies semantisch nicht richtig. ACHTUNG: In HTML5 gibt es nur noch das <abbr>-Tag!

Lösung 2:

Man verwendet zwischen dem abbr-Tag ein Span-Tag, dass die selbe Formatierung zugewiesen bekommt.

 

<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

 

Lösung 3:

Man verwendet JavaScript. Der nachfolgende Code fügt nach dem Laden der Webseite per JavaScript die <span>-Tags in die <abbr>-Tags ein.

function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML;
    reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
    newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
    document.body.innerHTML = newBodyText;
  }
}
 
window.onload = function(){
  styleAbbr()
};
 
isIE = (document.all) ? true:false;

Wann und wie oft sollte <abbr> und <acronym> verwendet werden?

Laut Web Content Accessibility Guidelines sollte beim ersten Auftreten einer Abkürzung das abbr oder acronym-Tag verwendet werden.

Beispiel:
Dynamic HTML ist ein Mix aus HTML, CSS und JavaScript.

Aber was passiert, wenn ein Screenreader das 2. HTML vorlesen soll und versucht, alle Buchstaben aneinander zu hängen? Es wird ja dann nicht jeder einzelne Buchstabe seperat buchstabiert. Einige Entwickler empfehlen, das abbr/acronym-Tag mit leerem title zu definieren.

Für eine bessere Lesbarkeit könnte man übrigens auch bei ersten Auftreten einer Abkürzung auch zunächst den langen Begriff schreiben und die Abkürzung in Klammern dazuschreiben. So weiß der Leser zumindest sofort, welche Bedeutung die Abkürzung haben soll.

Beispiel:
In diesem Tutorial wird gezeigt, wie der in TYPO3 enthaltene Rich-Text-Editor (RTE) konfiguriert wird, damit der Redakteur Abkürzungen und Akronyme verwenden kann.

© Copyright 2003-2017 Web Development Oliver Thiele. All rights reserved. - Diese Seite wurde am 21.04.2015 um 17:09 erstellt.
Letzte Änderung: 20.05.2015 16:44:21
Akronym, Acronym, abbr, RTE, Rich-Text-Editor

oliver-thiele.de Trustcheck Seal