Silbentrennung auf Webseiten – Schon mal mit Screenreadern getestet?

Die Silbentrennung ist ein Aspekt der Leserlichkeit. Die hyphens-Eigenschaft in CSS erlaubt dafür einen unterschiedlichen Umgang. Die Silbentrennung auf Webseiten kann aber zu Problemen in Sprachausgaben führen. Das liegt an bedingten Trennstrichen (). Der bedingte Trennstrich sollte daher zurückhaltend eingesetzt werden.

Wenn Fließtexte in einem Container nicht auf einer Zeile passen, brechen Browser die Zeile an geeigneter Stelle um. Der Zeilenumbruch erfolgt bei Leerzeichen oder bei Bindestrichen in zusammengesetzten Wörtern. Mit HTML und CSS gibt es eine ganze Reihe Möglichkeiten, dieses Verhalten zu beeinflussen und zu verändern. Zeilenumbrüche können

an beliebiger oder nur an bestimmten Stellen in Wörtern,
mit und ohne Bindestriche und
autorenseitig oder durch den Browser erfolgen.

Hinweis: Die Zeilenumbrüche sind in erster Linie eine visuelle Darstellung. Das gilt auch für Worttrennungen. Die tatsächlichen Zeilenumbrüche werden standardmäßig in Screenreadern nicht erkannt. Daher können einige Beispiele in diesem Beitrag mit Screenreadern beziehungsweise Sprachausgaben nicht vollständig überprüft werden.

Bedingte Trennstriche

Wenn Wörter zu lang, Spalten zu schmal oder Texte im Blocksatz formatiert sind, können Sie eine bedingte Silbentrennung einsetzen. Das Zeichen  markiert Stellen im Text mit einem unsichtbaren Zeichen. Liegt dieses Zeichen am Ende einer Textzeile, kann der Browser einen Zeilenwechsel vornehmen und ein Bindestrich für die Worttrennung einsetzen.
Im nachfolgenden Beispiel kann mit dem Schieberegler die Breite des Containers mit dem Text „Barrierefreiheitsstärkungsgesetz“ verkleinert werden. Wenn der Container zu klein für das Wort ist, wird das Wort an einer bzw. zwei autorenseitig festgelegten Stellen getrennt.

Dieses Verhalten wird durch die CSS-Eigenschaft „hyphens“ ermöglicht. Sie hat den Standardwert „manual“, wodurch bedingte Trennstriche zu einem Zeilenwechsel führen können. Die Eigenschaft kann aber auch auf „none“ (keine Silbentrennung) oder „auto“ (Silbentrennung erfolgt durch den Browser) gesetzt werden.

Andere Worttrennungen

Der Vollständigkeit halber sei an dieser Stelle kurz auf drei weitere Worttrennungen eingegangen. Die Einsatzmöglichkeiten dieser Worttrennungen sind für leserlichen Text durchaus begrenzt.

HTML bietet das wbr-Element an. Das Element stellt eine Wortumbruchmöglichkeit für den Browser dar. Im Gegensatz zum -Zeichen wird bei einer Worttrennung mit dem wbr-Element kein Bindestrich eingefügt. Das wbr-Element kann für eine Silbentrennung nicht genutzt werden, aber beispielsweise für Links, wo keine zusätzlichen Bindestriche erwünscht sein dürften:

Auch mit CSS können mit den word-break- und overlay-wrap-Eigenschaften Worttrennungen vorgenommen werden. Diese Eigenschaften sind ebenso wenig für eine leserliche Silbentrennung geeignet wie das wbr-Element. Beide CSS-Eigenschaften wirken sich unterschiedlich auf die Darstellung aus, wie in den folgenden Beispielen erkennbar:

Wenn Sie diese Deklarationen auf einen Text anwenden, werden Worttrennungen ohne Trennzeichen vorgenommen. Die Eigenschaften unterscheiden sich wie folgt:

Mit der word-break-Eigenschaft werden Wörter ohne Trennzeichen umgebrochen, auch wenn Sie für ein Wort ein bedingter Trennstrich eingesetzt haben.
Mit der overflow-wrap-Eigenschaft versucht der Browser zuerst, Umbrüche anhand von Leerzeichen und bedingten Trennstrichen vorzunehmen, bevor Wörter am Zeilenende umgebrochen werden.

Bedingte Trennstriche in Screenreadern

Der Einsatz des bedingten Trennstrichs () kann zu Problemen in Screenreadern führen. Obwohl die Zeilenwechsel von Screenreadern nicht identifiziert werden, so werden die Zeichen für bedingte Trennstriche von Screenreadern erfasst.

Auch wenn verschiedene Screenreader in verschiedenen Situationen unterschiedlich mit dem unsichtbaren Zeichen umgehen, können sie den bedingten Trennstrich meist als „Strich“ ausgeben, wenn Nutzende wort- oder zeichenweise navigieren. Dadurch werden Texte weniger leserlich. Das Zeichen  sollte daher zurückhaltend eingesetzt werden.

Wenn Nutzende von Sprachausgaben satz- oder absatzweise Texte lesen, ist die Situation anders. Der bedingte Trennstrich wird nicht zwingend ausgegeben, aber er kann dennoch störend wirken:

Mit der Sprachausgabe „Eloquenz“ im Screenreader JAWS 2025 verändert sich die Betonung von Wörtern, die bedingte Trennstriche enthalten. Das Beispiel oben (Barrierefreiheitsstärkungsgesetz“) klingt in der Sprachausgabe von JAWS wie „Barrierefreiheits stärkungs gesetz“, also wie drei einzelne Wörter.
In Voiceover ist dieser Unterschied in der Aussprache nicht bemerkbar.
Im Screenreader NVDA 2024.4.2 hängt die Identifizierung der bedingten Trennstriche von einer Einstellung im Screenreader ab. Wenn in den Einstellungen für Sprachausgabe die Zeichenausführlichkeit von „einige“ auf „meiste“ geändert wird, wird ein Text mit bedingten Trennstrichen nicht mehr leserlich. Die Problematik besteht bei allen verfügbaren Sprachausgaben.

Transkript

Barrierefreiheits Silbentrennzeichen stärkungs Silbentrennzeichen gesetz

Die Probleme, die bedingte Trennstriche in Screenreadern verursachen, müssen den Herstellern von Screenreadern angelastet werden. In VoiceOver ist die Problematik am besten gelöst. Warum NVDA den bedingten Trennstrich als Satzzeichen ausgibt, ist unklar. Der bedingte Trennstrich dient der Steuerung von Format und Layout, nicht der grammatikalischen Strukturierung von Texten, und sollte daher beim Lesen von Texten mit einer Sprachausgabe nicht erfasst werden können.

Die hyphens-Eigenschaft

Die hyphens-Eigenschaft in CSS legt fest, wie Wörter bei mehrzeiligem Text getrennt werden können. Die Eigenschaft kann die Silbentrennung unterdrücken, Wörter an autorenseitig festgelegten Stellen trennen lassen oder die Silbentrennung dem Browser übertragen, der eine Silbentrennung automatisch an geeigneter Stelle einfügt.

hyphens:none;

Wörter werden nicht getrennt, auch wenn Autoren Stellen für eine Silbentrennung innerhalb von Wörtern festgelegt haben. Zeilenumbrüche kommen nur bei Leerzeichen im Text vor.

hyphens:manual; (Standardwert)

Wörter werden getrennt, wenn autorenseitig festgelegte Stellen für Worttrennungen vorhanden sind. Es gibt zwei Zeichen, mit denen Stellen für Worttrennungen gekennzeichnet werden können:

&hyphen; (Bindestrich): Der Bindestrich ist im Text immer sichtbar und dient als möglicher Zeilenwechsel, zum Beispiel in zusammengesetzten Wörtern.
: Mit diesem Zeichen können Autoren eine Stelle für einen möglichen Zeilenumbruch mit Worttrennung festlegen. Dieser bedingte Trennstrich ist zunächst unsichtbar. Nur wenn es an der Stelle zu einer Worttrennung kommt, wird ein Bindestrich am Zeilenende angezeigt.

Der Wert „manual“ ist der Standardwert und muss nicht explizit angegeben werden. Texte ohne eine hyphens-Eigenschaft haben immer diesen Wert.

hyphens:auto;

Browser können Worttrennungen automatisch und nach unterschiedlichen Regeln trennen. Die Regeln für eine Silbentrennung sind abhängig von der Sprache, können aber mit CSS teilweise gesteuert werden. Die Voraussetzungen für eine automatische Silbentrennung sind:

Die automatische Silbentrennung setzt eine Sprachangabe voraus. Auf HTML-Seiten muss das lang-Attribut korrekt angegeben werden. Auf XHTML-Seiten muss das xml:lang-Attribut mit der anzuwendenden Sprache vergeben werden.
Browser unterstützen die Silbentrennung in vielen Sprachen. Eine Übersicht der unterstützten Sprachen finden Sie auf dem Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#browser_compatibility

Wenn bedingte Trennstriche () eingesetzt werden, dann wird die automatische Silbentrennung unterbunden. Autorenseitig festgelegte Stellen für Zeilenumbrüche haben Vorrang vor den vom Browser ermittelten Stellen für eine Worttrennung.

Automatische Silbentrennung

Im folgenden Beispiel gibt es keine bedingten Trennstriche. Die automatische Silbentrennung durch den Browser wird durch das lang=“de“ und das „hyphens:auto;“ ermöglicht.

Das Ergebnis ist nicht identisch mit dem ersten Beispiel mit bedingten Trennstrichen. So kann es passieren, dass lange Wörter vor der letzten Silbe oder an anderer unerwünschten Stelle umbrochen werden. CSS bietet weitere Eigenschaften für die Optimierung von Silbentrennungen. Zwei hilfreiche Eigenschaften sind:

hyphenate-limit-chars: Diese CSS-Eigenschaft gibt die Mindestlänge für Wörter an, auf die eine automatische Silbentrennung angewandt wird, sowie die Mindestanzahl von Zeichen, die vor und nach einer Silbentrennung vorhanden sein müssen.

