Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Gedanken zur Silbentrennung veröffentlicht in 2012

Sollte eine Silbentrennung im Web eingesetzt werden? Lange Zeit stellte sich diese Frage nicht, weil nicht alle Browser den bedingten Trennstrich (­) unterstützen. Aber gehört eine solche Worttrennung überhaupt ins HTML? Die Antwort auf diese Frage wird oft im Zusammenhang mit Blocksatz diskutiert. Die Frage stellt sich aber insbesondere auch im Hinblick auf barrierefreies Webdesign und CSS3.

Der geschlossene Zeilenfall

Generell gilt für das Lesen am Bildschirm, dass ein offener Zeilenfall — auch Flattersatz genannt — zusammen mit anderen typografischen Eigenschaften wie angemessener Zeilenabstand oder optimaler Zeilenlänge zu einer besseren Leserlichkeit führen als ein geschlossener Zeilenfall (Blocksatz):

Im Hinblick auf Barrierefreiheit erschwert Blocksatz die Leserlichkeit von Texten für verschiedene Nutzergruppen. Einzelne Barrieren werden in den Extern, englischsprachig: erläuternden Dokumenten zu Erfolgskriterium 1.4.8 der Web Content Accessibility Guidelines (WCAG) 2.0 diskutiert und referenziert. Diese betreffen Menschen mit einer kognitiven Behinderung, aber auch Menschen mit einer Sehbehinderung. Konkret verlangt die Richtlinie, entweder ein Extern, englischsprachig: Verzicht auf einen geschlossenen Zeilenfall oder die Extern, englischsprachig: Darstellung von links- bzw. rechtsausgerichteter Texte.

Mit der CSS-Eigenschaft Extern: text-align kann die Darstellung eines Textblocks als einem offenen Zeilenfall (links-, rechts- oder zentriert ausgerichteter Text) und einem geschlossenen Zeilenfall (links- und rechtsausgerichteter Text) bestimmt werden. Für die deutsche Sprache ist bei den offenen Zeilenfällen Extern, englischsprachig: der links ausgerichteter Text vorzuziehen, damit der Zeilenanfang vom Auge gut gefunden werden kann. Zentriert oder rechts ausgerichteter Text wird vor allem dann unleserlich, wenn der Text länger wird.

Sollte ein geschlossener Zeilenfall als Stilmittel für eine Webseite eingesetzt werden, dann muss auf der Grundlage der WCAG 2.0 Extern, englischsprachig: eine alternative Darstellung eingesetzt werden, der z.B. aus text-align:justify; ein text-align:left; macht. Denkbar ist auch, dass Browser diese Funktion übernehmen, aber um die Anforderung zu genügen, müssten alle gängigen Browser eine solche Funktion bieten.

Bei dieser Anforderung geht es um die Leserlichkeit, die bei Blocksatz durch die größeren Wortabstände beeinträchtigt wird. Deshalb ist ebenso zur Erfüllung der Anforderung aus der WCAG 2.0 denkbar, dass die Silbentrennung Abhilfe schaffen kann. Nur: häufige Worttrennungen können sowohl den Lesefluss als auch die Verständlichkeit beeinträchtigen.

Bedingte Trennstriche auf Webseiten

Wenn Blocksatz als Stilmittel eingesetzt wird, dann ist der Einsatz einer Silbentrennung auch im Web sinnvoll. Die Silbentrennung kommt aber auch in anderen Situationen in Frage:

Silbentrennung in HTML

HTML 4.01 hat bereits bedingte Trennstriche vorgesehen, die Entity ­. Internet Explorer seit Version 5, Safari ab Version 2, Opera ab Version 7.1 und Firefox ab Version 3 unterstützen bedingte Trennstriche in HTML.

Ein wesentlicher Nachteil dieser bedingten Trennstriche ist, dass sie im HTML-Code stehen müssen. Ein manuelles Einfügen der Sonderzeichen im Text ist in Einzelfällen denkbar, aber eine Automatisierung mit Extern: PHP oder Extern: JavaScript ist — auf den ersten Blick — sinnvoller.

Die Silbentrennung mit ­ ist in konkreten Situationen am Bildschirm oder beim Drucken interessant, aber nicht zum Beispiel wenn Webseiten mit einer Sprachausgabe gelesen werden. Browser wie Extern: Safari oder Internet Explorer in Verbindung mit Screenreadern zeigen sämtliche Worttrennungen an, d.h. in Sprachausgaben werden alle Silben einzeln ausgesprochen. In Firefox (aktuelle Version 9) werden nicht benötigte Trennstriche (­) auch nicht angezeigt.

Darstellung der Silbentrennung in einem Editor: Worte sind durch zahlreiche Trennstriche zerrupft Wenn ­ eingesetzt wird, dann sollte das nur in "Notfällen" sein

Der bedingte Trennstrich ist darüber hinaus ein Aspekt der visuellen Präsentation und hat deswegen nichts im Text verloren, sondern die Silbentrennung gehört ins CSS. Zugegebenermaßen wird das erst mit CSS3 möglich sein, aber Firefox ab Version 6 und Safari 5 unterstützen die Eigenschaft hyphens bereits.

Browser übernehmen die Verantwortung

Die CSS3-Eigenschaft Extern: hyphens erlaubt es, bedingte Trennstriche vom Browser vornehmen zu lassen. Die Unterstützung in Browsern ist jedoch nicht vollständig. Bis dato können Safari und Firefox deutschsprachige Wörter bei Bedarf trennen.

Browser besitzen mittlerweile eingebaute Wörterbücher mit Daten zur Silbenaufteilung. Somit können sie Worttrennungen genauso wie eine Textverarbeitung vornehmen, vorausgesetzt der Browser kann die Sprache der Inhalte mit den sprachspezifischen Wörterbüchern korrelieren. Notwendig für die Anwendung von hyphens sind Sprachangaben (lang-Attribute) für Texte und (noch) Extern, englischsprachig: Browser-Präfixe für die CSS3-Eigenschaft:

.schmaleSpalte {
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -khtml-hyphens: auto;
  hyphens: auto;
}

Da Screenreader CSS-Eigenschaften meist ignorieren, was auch für die Eigenschaft hyphens gilt, werden sich Worttrennungen per CSS nicht störend auf den Lesefluss im Screenreader auswirken.

Schlussfolgerungen

Für beide Ansätze — ob mit der HTML-Entity ­ oder mit der CSS-Eigenschaft hyphens — gilt:

Wenn Silbentrennungen eingesetzt werden, dann sollten die CSS-Eigenschaften bevorzugt werden, auch wenn sämtliche Browser die Darstellungsmöglichkeiten entweder unvollständig oder gar nicht unterstützen. Das Zerteilen von Texten mit der HTML-Entity ­ führt in Screenreadern — und vermutlich auch in Suchmaschinen — zu suboptimal verwertbaren Inhalten.