🎉 New tool: Simple language. Click the button and try it out live

Visual customization options of Eye-Able

Eye-Able various logos with the accessibility man

Share post:

Eye-Able various logos with the accessibility man

Visual customization options of Eye-Able

Share this post:

Eye-Able various logos with the accessibility man

The Eye-Able assistance software allows a large number of customizations. On the one hand the functions can be adapted to the respective websiteon the other hand, the appearance of Eye-Able can be modified. What possibilities there are are are available, are presented below.

Position and size of the icon

By default, Eye-Able is located at the top right of the website. Our user tests have shown that it is best seen here. However, Eye-Able can also be placed at different heights or on the left-hand side of the website.

The size of the icon can also be varied, whereby we recommend a size between 50 and 70 pixels. In the mobile application, sizes between 40 and 50 pixels have proven successful.

The image shows the Eye-Able.com website. A bar is displayed on the left and right, which extends over the entire height of the page. The position of the icon can be adjusted within this area.
Eye-Able can be placed along the gray rectangles.

If you want to place Eye-Able in a different location, this is also possible. The software must then be embedded locally on the website. This is explained in our article "Embedding Eye-Able directly into the page" explains this in detail. It is also possible to add your own icons or elements with the Eye-Able function.

The image shows the embedding of Eye-Able in the navigation bar of the website of the district of Lower Franconia.
The district of Lower Franconia has also embedded Eye-Able in the navigation bar.
The image shows the integration of Eye-Able at the Diocese of Würzburg. Here Eye-Able has been embedded in the navigation bar.
Eye-Able is embedded in the navigation bar of the diocese of Würzburg.

Color adjustments

In addition to the position, the colorn can also be adjusted. So the colors of your own CI can be used and Eye-Able can be nicely integrated into the page. For example, the color of the icon and the toolbar can be customized

The illustration shows the Eye-Able Toolbar in red.
Customization of the icon and the toolbar on vinzenz-wuerzburg.de
The picture shows the Eye-Able Toolbar in black and yellow.
Color customization of icon and toolbar at nmosd.de

In addition to the colors of the icon and the toolbar, the hover and focus colors can also be customized. An example of this can be found on the website nmosd.de

The image shows the Eye-Able toolbar, in which the "Font size" function is hovered over with the mouse.
Here the hover color has been changed from black to yellow. nmosd.de
This image shows the Eye-Able Toolbar with activated keyboard navigation. This is highlighted by the blue color.
When the function is activated, it appears in blue. nmosd.de

Various icons

You can see the Eye-Able icons. One is an eye, the second and third icons represent the male for accessibility that stretches its 4 limbs away from the body
Three icons that we offer.

We offer three different icons to choose from as standard. We recommend the third version, as this is a common symbol for accessibility and is therefore easily recognizable. However, you can also choose any of the othericonsor use your own. By embedding it into the website ,every element of the websitecan be provided with the Eye-Able functionality.

Adaptation of the range of functions

We offer a wide range of functions, however not every function is used to the same extent. For this reason, some functions can be found in the "More functions" submenu. With the exception of the instant view, font enlargement, contrast mode and the read aloud function, the other functions can also be moved to the submenu.

The illustration shows the Eye-Able menu with a reduced range of functions.
Here, the "Night mode" and "Blue filter" functions have been moved to the second level. roche.de

Changes to the labeling

In addition to the visual appearance, we are also happy to customize the labels, from the tooltip to the labels of the individual functions.

The image shows the eye-bleed tooltip in red with customized content. The content reads: Accessible view - Customize this website. Click to open or hold to move.
The tooltip with individual labeling. vinzenz-wuerzburg.de

Custom icons in the toolbar

We use various icons for the functions, which are intended to visually represent the function. However, we are also happy to use individual icons that match the visual appearance of the respective page.

A separate icon set was used for the functions here. essen.de

You can make these settings yourself

In our customer area, we offer the option of making some adjustments yourself. Here, the size and position of the icon can be modified and the color of the icon and the toolbar can be set. It is also possible to customize some functions for individual elements. To do this, go to the "Assistance software" tab and click on the "Customize appearance" button for the desired domain. A pop-up window will open in which the adjustments can be made.

The image shows the customization menu in the Eye-Able dashboard. The size and color of Eye-Able can be adjusted here.
The position, size and color of the icon can be changed in the dashboard itself.

Eye-Able offers a wide range of customization options. Please contact us if you would like to have Eye-Able customized for your site. We will be happy to advise you!

Easy for everyone

Are you interested? We will be happy to help you.

With over 25 functions relating to digital accessibility, Eye-Able also helps you to reduce your barriers in the long term. You can make your information accessible to everyone and not exclude any visitors - in short: you can tap into a new target group without high marketing volumes.

Icon shows accessibility figure

Consultation

Non-binding consultation on digital accessibility in general

Icon shows accessibility figure

Analysis

Discussion of possible optimization potential on your website

Icon shows accessibility figure

Live demo

Presentation of the assistance software directly on your website

Further contributions

If you want a little more: