Wie können Besucher in Weblication® eine benutzerabhängige alternative Darstellung auswählen?

In Weblication® können Webseitenbesucher ihre präferierte Darstellung (z.B. für Barrierefreiheit / Web Accessibility) selbst wählen. Dafür kann eine alternative CSS-Datei eingebunden werden, die Inhalte z.B. mit anderer Schriftgröße oder sogar in einem völlig anderen Design darstellt. Ein typischer Einsatz ist eine „Textansicht“ für Besucher mit eingeschränkten Möglichkeiten (z.B. Sehbehinderung).

Kann neben Schrift- auch eine Kontrastanpassung bereitgestellt werden?

Ja. Neben der Schriftgrößenanpassung bietet das Projekt die Möglichkeit, auch eine Kontrastanpassung zu installieren und einzubinden.

Wie wurde eine alternative CSS-Ansicht früher (manuell) umgesetzt?

Manuell wurde typischerweise über die globale pre.php nach einem GET-Parameter (Beispiel: accessible) abgefragt und abhängig davon eine Session-Variable gesetzt. Anschließend werden bei gesetzter Session-Variable alternative CSS-Dateien registriert, z.B. accessible.css, wodurch die Seite dann z.B. eine andere Schriftgröße erhält.

Wie kann die globale pre.php um eine Abfrage auf den GET-Parameter accessible erweitert werden?

Fügen Sie in der globalen pre.php nach dem Include zum Weblication® Framework eine Abfrage auf den GET-Parameter hinzu (z.B. accessible). Wenn der Wert nicht leer ist, setzen Sie ihn in der Session. Danach prüfen Sie die Session und registrieren abhängig davon alternative CSS-Dateien (z.B. design.css und accessible.css). Beispiel (vereinfacht): if(wRequest::getParameter('accessible') != '') { wSession::setValue('accessible', wRequest::getParameter('accessible')); } und bei wSession::getValue('accessible') == '1' CSS-Dateien registrieren.

Welche CSS-Datei wird in der Beispiel-Umsetzung für die Textansicht verwendet?

In der Beispiel-Umsetzung wird bei aktivierter Textansicht u.a. eine Datei wie accessible.css registriert. Diese CSS-Datei steuert dann die alternative Ausgabe, z.B. eine andere Schriftgröße im body.

Wie können Sie den Umschalter zwischen Standardansicht und Textansicht in der Seite bereitstellen?

Damit Seitenbesucher die Ansicht wechseln können, müssen Sie im Projekt eine Möglichkeit zum Umschalten anbieten. Das kann z.B. in der Metanavigation umgesetzt werden: In einem Navigationstemplate wird abhängig vom Session-Wert accessible ein Link ausgegeben, der entweder zur Standardansicht (?accessible=0) oder zur Textansicht (?accessible=1) führt.

Warum muss bei einem Ansichtsswitch der Seiten-Cache berücksichtigt werden?

Weil sonst möglicherweise eine gecachte Seitenvariante unabhängig von der gewählten Ansicht ausgeliefert wird. Bei einem Ansichtsswitch sollte daher die Cache-Logik so erweitert werden, dass die Cache-Variante zur Session-Auswahl passt.

Wie kann die Cache-Variante für die Ansicht in aktuellen Versionen gesetzt werden?

In aktuellen Versionen gibt es in der globalen Projektbasis bereits einen standardmäßig auskommentierten Eintrag für Cache-Varianten. Setzen Sie die Variable in der pre.php so, dass sie den Session-Wert der Ansicht widerspiegelt, z.B. preVars['cacheVariant'] = wSession::getValue('accessible');.

Muss auch die Gültigkeitsdauer der Metanavigation beim Umschalten berücksichtigt werden?

Ja. Wenn der Ansichtsswitch über das Navigationstemplate der Metanavigation gesetzt wird, muss die Gültigkeitsdauer (expires) der Metanavigation berücksichtigt werden. In vielen Fällen können Sie den expires-Wert beim Navigationsaufruf (wsl:navigation) entfernen, da häufig nur wenige Navigationspunkte ausgegeben werden.

Sind solche Funktionen für Menschen mit Einschränkungen heutzutage noch zwingend notwendig?

Das Dokument weist darauf hin, dass Personen mit Einschränkungen häufig passende Bordmittel und Hilfsmittel nutzen. Daher sind sie oft nicht mehr ausschließlich auf direkt in der Webseite angebotene Funktionen angewiesen, weil eigene Hilfsmittel individuell auf die Situation zugeschnitten sind.

Welche Standardmöglichkeiten bietet Weblication® CMS für barrierearme Inhalte?

Mit Weblication® CMS verfügen Sie über weitreichende Möglichkeiten, Seiteninhalte bereits im Standard passend für unterschiedliche Nutzergruppen umzusetzen, z.B. durch geeignete Strukturierung der Seiten über CSS und den Einsatz von Überschriften.

Alternative Darstellung der Webseite: CSS benutzerabhängig nutzen

Startseite

Veröffentlichungsdatum: 08. November 2019
Änderungsdatum: 28. Mai 2021

weblication cms css darstellung barrierefrei barrierefreiheit barrierearm web accessibility behinderung behindert textansicht grafikansicht

In Weblication® können Webseitenbesucher ihre präferierte Darstellung (z.B. wegen Thema Barrierefreiheit / Web Accessibility) selbst wählen.

So können Sie benutzerabhängig eine alternative CSS-Datei einbinden, die Inhalte in einer anderen Schriftgröße oder Seiten sogar in einem völlig anderen Design darstellt. Ein möglicher Einsatz ist eine spezielle Textansicht für Seitenbesucher mit eingeschränkten Möglichkeiten (z.B. einer Sehbehinderung o.ä.).

In aktuellster BASE Classic Projektbasis (ab CMS-Version 10.x) können Sie bereits im Standard über den Layoutwizard eine Schriftgrößenanpassung aktivieren. Diese ist über die die design.css und JavaScript (ui.js) umgesetzt.
Das BASE (Mobile First) Projekt liefert zudem die Möglichkeit, neben einer Schriftgrößenanpassung auch eine Kontrastanpassung als Weblic® zu installieren und einzubinden.

Nachfolgend finden Sie eine Möglichkeit beschrieben, welche zuvor schon durch manuelle Erweiterung genutzt werden konnte. Beachten Sie hierzu, daß diese Umsetzung für einfache Umsetzungen greift, nicht aber generell in z.B. Mobile First Projekten alle SASS-Funktionen bereitstellen kann. Dazu sollten Sie als Basis für die Umsetzung, wie im Artikel "Unterschiedliche CSS-Definitionen nutzen" beschrieben vorgehen.

Über PHP-Framework Funktionen können Sie solch eine Funktion sehr einfach umsetzen.

Fügen Sie der globalen pre.php (z.B. /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/pre.php) nach dem Include zum Weblication^® Framework die Abfrage auf einen Get-Parameter (im Beispiel: accessible) hinzu. Wenn der Wert nicht leer ist, setzen Sie den Wert für die Session. Diesen Wert fragen Sie danach ab und lesen abhängig davon eine andere CSS-Datei (im Beispiel: accessible.css) ein. Über diese CSS-Datei steuern Sie die alternative Ausgabe und definieren dort z.B. eine andere Schriftgrösse für den Body, etc.

Beispiel: Erweiterung der globalen Projekt pre.php um die Abfrage

// ...
  // Hier wird das Weblication Framework eingebunden
  include($_SERVER['DOCUMENT_ROOT'].'/weblication/grid.php');  

  // Falls die Textversion gewählt wird:
   if(wRequest::getParameter('accessible') != ''){
     wSession::setValue('accessible', wRequest::getParameter('accessible'));
   }
   if(wSession::getValue('accessible') == '1'){
     // Registrieren der CSS-Datei/en) - (Pfade an individuelle Projektpfade anpassen!) 
     wPageCur::registerCss('/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css');
     wPageCur::registerCss('/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/accessible.css');
   }
// ...

Passen Sie die Pfade im o.g. Quelltextbeispiel an Ihre Projektpfade an (/[IHR-LAYOUT-PROJEKT]/ z.B. in /de-wGlobal/ bzw. den bei Ihnen existierenden Projektpfad des Globalprojektes)!

Damit die Ansicht vom Seitenbesucher gewechselt werden kann, müssen Sie in Ihrem Projekt eine Möglichkeit des Umschaltens anbieten. Dies können Sie z.B. in der Metanavigation vornehmen:

Beispiel: Erweiterung des Navigationstemplates der Metanavigation mit Link zum Ansichtsswitch

...
  <template match="/wNavigation">
    <ul>     
      <!-- Hier steht später die generierte Navigation -->
      <apply-templates select="/wNavigation/navPoint"/>
      <!-- Erweiterung um den Ansichtsswitch (Anfang) -->
      <choose>
        <when test="php:functionString('wSession::getValue', 'accessible') = '1'">
          <li><a class="navLevel1" href="?accessible=0">Standardansicht</a></li>  
        </when>
        <otherwise>
          <li><a class="navLevel1" href="?accessible=1">Textansicht</a></li>        
        </otherwise>
      </choose>
      <!-- Erweiterung um den Ansichtsswitch (Ende) -->
    </ul>
  </template>
...

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/accessible.css

/*
////////////////////////////////////////////////////////////////
//
// Styles für alternative Ansicht
//
////////////////////////////////////////////////////////////////
*/

body                                       {font-family:Times New Roman;font-size:17px;color:#000000;}

/* Weitere Formatierungen für eine alternative Ansicht können Sie hier setzen: */

Seiten-Cache berücksichtigen

Der Datei-Cache der Webseiten muß bei einem Ansichtsswitch auch berücksichtigt werden. Hierzu liefert die BASE in aktuellen Versionen bereits einen standardmäßig auskommentierten Eintrag in der pre.php des globalen Projektes. Beschrieben finden Sie diese Möglichkeit, um Cache-Varianten zu nutzen im Entwicklerblog.

Setzen Sie die Variable in diesem Beispiel wie folgt in der pre.php:

Beispiel: Setzen der preVar in der pre.php für die Cache-Variante(n)

// Diese Zeile ist in aktuellen Versionen der BASE bereits vordefiniert, aber auskommentiert!

// Mit dieser Variable können Sie Cache-Varianten nutzen
$preVars['cacheVariant'] = wSession::getValue('accessible');

Sofern der Ansichtsswitch gem. diesem Beispiel über das Navigationstemplate der Metanavigation gesetzt ist, müssen Sie auch die Gültigkeitsdauer der Metanavigation berücksichtigen. In den meisten Fällen werden über die Metanavigation nur wenige Navigationspunkte ausgegeben, weshalb der expires-Wert im Navigationsaufruf (wsl:navigation) entfernt werden kann.

Bedenken Sie, daß heutzutage Personen mit Einschränkungen meist passende Bordmittel zur Verfügung haben. Diese Personen sind daher oft nicht mehr auf Hilfsmittel angewiesen, welche über Funktionen direkt in der Webseite angeboten werden, da die eigenen Hilfsmittel individueller auf die jeweilige Situation zugeschnitten sind.
Mit Weblication® CMS verfügen Sie über weitreichende Möglichkeiten, die Seiteninhalte bereits im Standard passend für unterschiedlichste Nutzerkreise (z.B. auch Personen mit Einschränkungen) umzusetzen (Strukturierung der Seiten über CSS, mit Überschriften, etc., etc.).

Weiterführende Links

PHP-Framework Funktion - wRequest::getParameter

PHP-Framework Funktion - wSession::setValue

PHP-Framework Funktion - wSession::getValue

PHP-Framework Funktion - wPageCur::registerCss

DevBlog - Cache Varianten nutzen

Blog-Beitrag: Barrierefreie Websites mit Weblication® CMS

FAQs are only visible for Weblication ai search and editors!

Wie können Besucher in Weblication® eine benutzerabhängige alternative Darstellung auswählen?: In Weblication® können Webseitenbesucher ihre präferierte Darstellung (z.B. für Barrierefreiheit / Web Accessibility) selbst wählen. Dafür kann eine alternative CSS-Datei eingebunden werden, die Inhalte z.B. mit anderer Schriftgröße oder sogar in einem völlig anderen Design darstellt. Ein typischer Einsatz ist eine „Textansicht“ für Besucher mit eingeschränkten Möglichkeiten (z.B. Sehbehinderung).
Welche Standard-Funktion gibt es in aktuellen Projektbasen zur Schriftgrößenanpassung?: In der aktuellsten Projektbasis (ab CMS-Version 10.x) können Sie bereits im Standard über den Layoutwizard eine Schriftgrößenanpassung aktivieren. Diese wird über die CSS-Datei <code class="codeInline">design.css</code> und JavaScript (<code class="codeInline">ui.js</code>) umgesetzt.
Kann neben Schrift- auch eine Kontrastanpassung bereitgestellt werden?: Ja. Neben der Schriftgrößenanpassung bietet das Projekt die Möglichkeit, auch eine Kontrastanpassung zu installieren und einzubinden.
Wie wurde eine alternative CSS-Ansicht früher (manuell) umgesetzt?: Manuell wurde typischerweise über die globale <code class="codeInline">pre.php</code> nach einem GET-Parameter (Beispiel: <code class="codeInline">accessible</code>) abgefragt und abhängig davon eine Session-Variable gesetzt. Anschließend werden bei gesetzter Session-Variable alternative CSS-Dateien registriert, z.B. <code class="codeInline">accessible.css</code>, wodurch die Seite dann z.B. eine andere Schriftgröße erhält.
Wie kann die globale <code class="codeInline">pre.php</code> um eine Abfrage auf den GET-Parameter <code class="codeInline">accessible</code> erweitert werden?: Fügen Sie in der globalen <code class="codeInline">pre.php</code> nach dem Include zum Weblication® Framework eine Abfrage auf den GET-Parameter hinzu (z.B. <code class="codeInline">accessible</code>). Wenn der Wert nicht leer ist, setzen Sie ihn in der Session. Danach prüfen Sie die Session und registrieren abhängig davon alternative CSS-Dateien (z.B. <code class="codeInline">design.css</code> und <code class="codeInline">accessible.css</code>). Beispiel (vereinfacht): <code class="codeInline">if(wRequest::getParameter('accessible') != '') { wSession::setValue('accessible', wRequest::getParameter('accessible')); }</code> und bei <code class="codeInline">wSession::getValue('accessible') == '1'</code> CSS-Dateien registrieren.
Welche CSS-Datei wird in der Beispiel-Umsetzung für die Textansicht verwendet?: In der Beispiel-Umsetzung wird bei aktivierter Textansicht u.a. eine Datei wie <code class="codeInline">accessible.css</code> registriert. Diese CSS-Datei steuert dann die alternative Ausgabe, z.B. eine andere Schriftgröße im <code class="codeInline">body</code>.
Wie können Sie den Umschalter zwischen Standardansicht und Textansicht in der Seite bereitstellen?: Damit Seitenbesucher die Ansicht wechseln können, müssen Sie im Projekt eine Möglichkeit zum Umschalten anbieten. Das kann z.B. in der Metanavigation umgesetzt werden: In einem Navigationstemplate wird abhängig vom Session-Wert <code class="codeInline">accessible</code> ein Link ausgegeben, der entweder zur Standardansicht (<code class="codeInline">?accessible=0</code>) oder zur Textansicht (<code class="codeInline">?accessible=1</code>) führt.
Warum muss bei einem Ansichtsswitch der Seiten-Cache berücksichtigt werden?: Weil sonst möglicherweise eine gecachte Seitenvariante unabhängig von der gewählten Ansicht ausgeliefert wird. Bei einem Ansichtsswitch sollte daher die Cache-Logik so erweitert werden, dass die Cache-Variante zur Session-Auswahl passt.
Wie kann die Cache-Variante für die Ansicht in aktuellen Versionen gesetzt werden?: In aktuellen Versionen gibt es in der globalen Projektbasis bereits einen standardmäßig auskommentierten Eintrag für Cache-Varianten. Setzen Sie die Variable in der <code class="codeInline">pre.php</code> so, dass sie den Session-Wert der Ansicht widerspiegelt, z.B. <code class="codeInline">preVars['cacheVariant'] = wSession::getValue('accessible');</code>.
Muss auch die Gültigkeitsdauer der Metanavigation beim Umschalten berücksichtigt werden?: Ja. Wenn der Ansichtsswitch über das Navigationstemplate der Metanavigation gesetzt wird, muss die Gültigkeitsdauer (expires) der Metanavigation berücksichtigt werden. In vielen Fällen können Sie den <code class="codeInline">expires</code>-Wert beim Navigationsaufruf (<code class="codeInline">wsl:navigation</code>) entfernen, da häufig nur wenige Navigationspunkte ausgegeben werden.
Sind solche Funktionen für Menschen mit Einschränkungen heutzutage noch zwingend notwendig?: Das Dokument weist darauf hin, dass Personen mit Einschränkungen häufig passende Bordmittel und Hilfsmittel nutzen. Daher sind sie oft nicht mehr ausschließlich auf direkt in der Webseite angebotene Funktionen angewiesen, weil eigene Hilfsmittel individuell auf die Situation zugeschnitten sind.
Welche Standardmöglichkeiten bietet Weblication® CMS für barrierearme Inhalte?: Mit Weblication® CMS verfügen Sie über weitreichende Möglichkeiten, Seiteninhalte bereits im Standard passend für unterschiedliche Nutzergruppen umzusetzen, z.B. durch geeignete Strukturierung der Seiten über CSS und den Einsatz von Überschriften.