Einbettung von Eye-Able direkt in die Seite

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 bewährt, auch bei stark seh-eingeschränkten Nutzern. Eye-Able® lässt sich jedoch auch problemlos direkt in die Webseite einbetten. So wird eine Integration in die Nav-Leiste oder andere bestehende Container möglich.

Als Alternative zu dem regulären Icon kann ein beliebiges Element auf der Seite genommen werden. Mit diesem Element wird die „Öffnen und Schließen“ Funktionen des regulären Icons verknüpft. Das neue Ziel-Element muss dafür selbst erstellt bzw. angepasst werden!

Um die Verknüpfung herzustellen muss dem neuen Ziel-Element die CSS-ID „eyeAble_customToolOpenerID“ hinzugefügt werden. Sobald ein Element mit dieser ID auf einer Seite existiert, wird das übliche Logo ausgeblendet und diesem Event ein entsprechender EventListener hinzugefügt. Die Position der Toolbar ist weiterhin dort, wo Sie sich mit dem regulären Logo befinden würde.

Wenn mehrere Schalter zum Öffnen/Schließen eingebettet werden sollen kann ebenfalls die CSS-Klasse „eyeAble_customToolOpenerClass“ verwendet werden. Das Verhalten ist identisch zu der CSS-ID Methode.

Hinweis: Auf allen Unterseiten, auf denen es kein solches Element mit der eyeAble_customToolOpenerID-ID oder eyeAble_customToolOpenerClass-Klasse  gibt, wird weiter das reguläre Logo angezeigt!

Wenn Eye-Able mit einem Element auf der Seite verknüpft werden soll, ohne das Hauptlogo auszublenden, kann die „eyeAble_customToolOpenerNoHideClass“ CSS-Klasse verwendet werden.

Es ist auch möglich direkt über einen Link die Eye-Able Toolbar zu öffnen. Setzten Sie dafür als Linkziel einfach „javascript:EyeAbleAPI.toggleToolbar()“. 

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 wäre hierbei: „Visuelle Assistenzsoftware öffnen. Mit der Tastatur erreichbar über ALT + 1“

Zu Demonstrationszwecken ist diese Einbettung auf dieser Seite mit folgendem Logo durchgeführt:

Das Eye-Able Logo zum Herunterladen und Einbinden finden Sie hier (oder als SVG hier):