🎉 Neues Tool: Einfache Sprache. Button klicken und Live ausprobieren

Einbettung von Eye-Able direkt in die Seite

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

Beitrag teilen:

Standardmäßig ist die Eye-Able® Assistenzsoftware als, relativ zum Viewport fixiertes, Icon auf einer Webseite eingebunden.
Dieses Bild zeigt einen Schreibtisch mit vielen Bildschirmen in kühler Athmosphäre.

Einbettung von Eye-Able direkt in die Seite

Teile diesen Beitrag:

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.

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

Eye-Able Logo - Männchen vor schwarzen Hintergrund

Einfach für alle

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.

Icon zeigt Barrierefreiheit-Figur

Beratungsgespräch

Unverbindliches Beratungsgespräch zur digitalen Barrierefreiheit im Allgemeinen

Icon zeigt Barrierefreiheit-Figur

Analyse

Erörterung möglicher Optimierungspotentiale auf Ihrer Website​

Icon zeigt Barrierefreiheit-Figur

Live-Demo

Vorstellung der Assistenzsoftware direkt auf Ihrer Website​

Weitere Beiträge

Falls es etwas mehr sein darf:

Die UN-Behindertenrechtskonvention im Überblick

Die UN-Behindertenrechtskonvention (UN-BRK) fördert und schützt die Rechte von Menschen mit Behinderungen. Sie ist ein unverzichtbares Dokument für unsere Gesellschaft, weil sie bei ihrer Einführung