Vorlesefunktion für Seitentexte nutzen

Nutzbar ab: Version

Veröffentlichungsdatum: 08. Januar 2018
Änderungsdatum: 27. Juni 2025

weblication cms vorlesefunktion vorlese-funktion vorlesen barrierefrei

Speziell für barrierefreie Seiten steht Ihnen mit der Vorlesefunktion ein wichtiges Instrument zur Verfügung.

Sowohl die BASE Classic als auch Mobile First BASE ermöglichen dies über die ui.js JavaScript-Datei in Verbindung mit CSS. Hierzu muss lediglich die ui.js auf aktuellstem Stand sein und für die Anzeige des Buttons zum Starten/Beenden des Vorlesens im entsprechenden Selektor die Klasse wglReader hinzugefügt werden.

Beide Projekte liefern die entsprechenden CSS-Definitionen mit dem Weblic^® Vorlesefunktion bereits mit und es muss nur die o.g. Klasse an gewünschter Stelle hinzugefügt werden. Es steht mit diesem Weblic^® also kein Strukturelement zum Einfügen über den Struktureditor zur Verfügung, sondern es werden mit dem Weblic^® lediglich die erforderlichen JavaScript- und CSS-Dateien mitgeliefert. Über die unten angeführte CSS-Anweisung wird dann festgelegt, zu welchem Selektor die Vorlesefunktion gesetzt werden soll.

Falls Sie die Vorlesen-Schaltfläche nicht direkt in dem Bereich anzeigen, der vorgelesen werden soll (z.B. an globaler stelle, müssen Sie das Data-Attribut für "readertextpre" trotzdem in dem Element setzen, welches zum Vorlesen definiert ist.

BASE (Mobile First)

BASE Classic

BASE (Mobile First)

BASE (Mobile First): wglReader Klasse allen Seiten hinzufügen (reader.scss)

#blockContentInner {
  
  -w-add-classes:wglReader; 
  -w-add-data:'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor: ';
}

BASE (Mobile First): wglReader Klasse allen Seiten hinzufügen (reader.scss) - Positionierung in NAV-Div, Vorlesen für #blockContentInner

#navigationMain > nav > div {
  
  -w-add-classes:wglReader; 
  -w-add-data:'readertarget=#blockContentInner,readertextpre=Ich lese Ihnen nun vor: ';
  
}

BASE (Mobile First): wglReader Klasse zum Inhaltsbereich für News hinzufügen (reader.scss)

.elementSectionObjectNews > div {
  
  -w-add-classes:wglReader; 
  -w-add-data:'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor: ';
}

BASE Classic

BASE Classic: wglReader Klasse zum Inhaltsbereich hinzufügen (design.css)

.elementSection  {-w-add-classes:wglReader;-w-add-data:'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor: ';}
/* Vorlesen Schaltfläche im Fussbereich ausschliessen, wenn Klasse fussbereich gesetzt ist: */
.elementSection:not(.fussbereich)  {-w-add-classes:wglReader;-w-add-data:'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor: ';}

/* fuer z.B. englische Seiten, wenn diese so im html-Tag gekennzeichnet sind: */
html.lang-en .elementSection  {-w-add-classes:wglReader;-w-add-data:'readertarget=prepend,readertextpre=I will now read to you: ';}

Bei älteren Projekten kann es vorkommen, daß diese noch nicht mit Inhaltsbereichen umgesetzt sind. Definieren Sie das CSS dann entsprechend passend zum Bereich (ggf. #blockContent o.ä.), zu welchem Sie die Vorlesefunktion nutzen wollen.
Alternativ ergänzen Sie zu den Seiten um den Seiteninhalt das Element "Inhaltsbereich".

BASE Classic: wglReader Klasse zum Seiteninhalt für News-Objekte hinzufügen (design.css)

.object-news .blockContentInner {-w-add-classes:wglReader;-w-add-data:'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor: ';}

Die Vorlesefunktion setzt auf der HTML5 Funktion des Browsers / Betriebssystems auf.
Wenn eine Sprachausgabe nicht funktioniert, liegt es daher am verwendeten System selber.
Testen können Sie dies allgemein z.B. über Codepen.io.

Kostenpflichtige Tools wie z.B. ReadSpeaker, etc. haben neben dem reinen Vorlesen meist noch weitere Funktionen, wie z.B. Hervorhebung während des Lesens, Audio Download, etc.
Ob dies für das Projekt erforderlich ist, entscheiden Sie individuell.

Weiterführende Links

Vorlesefunktion einbinden

FAQs

Wozu dient die Vorlesefunktion für Seitentexte?: Die Vorlesefunktion ist ein wichtiges Instrument für barrierefreie Seiten und ermöglicht das Vorlesen von Seitentexten.
Ab welcher Version ist die Vorlesefunktion nutzbar?: Sie ist nutzbar ab einer angegebenen Version (im Dokument als „Nutzbar ab: Version“ beschrieben).
Welche Voraussetzungen müssen erfüllt sein, damit die Vorlesefunktion funktioniert?: Die Vorlesefunktion wird über die ui.js JavaScript-Datei in Verbindung mit CSS realisiert. Dafür muss die ui.js auf dem aktuellsten Stand sein und für die Anzeige des Buttons zum Starten/Beenden des Vorlesens muss die Klasse *wglReader* im passenden Selektor hinzugefügt werden.
Wie wird die Vorlesefunktion mit ui.js und CSS eingebunden?: Durch die Kombination aus *ui.js* und den passenden CSS-Definitionen. Die Projekte liefern bereits die CSS-Definitionen für die Vorlesefunktion mit; anschließend muss nur die Klasse *wglReader* an der gewünschten Stelle ergänzt werden.
Gibt es ein Strukturelement zum Einfügen der Vorlesefunktion?: Nein. Es steht mit dem Projekt kein Strukturelement zum Einfügen über den Struktureditor zur Verfügung. Stattdessen werden die erforderlichen JavaScript- und CSS-Dateien mitgeliefert und die Vorlesefunktion über die CSS-Anweisung gezielt einem Selektor zugeordnet.
Wie wird festgelegt, welcher Textbereich vorgelesen werden soll?: Über eine CSS-Anweisung in Verbindung mit den Data-Attributen, z. B. über <code class="codeInline">-w-add-data</code>, das den Vorlese-Zielbereich (<code class="codeInline">readertarget</code>) sowie den einleitenden Text (<code class="codeInline">readertextpre</code>) definiert.
Welche BASE (Mobile First) Konfiguration ist für den Vorlese-Target am Standard-Content-Bereich vorgesehen?: Für <code class="codeInline">#blockContentInner</code> wird die Klasse <code class="codeInline">wglReader</code> ergänzt und als Data-Attribut gesetzt: <code class="codeInline">readertarget=prepend</code> sowie <code class="codeInline">readertextpre=Ich lese Ihnen nun vor: </code>.
Wie wird die Vorlesefunktion bei BASE (Mobile First) für den Bereich in der Navigation platziert?: Für <code class="codeInline">#navigationMain > nav > div</code> wird die Klasse <code class="codeInline">wglReader</code> ergänzt und als Data-Attribut gesetzt: <code class="codeInline">readertarget=#blockContentInner</code> sowie <code class="codeInline">readertextpre=Ich lese Ihnen nun vor: </code>.
Wie wird die Vorlesefunktion bei BASE (Mobile First) für News-Objekte aktiviert?: Für <code class="codeInline">.elementSectionObjectNews > div</code> wird die Klasse <code class="codeInline">wglReader</code> ergänzt und als Data-Attribut gesetzt: <code class="codeInline">readertarget=prepend</code> sowie <code class="codeInline">readertextpre=Ich lese Ihnen nun vor: </code>.
Welche BASE Classic Einstellungen gelten für die Vorlesefunktion im Seitenbereich?: Für <code class="codeInline">.elementSection</code> wird (in der angegebenen Beispiel-Konfiguration) die Klasse <code class="codeInline">wglReader</code> ergänzt und gesetzt wird: <code class="codeInline">readertarget=prepend</code> sowie <code class="codeInline">readertextpre=Ich lese Ihnen nun vor: </code>. Für den Fußbereich wird die Vorlesefunktion ausgeschlossen, indem <code class="codeInline">.elementSection:not(.fussbereich)</code> entsprechend konfiguriert wird.
Wie wird die Vorlesefunktion für englische Seiten (BASE Classic) vorbereitet?: Über ein Sprach-Tag im HTML, z. B. <code class="codeInline">html.lang-en .elementSection</code>. Dabei wird als <code class="codeInline">readertextpre</code> gesetzt: <code class="codeInline">I will now read to you: </code>.
Was tun, wenn ältere Projekte noch keine Inhaltsbereiche im gewünschten Layout besitzen?: Dann kann es vorkommen, dass noch nicht mit Inhaltsbereichen gearbeitet wird. In diesem Fall muss das CSS entsprechend passend zu dem Bereich definiert werden, zu dem die Vorlesefunktion genutzt werden soll (z. B. <code class="codeInline">#blockContent</code> o. ä.). Alternativ kann ergänzend das Element „Inhaltsbereich“ in die Seiten eingefügt werden.
Wie wird die Vorlesefunktion in BASE Classic für News-Objekte bei älteren Strukturen aktiviert?: Für <code class="codeInline">.object-news .blockContentInner</code> wird die Klasse <code class="codeInline">wglReader</code> ergänzt und als Data-Attribut gesetzt: <code class="codeInline">readertarget=prepend</code> sowie <code class="codeInline">readertextpre=Ich lese Ihnen nun vor: </code>.
Warum funktioniert die Sprachausgabe eventuell nicht?: Die Vorlesefunktion setzt auf die HTML5-Sprachausgabe des Browsers bzw. Betriebssystems auf. Wenn keine Sprachausgabe funktioniert, liegt es daher typischerweise am verwendeten System. Ein allgemeiner Test ist z. B. über die jeweilige Browser-/Systemfunktion zur Sprachausgabe möglich (im Dokument ist ein entsprechender Testlink vorgesehen, der hier nicht konkret ausgeführt ist).
Können kostenpflichtige Tools wie ReadSpeaker zusätzliche Funktionen bieten?: Ja. Kostenpflichtige Tools wie ReadSpeaker können neben dem reinen Vorlesen weitere Funktionen bieten, z. B. Hervorhebung während des Lesens sowie Audio-Download. Ob das für das Projekt erforderlich ist, muss individuell entschieden werden.
Was ist bei der Anzeige der Vorlesen-Schaltfläche zu beachten?: Wenn die Vorlesen-Schaltfläche nicht direkt im Bereich angezeigt wird, der vorgelesen werden soll (z. B. an globaler Stelle), muss das Data-Attribut für <code class="codeInline">readertextpre</code> trotzdem im Element gesetzt werden, das zum Vorlesen definiert ist.