Barrierefrei-Menü

Ab Weblication® CMS Version 19 kann auf Grundlage eines BASE (Mobile First) Projektes ein Barrierefrei-Menü genutzt werden.

Kopfbereich mit Icon für Aufruf des Barrierefrei-Menü
Kopfbereich mit Icon für Aufruf des Barrierefrei-Menü

Aktuelle Projekten liefern hierzu die erforderlichen Dateien bereits mit. Bei Nutzung des Kopfbereiches über den Struktureditor kann das Menü komfortabel über den Kopfbereich aktiviert werden.

Sofern ein Projekt den Kopfbereich über CSS definiert hat, installieren Sie das Weblic® "Barrierefrei-Menü", welches die erforderlichen Dateien enthält, um das Barrierefrei-Menü auch im nachhinein in Seiten einbinden zu können. Mit dem Weblic® wird auch die default.wHeader.php mitgeliefert. In dieser wird zum einen für die vorangestellte Kopfleiste und zum anderen für den Kopfbereich der erforderliche Code eingebunden. Aktiviert werden kann dies über eine CSS-Variable, welche im Standard in der header.scss wie folgt definiert ist (siehe CSS-Beispiel unten).
Bevor Sie beim Weblic® Update vorhandene Templates überschreiben, legen Sie sicherheitshalber ein Backup an bzw. gleichen Sie über die Änderungsanzeige die betroffenen Dateien ab. Individuelle Anpassungen können Sie dann bei Bedarf wieder nachziehen.


Auszug aus der header.scss mit $displayWaiMenu Variable

/* Barrierefrei Menü */
$displayWaiMenu:no; /* Barrierefrei Menü anzeigen [no(Nein)|pre(Ja, in der vorangestellten Kopfleiste)|yes(Ja, im Kopfbereich)] canReduce="1" reduceType="conditionsOnly"*/

Wenn Sie den Aufruf für das Barrierefrei-Menü manuell integrieren wollen (z.B. in der default.wHeader.php), können Sie den Aufruf, wie im Standard genutzt, selber an gewünschter Stelle wie folgt einfügen:

Einbinden des Barrierefrei-Menü über WSL

<wsl:php>
wPageCur::registerCss(wProjectCur::getPathLayout().'/wGlobal/layout/styles/header/headerElementWaiMenu.scss');

$itemData = array(
'title' =&gt; '',
'layout' =&gt; '0',
'selectionFontSize' =&gt; '1',
'selectionContrast' =&gt; '1',
'selectionContrastType' =&gt; '',
'selectionDarkmode' =&gt; '1',
'selectionDarkmodeType' =&gt; 'js',
'selectionViewmodeWai' =&gt; '1',
'selectionEasyLanguageMode' =&gt; '1',
'selectionHideImages' =&gt; '1',
'pageReader' =&gt; '1',
);

$itemOptions = array('includeGlobalsProject' =&gt; true);
print
wWeblic::renderItemData(wProjectCur::getPathLayout().'/wGlobal/layout/templates/items/header/header.waiMenu.wItem.php', $itemData, $itemOptions);
</
wsl:php>

Die Position des Icons zum Aufruf des Barrierefrei-Menüs nehmen Sie individuell über CSS vor.

Das kann je nach Konstellation z.B. wie folgt aussehen:

Beispiel für eine CSS-Definition zur Positionierung des DIV-Containers zum Icon (optional)

.headerElementWaiMenu {
float:right;
}