Vorlesefunktion für Seitentexte nutzen

Nutzbar ab: Version

Veröffentlichungsdatum: 08. Januar 2018
Änderungsdatum: 28. August 2020

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.