Die Eye-Able Assist-Software kann flexibel in deine Website integriert werden. Im Folgenden findest du die wichtigsten Möglichkeiten zur Einbindung eigener Bedienelemente.
Eye-Able Assist Icon
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 Tests mit (stark seheingeschränkten) Nutzenden als gut bedienbar bewährt.
Alternative Einbettung:
Assist lässt sich jedoch auch problemlos direkt in die Webseite einbetten. So ist beispielsweise 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-ID
eyeAble_customToolOpenerIDhinzugefü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.
Wichtig: Auf allen Seiten, auf denen kein Element mit der ID
eyeAble_customToolOpenerIDoder der KlasseeyeAble_customToolOpenerClassvorhanden ist, wird weiterhin das reguläre Logo angezeigt.
Soll Assist 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 Assist Toolbar direkt über einen Link zu öffnen. Setze dafür als Linkziel einfach: javascript:EyeAbleAPI.toggleToolbar()
Barrierefreiheit
Bitte achte darauf, dass der Zugangspunkt für Assist 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 Assist Logo zum Herunterladen und Einbinden findest du hier.