Barrierefrei-Menü
Veröffentlichungsdatum: 24. Juni 2024
Änderungsdatum: 10. März 2025
Projektgrundlage: BASE
Ab Weblication® CMS Version 19 kann auf Grundlage eines BASE (Mobile First) Projektes ein Barrierefrei-Menü genutzt werden.
Barrierefrei-Menü nutzen
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.
Bei älteren Projekten muß ggf. auch die standard.wDocument.php um das wslPre:includeXsltItems Tag für subdir="header" ergänzt werden (siehe aktuelle BASE Projektgrundlage).
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:wSecurityAlert>
wPageCur::registerCss(wProjectCur::getPathLayout().'/wGlobal/layout/styles/header/headerElementWaiMenu.scss');
$itemData = array(
'title' => '',
'layout' => '0',
'selectionFontSize' => '1',
'selectionContrast' => '1',
'selectionContrastType' => '',
'selectionDarkmode' => '1',
'selectionDarkmodeType' => 'js',
'selectionViewmodeWai' => '1',
'selectionEasyLanguageMode' => '1',
'selectionHideImages' => '1',
'pageReader' => '1',
);
$itemOptions = array('includeGlobalsProject' => true);
print wWeblic::renderItemData(wProjectCur::getPathLayout().'/wGlobal/layout/templates/items/header/header.waiMenu.wItem.php', $itemData, $itemOptions);
</wsl:wSecurityAlert>
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;
}
Hinweise
Eine Nachrüstung des Barrierefrei-Menüs in älteren Projekten erfordert in der Regel weitergehende Anpassungen in den SCSS-Dateien. Dies stellt eine individuelle Projektdienstleistung dar.
Die aktuelle BASE kann hierfür als funktionierende Grundlage herangezogen werden.
Soll das Barrierefrei-Menü z.B. über die Portalinhalte eingebunden werden, kann dies durch Einfügen des entsprechenden Strukturelementes vorgenommen werden. Sofern das Menü schon im Editor nicht korrekt (ohne Formatierung) angezeigt wird und auch die Darstellungsvarianten nicht gewählt werden können, fehlt im Editor das CSS. Setzen Sie dann einfach in der design.css zusätzlich diesen Import:
@import 'header/*';
Weitere Informationen zum Barrierefrei-Menü
Das Menü unterstützt aktuell folgende Funktionen:
Schriftgröße
Das HTML-Element wird um die Klasse waFontSize-xl ergänzt.
Außerdem wird die Basis-Schriftgröße im HTML-Element erhöht.
Kontrast
Das HTML-Element wird um die Klasse waContrast-l ergänzt.
Über mediaquery Angaben (@media (prefers-contrast:more){}) im CSS können Farben mit ausreichend Kontrast definiert werden.
Dunkelmodus
Das HTML-Element wird um die Klasse waDarkMode-1 ergänzt.
Über mediaquery Angaben (@media (prefers-color-scheme:dark){}) im CSS können die erforderlichen Farben definiert werden, was individuell umzusetzen ist.
Bilder ausblenden
Das HTML-Element wird um die Klasse waHideImages ergänzt.
Bilder werden ausgeblendet und dafür der Alternativtext angezeigt.
Animationen verhindern
Das HTML-Element wird um die Klasse waAvoidAnimations ergänzt.
Anhand dieser Klasse kann individuell definiert werden, was an Animationen gestoppt werden soll.
Beispiel:
Inhaltsbox-Untervariante elementBoxIfVisible_var10
Zudem wird auf Grundlage der Klasse die Einstellung zum Banner-Slider berücksichtigt.
Leichte Sprache
Blendet Textfelder, welche auch in leichter Sprache vorliegen, anstatt dem Standard-Text ein.
Vorlesefunktion
Die Texte der Webseite werden vorgelesen.
Welche Bereiche hierfür herangezogen werden, ist in der reader.scss definiert.