🎉 Early-Bird-Aktion: Spare nur noch im Juni 10% auf Deine Assistenzsoftware mit dem Code "Free10"!

Einbettung von Eye-Able direkt in die Seite

Teilen ist erwünscht:

Dieses Bild zeigt einen Schreibtisch mit vielen Bildschirmen in kühler Athmosphäre.

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.


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):

Eye-Able Logo - Männchen vor schwarzen Hintergrund

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Interesse geweckt? Wir helfen Ihnen gerne weiter.

Mit über 25 Funktionen rund um die digitale Barrierefreiheit hilft Eye-Able auch Ihnen dabei, Ihre Barrieren nachhaltig zu reduzieren. So machen Sie Ihre Informationen zugänglich für alle und schließen keine Besucher*innen aus – kurzum: Sie erschließen eine neue Zielgruppe, ganz ohne hohe Marketing-Volumina.

Unverbindliches Beratungsgespräch zur digitalen Barrierefreiheit im Allgemeinen

Erörterung möglicher Optimierungspotentiale auf Ihrer Website

Vorstellung der Assistenzsoftware direkt auf Ihrer Website

Weitere Beiträge

Falls es etwas mehr sein darf.

Das Bild zeigt Code in einer Computer-Konsole.

Integration mit dynamischen Nachladen

Neben dem direkten Laden der Eye-Able Assets vom Eye-Able- oder lokalen Server gibt es auch die Möglichkeit die Daten von Eye-Able erst mit Klick auf