Embedding Eye-Able directly into the page

By default, the Eye-Able® assistance software is integrated into a web page as a fixed icon relative to the viewport. This present position in combination with high-contrast icons has proven to be easy to use in user tests, even for visually impaired users. However, Eye-Able® can also be embedded directly into the web page without any problems. This allows integration into the nav 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 behaviour is identical to the CSS-ID method.

Note: On all subpages where there is no such element with the eyeAble_customToolOpenerID-ID or eyeAble_customToolOpenerClass class the regular logo will continue to be displayed!

If Eye-Able should 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. Simply set the link target to "javascript:EyeAbleAPI.toggleToolbar()".

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

The Eye-Able logo for download and embedding can be found as SVG here.