Vorlesefunktion für Seitentexte nutzen

Nutzbar ab: Version 12.x

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.

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: ';}

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: ';}

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

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

Mobile First BASE: 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: ';
} 

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG