Barrierefreiheit-Widget im Bakehouse
Das Widget wird automatisch geladen, sobald das Modul installiert ist. Sollten Anpassungen an den Attribute-Einstellungen nötig sein bzw. das Widget an einer bestimmten Stelle eingefügt werden, kann der accessibility:widget-ViewHelper verwendet werden.
HTML
{namespace accessibility=Bakehouse\Accessibility\ViewHelpers}
<accessibility:widget position-vertical="bottom" position-mode="fixed" position-horizontal="right"/>
CSS-Klassen fürs Template
Da es Einstellungen im Widget gibt, bei denen alle Hintergrundfarben und Bilder entfernt werden, gibt es hierfür 2 Klassen, die verwendet werden können, um gewisse DOM-Elemente (z.Bsp. Overlays, Checkboxen, Logos etc.) davon auszunehmen.
Die Klasse bh-accessibility-keep-bg sorgt dafür, dass die Hintergrundfarbe nicht entfernt wird, die Klasse bh-accessibility-keep-img verhindert das Ausblenden von Hintergrundbildern sowie img- & video-Tags.
Skip-Links
Für die einfacher und schnellere Einbindung von Skip-Links wird vom Bakehouse der accessibility:skiplinks-ViewHelper bereitgestellt.
HTML
{namespace accessibility=Bakehouse\Accessibility\ViewHelpers}
<accessibility:skiplinks offset-top-element="navbar" />
Die Skip-Links enthalten folgende Punkte:
Content-Anker
Hier können Anker (Scroll-To) IDs hinterlegt werden. Die Texte werden als Translation-Keys hinterlegt. Zusätzlich zum Standardverhalten, kann auch noch mit dem bh-skiplinks-goto-content-JavaScript-Event im Projekt reagiert werden. Im Event kann auch die Core-Funktion durch preventDefault() abgefangen werden.
Standardmäßig sind folgende Anker hinterlegt:
#Header
#Content
#Footer
Damit diese ohne weiteres Zutun funktionieren, einfach den Sections im HTML die entsprechende ID geben.
Falls es auf der Webseite einen fixierten Bereich gibt (Top Bereich, Navigation, etc.) braucht es für das Scrollen zum gewünschten Anker die Höhe dieses Bereichs.
Es kann entweder der CSS-Selector über den Parameter offset-top-element, oder die CSS-Variable über den Paramter offset-top-variable übergeben werden.
Anker können wie folgt erweitert und entfernt werden:
HTML
plugin.tx_bhaccessibility.settings.skiplinks.items {
content {
# 10 - Header
# 20 - Content
# 30 - Footer
40 {
id = MeinAnker
translation-key = skiplinks-text-content-myancor
}
}
# navigation - Navigation
}
Navigation
Da Navigaiton sehr individuell integriert sind, gibt es hier kein Standardverhalten. Es wird hier nur das bh-skiplinks-open-navigation-Event aufgerufen, worauf im Projekt reagiert werden muss.
Javascript
$(document).on('bh-skiplinks-open-navigation', function(){
$('.navbar__menu-toggler').trigger('click');
});
Volltextsuche
Sollte die Bakehouse Suche installiert sein, wird auch automatisch ein Skip-Link hierfür hinzugefügt. Beim Aufruf des Skip-Links wird standardmäßig ein Klick auf die Klasse bh-search-button ausgelöst oder - wenn vorhanden - ein Input mit der Klasse bh-search-input anvisiert. Zusätzlich kann im Projekt mit dem bh-skiplinks-open-search-Event auf den Skip-Link reagiert werden.
Barrierefreiheits-Widget
Dieser Skip-Link öffnet und fokusiert das Barrierefreiheitswidget. Im Projekt kann auch noch individuell auf das bh-skiplinks-open-widget-Event reagiert werden.
Links
Weiters können noch Links hinzugeügt werden. Standardmäßig ist hier ein Link zur Barrierefreiheitserklärung hinterlegt (auf Page-Type). Hier können mit TypoScript weitere Links hinzugefügt werden:
HTML
plugin.tx_bhaccessibility.settings.skiplinks.items.links {
# 10 - Barrierefreiheitserklärung
20 {
link = https://www.bakehouse.at/
translation-key = skiplinks-text-mylink
}
}
Texte anpassen
Die Texte der Standard Skip-Link können mit folgenden Translation-Keys angepasst werden:
| Skip-Link | Translation-Key |
| Header Anker | skiplinks-text-content-header |
| Content Anker | skiplinks-text-content-content |
| Footer Anker | skiplinks-text-content-footer |
| Volltextsuche | skiplinks-text-search |
| Barrierefreiheit-Widget | skiplinks-text-widget |
| Link zu Barrierefreiheitserklärung | skiplinks-text-barrierefreiheitserklaerung |