By default, the Eye-Able® assistance software is integrated into a website as a fixed icon relative to the viewport. This prominent position in conjunction with high-contrast icons has proven to be easy to use in user tests, even for users with severe visual impairments. However, Eye-Able® can also be embedded directly into the website without any problems. This enables integration into the navigation bar or other existing containers.

As an alternative to the regular icon, any element on the page can be used. The "open and close" functions of the regular icon are linked to this element. The new target element must be created or adapted for this purpose!

To create the link, the CSS ID "eyeAble_customToolOpenerID" must be added to the new target element. As soon as an element with this ID exists on a page, the usual logo is hidden and a corresponding EventListener is added to this event. The position of the toolbar is still where it would be with the regular logo.

If several open/close buttons are to be embedded, the CSS class "eyeAble_customToolOpenerClass" can also be used. The behavior is identical to the CSS ID method.

Note: On all subpages on which there is no such element with the eyeAble_customToolOpenerID-ID or eyeAble_customToolOpenerClass class the regular logo is still displayed!

If Eye-Able is to be linked to an element on the page without hiding the main logo, the "eyeAble_customToolOpenerNoHideClass" CSS class can be used.

It is also possible to open the Eye-Able toolbar directly via a link. To do this, simply set "javascript:EyeAbleAPI.toggleToolbar()" as the link target . 

Make sure that the access point for Eye-Able can be reached with the keyboard and has a text that is accessible for screen readers. A possible label would be: "Open visual assistance software. Accessible with the keyboard via ALT + 1"

For demonstration purposes, this embedding is carried out on this page with the following logo: