NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grünes isometrisches Buch mit Schallwellen und Lautsprecher

Was ist Text to Speech?

Text to Speech (TTS), auf Deutsch Sprachausgabe oder Sprachsynthese, wandelt geschriebenen Text in gesprochene Sprache um. Die Technik steckt in Screenreadern, Vorlesefunktionen von Browsern und Betriebssystemen, Navigationsgeräten und Sprachassistenten.

Für die Barrierefreiheit ist TTS eine der wichtigsten Technologien überhaupt. Blinde Menschen hören Websites über Screenreader wie NVDA, JAWS oder VoiceOver. Menschen mit Leseschwierigkeiten, Legasthenie oder geringen Deutschkenntnissen lassen sich Texte vorlesen, um sie besser zu verstehen.

Der wichtigste Punkt für Website Betreiber: Ihr müsst TTS nicht selbst einbauen. Die Nutzer bringen ihre Sprachausgabe mit. Eure Aufgabe ist, dass eure Seite gut vorgelesen werden kann. Das hängt an semantischem HTML, korrekten Sprachangaben und sauberen Alternativtexten.

Inhalt

Sprachausgabe prüfen und bauen mit NCA

Bei TTS arbeiten wir auf zwei Ebenen. Erstens sorgen wir dafür, dass Websites für Screenreader und Vorlesefunktionen gut funktionieren. Zweitens beschäftigen wir uns mit KI Sprachmodellen, die wir lokal mit Ollama oder auf eigenen Servern in Deutschland einordnen und testen. So bleiben Texte und Stimmen dort, wo sie hingehören.

Damit Screenreader eure Seite sauber vorlesen, hören wir die wichtigsten Strecken mit NVDA und VoiceOver durch und korrigieren, was falsch oder gar nicht angesagt wird. Wo ein eigener Vorlese Button sinnvoll ist, bauen wir ihn ohne externen Dienst. Für Menschen mit Leseschwierigkeiten verbinden wir Sprachausgabe mit Leichter und Einfacher Sprache. Die technische Basis bilden semantisches HTML und gute Alternativtexte. Die Hörprüfung ist Teil unseres Accessibility Audit nach WCAG 2.2.

Lass uns sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Screenreader, Vorlesefunktion, Vorlese Plugin: Wo TTS im Web steckt

TTS begegnet Nutzern im Web in drei Formen. Sie unterscheiden sich stark darin, wer sie steuert und was sie für die Barrierefreiheit leisten.

  • Screenreader: NVDA, JAWS, VoiceOver oder TalkBack lesen nicht nur Text vor, sondern die komplette Struktur. Nutzer springen per Taste zwischen Überschriften, Links, Formularfeldern und Landmarks. Das ist die wichtigste Form von TTS für blinde Menschen.
  • Eingebaute Vorlesefunktionen: Browser wie Edge, Safari oder Firefox im Lesemodus und die Betriebssysteme bringen Vorlesefunktionen mit. Sie richten sich an sehende Menschen mit Leseschwierigkeiten.
  • Vorlese Plugins auf der Website: Ein Button, der den Artikel vorliest. Das ist ein nettes Extra, aber kein Ersatz für eine Seite, die mit Screenreadern funktioniert.

Ein häufiges Missverständnis: Ein Vorlese Button macht eine Website nicht barrierefrei. Blinde Nutzer haben ihren Screenreader immer dabei und finden einen solchen Button oft gar nicht. Wirkung entfaltet TTS nur, wenn die Seite selbst sauber gebaut ist.

Was eine Website für gute Sprachausgabe braucht

Eine Sprachausgabe kann nur vorlesen, was im Code steht. Fehlt dort etwas, fehlt es auch in der Ansage. Die wichtigsten Punkte:

  • Sprache der Seite (WCAG 3.1.1): Das Attribut lang="de" am html Element sorgt dafür, dass die deutsche Stimme mit deutscher Aussprache liest. Ohne diese Angabe liest ein englisch eingestellter Screenreader deutschen Text mit englischer Aussprache.
  • Sprachwechsel (WCAG 3.1.2): Englische Zitate oder Begriffe in einem deutschen Text bekommen ein eigenes lang="en".
  • Alternativtexte: Bilder ohne Alt Text werden als Dateiname vorgelesen oder übersprungen.
  • Linktexte: Zehnmal hier klicken hintereinander ist in der Linkliste eines Screenreaders wertlos.
  • Struktur: Überschriften, Listen und Tabellen werden angesagt und machen lange Texte navigierbar.
  • Abkürzungen und Zahlen: Schreibweisen wie z.B. oder Datumsformate werden unterschiedlich gut vorgelesen. Ausgeschriebene Formen sind oft robuster.

Vom vorlesbaren Text zur eigenen Stimme

Nicht jede Website braucht eine eigene TTS Lösung. Die ersten beiden Stufen sind Pflicht, die oberen beiden ein Zusatzangebot mit klarem Einsatzzweck.

Sprachausgabe Stufen und passende Werkzeuge

Level Was umgesetzt ist Werkzeuge
1 Vorlesbar Semantisches HTML, lang Attribut, Alt Texte, sprechende Linktexte HTML, axe DevTools, Lighthouse
2 Screenreader getestet Kernstrecken mit echten Screenreadern geprüft und Fehler behoben NVDA mit Firefox, VoiceOver mit Safari
3 Vorlesefunktion Eigener Vorlese Button für lange Artikel mit der Stimme des Browsers Web Speech API, speechSynthesis
4 Eigene Stimme Vorab erzeugte Audiofassungen oder Live Sprachausgabe mit KI Modell Offene TTS Modelle lokal oder auf eigenen Servern

Vorlesefunktion selbst bauen: Die Web Speech API

Wer einen eigenen Vorlese Button anbieten will, braucht dafür keinen externen Dienst. Alle modernen Browser bringen mit speechSynthesis eine eingebaute Sprachausgabe mit. Der Text verlässt dabei nicht den Rechner des Nutzers.

Code: 
          
<button type="button" id="read-aloud">Artikel vorlesen</button>
Code: 
          
const button = document.querySelector('#read-aloud');
const article = document.querySelector('article');

button.addEventListener('click', () => {
  if (speechSynthesis.speaking) {
    speechSynthesis.cancel();
    button.textContent = 'Artikel vorlesen';
    return;
  }

  const utterance = new SpeechSynthesisUtterance(article.innerText);
  utterance.lang = 'de-DE';
  utterance.rate = 1;
  utterance.onend = () => (button.textContent = 'Artikel vorlesen');

  speechSynthesis.speak(utterance);
  button.textContent = 'Vorlesen stoppen';
});

Worauf ihr achten solltet:

  • Der Button ist ein echter button, per Tastatur erreichbar und klar beschriftet
  • Nutzer können die Ausgabe jederzeit stoppen
  • Nichts startet automatisch. Selbststartender Ton stört Screenreader Nutzer massiv und verletzt WCAG 1.4.2
  • Die verfügbaren Stimmen hängen vom Betriebssystem ab und klingen unterschiedlich gut

KI Sprachausgabe 2026: Offene Modelle und Datenschutz

Die Qualität künstlicher Stimmen hat sich in kurzer Zeit stark verbessert. Moderne neuronale TTS Modelle betonen natürlich, machen Pausen an den richtigen Stellen und klingen kaum noch nach Maschine. Für Audiofassungen von Artikeln, Lernplattformen oder Sprachassistenten ist das ein großer Schritt.

Ein Beispiel ist Voxtral TTS von Mistral aus Frankreich, erschienen im März 2026. Das Modell hat 4 Milliarden Parameter, unterstützt neun Sprachen, darunter Deutsch, und steht als Open Weights unter der Lizenz CC BY NC zur Verfügung. Für kommerzielle Nutzung gelten also Einschränkungen, die vor dem Einsatz geprüft werden müssen.

Worauf es bei KI TTS ankommt:

  • Datenschutz: Cloud Dienste bekommen den kompletten Text. Bei internen oder personenbezogenen Inhalten ist lokaler Betrieb oder Hosting in Deutschland die sichere Wahl.
  • Lizenz: Open Weights heißt nicht automatisch frei für kommerzielle Projekte.
  • Kennzeichnung: Künstliche Stimmen sollten als solche erkennbar sein. Stimmklone realer Personen nur mit deren Einwilligung.
  • Kein Ersatz: Eine KI Stimme auf der Website ersetzt nicht die Kompatibilität mit Screenreadern.

Was Screenreader und Vorlesefunktionen stolpern lässt

  1. Fehlendes oder falsches lang Attribut. Deutscher Text mit englischer Aussprache ist kaum verständlich.
  2. Vorlese Button als Feigenblatt. Er ersetzt keine barrierefreie Seite und wird von Screenreader Nutzern selten gebraucht.
  3. Automatisch startende Sprachausgabe. Sie überlagert den Screenreader und muss sofort abschaltbar sein.
  4. Text in Bildern. Grafiken mit Schrift ohne Alt Text bleiben stumm.
  5. Versteckte Inhalte falsch versteckt. Inhalte mit display: none werden nicht vorgelesen, Inhalte nur mit opacity: 0 dagegen schon.
  6. Emojis und Sonderzeichen als Deko. Screenreader lesen jedes Emoji mit seinem Namen vor. Zehn Raketen im Titel werden zu zehnmal Rakete.

It is developed by users, for users.

Michael Curran, Mitgründer von NV Access und Entwickler des Screenreaders NVDA – Rede auf der Convention der National Federation of the Blind 2014

Zehn Minuten Screenreader statt langer Theorie

Der beste Test für Sprachausgabe dauert zehn Minuten: Screenreader an, Bildschirm aus, einmal die wichtigste Strecke der Seite durchhören. Danach weiß jedes Team, wo es hakt. Viele Probleme, die dabei auffallen, haben mit Nicht Text Inhalten, einer falschen Lesereihenfolge oder fehlender ARIA Beschriftung von Icons zu tun.

TTS ist die eine Hälfte der Sprachtechnologie. Die andere sind Spracherkennung und Diktieren, mit denen Menschen Websites per Stimme bedienen. Für Videos gilt die Gegenrichtung: gesprochene Inhalte als Text über Untertitel und visuelle Inhalte als Sprache über Audiodeskription.

Einordnen lässt sich das alles über die vier POUR Prinzipien und unseren Überblick zur digitalen Barrierefreiheit. Wer Vorlesefunktionen für Menschen mit Leseschwierigkeiten plant, sollte auch barrierefreie Schriftarten und die Agent Readiness im Blick haben.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu Text to Speech

Screenreader, Vorlese Button oder KI Stimme: was Website Betreiber über Sprachausgabe wissen sollten.

Was ist Text to Speech 2026?

Text to Speech, kurz TTS, wandelt geschriebenen Text in gesprochene Sprache um. Die Technik steckt 2026 in Screenreadern, Vorlesefunktionen von Browsern und Betriebssystemen und in KI Sprachmodellen. Für die Barrierefreiheit ist sie zentral, weil blinde Menschen und Menschen mit Leseschwierigkeiten Websites über Sprachausgabe nutzen.

Muss ich 2026 eine Vorlesefunktion auf meiner Website anbieten?

Nein. Weder WCAG 2.2 noch BFSG verlangen einen eigenen Vorlese Button. Nutzer bringen ihre Sprachausgabe über Screenreader oder das Betriebssystem mit. Pflicht ist, dass eure Seite damit gut funktioniert: semantisches HTML, korrekte Sprachangaben, Alt Texte und eine logische Struktur. Ein Vorlese Button kann ein nützliches Extra sein.

Was ist 2026 der Unterschied zwischen Screenreader und Text to Speech?

Text to Speech ist die Technik, die Text in Sprache umwandelt. Ein Screenreader ist eine Software, die TTS nutzt, aber viel mehr kann. Er liest die komplette Struktur einer Seite, sagt Rollen und Zustände an und erlaubt die Navigation per Tastatur zwischen Überschriften, Links und Formularfeldern. Jeder Screenreader nutzt TTS, aber nicht jede TTS ist ein Screenreader.

Welche Screenreader sind 2026 verbreitet?

Unter Windows vor allem NVDA, der kostenlos und Open Source ist, sowie JAWS. Auf dem Mac und iPhone ist VoiceOver fest eingebaut, auf Android TalkBack. Für Tests empfiehlt sich die Kombination NVDA mit Firefox und VoiceOver mit Safari. Damit deckt ihr einen großen Teil der tatsächlichen Nutzung ab.

