Visuelle Anpassungsmöglichkeiten von Eye-Able

Teilen ist erwünscht:

Eye-Able verschiedene Logos mit dem Barrierefreiheitsmännchen

Die Assistenzsoftware Eye-Able erlaubt eine große Anzahl an Anpassungen. Zum einen sind die Funktionen an die jeweilige Website anpassbar, zum anderen lässt sich das Erscheinen von Eye-Able modifizieren. Welche Möglichkeiten es dabei gibt, stellen wir euch im Folgenden vor. 

Position und Größe des Icons

Standardmäßig befindet sich Eye-Able rechts oben auf der Website. In unseren Nutzertests hat sich gezeigt, dass es hier am besten gesehen wird. Eye-Able lässt sich aber auch auf unterschiedlichen Höhen oder aber auch auf der linken Seite der Website platzieren.  

Außerdem kann die Größe des Icons variiert werden, wobei wir eine Größe zwischen 50 und 70 Pixeln empfehlen. In der mobilen Anwendung haben sich Größen zwischen 40 und 50 Pixeln bewährt. 

Das Bild zeigt die Website Eye-Able.com. Links und Rechts wird jeweils ein Balken angezeigt, die über die gesamte Höhe der Seite gehen. Innerhalb dieses Bereichs lässt sich die Position des Icons einstellen.
Entlang der grauen Rechtecke lässt sich Eye-Able platzieren.

Wenn man Eye-Able an einer anderen Stelle platzieren möchte, ist dies auch möglich. Dann muss die Software lokal auf der Website eingebettet werden. Dies wird in unserem Artikel „Einbettung von Eye-Able direkt in die Seite“ genau erklärt. Dabei ist es auch möglich, eigene Icons oder Elemente mit der Eye-Able-Funktion versehen.  

Das Bild zeigt die Einbettung von Eye-Able in die Navigationsleiste der Website des Bezirks Unterfranken.
Auch der Bezirk Unterfranken hat Eye-Able in die Navigationsleiste eingebettet.
Das Bild zeigt die Integration von Eye-Able beim Bistum Würzburg. Hier wurde Eye-Able in die Navigationsleiste eingebettet.
Beim Bistum Würzburg ist Eye-Able in die Navigationsleiste eingebettet.

Farbliche Anpassungen

Neben der Position lassen sich auch die Farben anpassen. So können die Farben der eigenen CI verwendet werden und Eye-Able schön in die Seite eingegliedert werden. So lassen sich zum Beispiel die Farbe des Icons und der Toolbar anpassen

Die Abbildung zeigt die Eye-Able Toolbar in rot.
Anpassung des Icons und der Toolbar auf vinzenz-wuerzburg.de
Das Bild zeigt die Eye-Able Toolbar in schwarz-gelb.
Farbliche Anpassung von Icon und Toolbar bei nmosd.de

Neben den Farben des Icons und der Toolbar lassen sich auch die Hover- und Focus-Farben individuell anpassen. Ein Beispiel dafür gibt es bei der Website nmosd.de

Das Bild zeigt die Eye-Able Toolbar, in der mit der Maus über die Funktion "Schriftgröße" gehovert wird.
Hier wurde die Hover-Farbe von schwarz zu gelb geändert. nmosd.de
Dieses Bild zeigt die Eye-Able Toolbar mit aktivierter Tastatur-Navigation. Dies wird durch die Farbe blau hervorgehoben.
Bei aktivierter Funktion erscheint diese in blau. nmosd.de

Verschiedene Icons

Es sind die Icons von Eye-Able zu sehen. Es handelt sich ein mal um ein Auge, das zweite und dritte Icon stellen das Männchen zur Barrierefreiheit dar, dass seine 4 Gliedmaßen vom Körper abstreckt
Drei Icons, die wir anbieten.

Wir bieten standardmäßig drei verschiedene Icons zur Auswahl an. Davon empfehlen wir gerne die dritte Version, da dies ein gängiges Symbol für Barrierefreiheit und daher gut erkennbar ist. Es kann jedoch auch jedes der anderen Icons gewählt werden oder aber auch ein eigenes genutzt werden. Durch die Einbettung in die Website kann jedes Element der Website mit der Funktionalität von Eye-Able versehen werden.

Anpassung des Funktionsumfangs

Wir bieten eine Vielzahl an Funktionen an, jedoch wird nicht jede Funktion gleich viel verwendet. Aus diesem Grund befinden sich einige Funktionen in dem Untermenü „Mehr Funktionen“. Bis auf die Sofortansicht, die Schriftvergrößerung, den Kontrastmodus und die Vorlesefunktion lassen sich die anderen Funktionen ebenfalls in das Untermenü verschieben.

Die Abbildung zeigt das Menü von Eye-Able mit reduziertem Funktionsumfang.
Hier wurden die Funktionen "Nachtmodus" und "Blautfilter" in die zweite Ebene verschoben. roche.de

Änderungen der Beschriftungen

Neben dem visuellen Aussehen passen wir auch gerne die Beschriftungen an, vom Tooltip bis zu den Beschriftungen der einzelnen Funktionen.  

Die Abbildung zeigt den Eye-Able Tooltip in rot mit angepasstem Inhalt. Der Inhalt lautet: Barrierefreie Ansicht - Passe diese Website individuell an. Klicke zum Öffnen oder Halten zum Verschieben.
Der Tooltip mit individueller Beschriftung. vinzenz-wuerzburg.de

Eigene Icons in der Toolbar

Wir nutzen für die Funktionen verschiedene Icons, welche die Funktion visuell darstellen sollen. Gerne aber setzen wir auch individuelle Icons ein, die dem visuellen Auftreten der jeweiligen Seite entsprechen. 

Hier wurde ein eigenes Iconset für die Funktionen verwendet. essen.de

Diese Einstellungen können Sie selber vornehmen

In unserem Kundenbereich bieten wir die Möglichkeit, einige Anpassungen selbst vornehmen zu können. Hier können die Größe und Position des Icons modifiziert werden sowie die Farbe des Icons sowie der Toolbar eingestellt werden. Außerdem ist es möglich einige Funktionen für einzelne Elemente anzupassen. Gehen Sie dazu auf den Reiter „Assistenzsoftware“ und klicken auf den Button „Aussehen anpassen“ für die gewünschte Domain. Es öffnet sich ein Pop-Up Fenster, in dem die Anpassungen vorgenommen werden können.  

Das Bild zeigt das Anpassungsmenü im Dashboard von Eye-Able. Hier können Größe und Farbe von Eye-Able angepasst werden.
Im Dashboard können Position, Größe und Farbe des Icons selber geändert werden.

Eye-Able bietet vielzählige Möglichkeiten der Individualisierung. Kommen Sie gerne auf uns zu, wenn Sie Eye-Able für Ihre Seite angepasst haben möchten. Gerne beraten wir Sie!

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:

cathedral of cologne

Eye-Able erreicht den Rhein

Eye-Able erreicht neue Ufer. Von der Heimatstadt Würzburg am Main, ab an den Rhein! Die Stadt Köln leistet ab sofort ihren Beitrag und macht ihre