Die Eigenschaft kann zwischen 1 und 3 Werten annehmen, wobei der erste Wert die Mindestlänge des Worts und die zweiten und dritten Werte für die Zeichen vor bzw. nach einer Worttrennung angeben. Die Standardwerte sind 5, 2 und 2. Um übermäßige Silbentrennung zu vermeiden, müssen sie mit der Mindestwortlänge, Mindestlänge vor und Mindestlänge nach der Silbentrennung arbeiten. Mit hyphenate-limit-chars: auto 3 4; können nur Wörter mit einer Mindestlänge von 7 Zeichen getrennt werden.

Einen idealen Wert für die hyphenate-limit-chars-Eigenschaft wird es nicht geben. Die Silbentrennung kann für unterschiedliche Mengentexte auch unterschiedlich bestimmt werden.
text-wrap: Diese CSS-Eigenschaft erlaubt den Browser, den Textumfluss innerhalb eines Elements zu optimieren (oder abzuschalten). Mit dem Wert „balance“ können Wörter gleichmäßiger auf Zeilen verteilt werden. Der Wert „pretty“ verhindert, dass nur ein Wort auf der letzten Zeile eines Textblocks steht. Die Werte für diese Eigenschaften erfordern Rechenleistung und sollten daher mit Bedacht eingesetzt werden.

Sie werden feststellen, dass automatische Silbentrennung in verschiedenen Browsern unterschiedlich dargestellt wird. Achten Sie bei der automatischen Silbentrennung also darauf, wie das CSS in verschiedenen Browsern greift.

Mit der hyphenate-character-Eigenschaft können Sie im Übrigen auch das Trennzeichen für die Silbentrennung ändern. So könnten Sie beispielsweise einen schrägen Doppelbindestrich („⸗“) einsetzen, sollten Sie eine gebrochene Schrift einsetzen.

Silbentrennung oder nicht?

Das Problem, dass bedingte Trennstriche in Sprachausgaben erkannt und ausgegeben werden, verantworten die Screenreaderhersteller. Auch wenn bedingte Trennstriche in einer Sprachausgabe störend sind, können sie nach den Web Content Accessibility Guidelines (WCAG) 2.2 nicht als Barriere bewertet werden.

Für die visuelle Wahrnehmung kann die Silbentrennung notwendig sein. Der Verzicht auf Silbentrennungen kann bei Texten, die in schmalen Spalten stehen, zu Einschränkungen in der Leserlichkeit führen. Das liegt an langen Wörtern, aber auch an in Blocksatz formatierten Texten. Manche langen Wörter müssen Umbruchmöglichkeiten bekommen, vor allem wenn die Webseiten auf kleinen Displays gelesen werden. Beim Blocksatz sind es die unterschiedlichen Abstände zwischen Wörtern, die die Leserlichkeit einschränken.

Für eine gute Leserlichkeit von Fließtexten ist die Silbentrennung durchaus sinnvoll. Die durchgängige Deaktivierung von Silbentrennung ist nicht die richtige Lösung für die Screenreaderproblematik. Sie sollte jedoch auf Fließtexte beschränkt werden. Sie müssen bestimmen, wo und wann Texte eine Silbentrennung bedürfen, um allen Nutzenden das optimale Erlebnis zu bieten. Der bedingte Trennstrich () sollte nur punktuell eingesetzt werden.

Die automatische Silbentrennung ist vielleicht auch besser als ihr Ruf. Wenn eine automatische Silbentrennung durch den Browser vorgenommen wird, dann werden die Ergebnisse in verschiedenen Browsern aber unterschiedlich aussehen. Es kann passieren, dass in dem einen oder anderen Browser Wörter scheinbar zufällig getrennt oder ein langes Wort nicht getrennt wird. In solchen Fällen ist es dennoch möglich, den bedingten Trennstrich einzusetzen, der den automatisch ermittelten Umbruchmöglichkeiten vorgezogen wird. In jedem Fall stehen weitere CSS-Eigenschaften zur Verfügung, um die Silbentrennung und somit die Leserlichkeit zu verbessern.

Da die Erfordernis nach Silbentrennung vor allem bei Blocksatz auftritt, kann der linksbündiger Flattersatz ebenfalls eine Lösung sein. Der linksbündige Flattersatz benötigt meist keine Silbentrennung, um die Leserlichkeit zu gewährleisten. Bei unterschiedlichen Zeilenlängen und Inhaltsgrößen ist linksbündiger Flattersatz leichter zu lesen als Blocksatz.

Wenn Sie Ihre Fließtexte in breiten Spalten im Blocksatz gestalten, dann ist es wahrscheinlich, dass Sie auf Silbentrennung komplett verzichten können. Wenn die Spalte breit genug ist, dann werden die Abstände zwischen Wörtern gleichmäßiger und leichter zu lesen sein. Natürlich gelingt das umso besser, je weniger lange Worte im Text vorkommen.