Welche offenen TTS Modelle gibt es 2026?

Es gibt inzwischen mehrere offene Sprachmodelle mit hoher Qualität. Ein Beispiel ist Voxtral TTS von Mistral aus Frankreich, erschienen im März 2026, mit 4 Milliarden Parametern und Unterstützung für Deutsch. Es steht unter der Lizenz CC BY NC, kommerzielle Nutzung ist also eingeschränkt. Vor jedem Einsatz lohnt ein Blick in die Lizenz.

Warum ist das lang Attribut so wichtig für TTS?

Die Sprachausgabe wählt Stimme und Aussprache anhand der angegebenen Sprache. Fehlt lang=de am html Element, liest ein englisch eingestellter Screenreader deutschen Text mit englischer Aussprache. Das ist kaum verständlich. WCAG 3.1.1 verlangt deshalb die Angabe der Seitensprache, WCAG 3.1.2 zusätzlich die Kennzeichnung von Sprachwechseln im Text.

Was ist die Web Speech API?

Die Web Speech API ist eine Browser Schnittstelle mit zwei Teilen: speechSynthesis für die Sprachausgabe und SpeechRecognition für die Spracherkennung. Mit speechSynthesis lässt sich ein eigener Vorlese Button in wenigen Zeilen JavaScript bauen. Der Text wird dabei vom Browser mit den Stimmen des Betriebssystems vorgelesen, ohne externen Dienst.

Darf Sprachausgabe automatisch starten?

Nein, das sollte sie nicht. Automatisch startender Ton überlagert die Sprachausgabe von Screenreadern und macht die Seite für blinde Menschen praktisch unbenutzbar. WCAG 1.4.2 verlangt, dass automatisch abgespieltes Audio von mehr als drei Sekunden gestoppt oder in der Lautstärke geregelt werden kann. Besser ist es, Sprachausgabe nur auf Knopfdruck zu starten.

Wie teste ich meine Website mit Text to Speech?

Am besten mit einem echten Screenreader. NVDA ist kostenlos, VoiceOver ist auf jedem Mac eingebaut. Schaltet ihn ein, schaut nicht auf den Bildschirm und geht die wichtigste Strecke der Seite durch. Achtet darauf, ob Bilder, Buttons und Formularfelder sinnvoll angesagt werden und ob die Reihenfolge stimmt.

Sind KI Stimmen datenschutzkonform?

Das hängt vom Betrieb ab. Cloud Dienste bekommen den kompletten Text und oft auch Metadaten. Bei internen oder personenbezogenen Inhalten ist das kritisch. Offene Modelle lassen sich lokal oder auf eigenen Servern in Deutschland betreiben, dann verlassen die Daten nicht die eigene Infrastruktur. Die Lizenz des Modells muss zusätzlich zum Einsatzzweck passen.

Wie werden Emojis von Screenreadern vorgelesen?

Screenreader lesen Emojis mit ihrem Namen vor. Ein Daumen hoch wird zu Daumen hoch Zeichen, drei Herzen hintereinander werden dreimal angesagt. Als Deko in Überschriften oder Buttons stören sie daher schnell. Einzelne Emojis mit Bedeutung sind unproblematisch, Reihen aus Deko Emojis sollte man vermeiden.

Hilft TTS auch Menschen ohne Sehbehinderung?

Ja. Menschen mit Legasthenie, Konzentrationsschwierigkeiten oder geringen Deutschkenntnissen verstehen Texte oft besser, wenn sie sie gleichzeitig hören und lesen. Dazu kommen Situationen wie Autofahren oder Kochen. Gerade in Kombination mit Einfacher Sprache und gut lesbaren Schriften senkt Sprachausgabe die Hürden für viele Nutzer.

Welche Rolle spielt semantisches HTML für TTS?

Eine entscheidende. Die Sprachausgabe kann nur ansagen, was im Code steht. Echte Überschriften werden als Überschriften angesagt, echte Buttons als Schaltflächen, echte Listen mit der Anzahl ihrer Einträge. Ein gestyltes div dagegen wird nur als Text gelesen. Semantisches HTML ist damit die Grundlage für jede gute Sprachausgabe.