By default, the Eye-Able® assistance software is integrated into a website as an icon that is fixed relative to the viewport. This present 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 easily embedded directly into the website. This enables integration into the nav bar or other existing containers.
Any element on the page can be used as an alternative to the regular icon. With this element the "open and close" functions of the regular icon are linked. The new target element must be created or adapted yourself!
To create the link, the new target element must be assigned the CSS ID "eyeAble_customToolOpenerID" to be added. 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 toolbar's position is still where it would be with the regular logo.
If multiple open/close switches are to be embedded, the CSS class "eyeAble_customToolOpenerClass" be used. The behavior is identical to that CSS ID method.
Note: On all subpages where there is no such element with the eyeAble_customToolOpenerID ID or eyeAble_customToolOpenerClass class there, the regular logo will continue to be displayed!
If you want Eye-Able to link to an element on the page without hiding the main logo, the "eyeAble_customToolOpenerNoHideClass“ CSS class to be used.
For demonstration purposes, this embedding is carried out on this page with the following logo: