Alternative Darstellung der Webseite: CSS benutzerabhängig nutzen

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:

...
  <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.).