Kann das Eye-Able® Assist Icon auch direkt in die Seite eingebettet werden?
Eye-Able® Assist Icon – Integration und Anpassung
Standardposition:
Standardmäßig ist die Eye-Able® Assistenzsoftware als relativ zum Viewport fixiertes Icon auf einer Webseite eingebunden. Diese präsente Position in Verbindung mit kontrastreichen Icons hat sich in Nutzertests als gut bedienbar, auch bei stark seh-eingeschränkten Nutzern, bewährt.
Alternative Einbettung:
Eye-Able® lässt sich jedoch auch problemlos direkt in die Webseite einbetten. So ist eine Integration in die Navigationsleiste oder andere bestehende Container möglich.
Eigene Schaltflächen für Öffnen und Schließen
Als Alternative zu dem regulären Icon kann ein beliebiges Element auf der Seite als Schalter verwendet werden. Dieses Element wird mit der „Öffnen und Schließen“-Funktion des regulären Icons verknüpft. Das neue Ziel-Element muss dafür selbst erstellt bzw. angepasst werden!
Wichtig:
Um die Verknüpfung herzustellen, muss dem neuen Ziel-Element die CSS-IDeyeAble_customToolOpenerID
hinzugefügt werden.
-
Sobald ein Element mit dieser ID auf der Seite existiert, wird das übliche Logo ausgeblendet und dem Element wird ein entsprechender EventListener hinzugefügt.
-
Die Position der Toolbar bleibt dort, wo sie mit dem regulären Logo wäre.
Mehrere Schalter und weitere Optionen
-
Wenn mehrere Schalter zum Öffnen/Schließen eingebettet werden sollen, kann stattdessen die CSS-Klasse
eyeAble_customToolOpenerClass
verwendet werden. Das Verhalten entspricht der CSS-ID-Methode. -
Hinweis: Auf allen Seiten, auf denen kein Element mit der ID
eyeAble_customToolOpenerID
oder der KlasseeyeAble_customToolOpenerClass
vorhanden ist, wird weiterhin das reguläre Logo angezeigt! -
Soll Eye-Able mit einem Element verknüpft werden, ohne das Hauptlogo auszublenden, kann die CSS-Klasse
eyeAble_customToolOpenerNoHideClass
verwendet werden.
Toolbar per Link öffnen
Es ist auch möglich, die Eye-Able Toolbar direkt über einen Link zu öffnen. Setzen Sie dafür als Linkziel einfach:
javascript:EyeAbleAPI.toggleToolbar()
Barrierefreiheit
Bitte achten Sie darauf, dass der Zugangspunkt für Eye-Able mit der Tastatur erreichbar ist und einen für Screenreader zugänglichen Text besitzt.
Eine mögliche Beschriftung könnte sein:
„Visuelle Assistenzsoftware öffnen. Mit der Tastatur erreichbar über ALT + 1“
Demonstration und Logos
Zu Demonstrationszwecken ist diese Einbettung auf dieser Seite mit folgendem Logo durchgeführt:
Das Eye-Able Logo zum Herunterladen und Einbinden finden Sie hier.