Skip to content
English
  • There are no suggestions because the search field is empty.

Can the Eye-Able® Assist Icon also be embedded directly into the page?

Eye-Able® Assist Icon – Integration and customisation

Standard position:
By default, the Eye-Able® assistance software is integrated into a website as an icon fixed relative to the viewport. This prominent position, in combination with high-contrast icons, has proven to be easy to use in user tests, even for users with severe visual impairments.

Alternative embedding:
However, Eye-Able® can also be easily embedded directly into the website. This allows integration into the navigation bar or other existing containers.

Custom buttons for opening and closing

As an alternative to the regular icon, any element on the page can be used as a switch. This element is linked to the ‘open and close’ function of the regular icon. The new target element must be created or adapted for this purpose!

Important:
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 the page, the usual logo is hidden and a corresponding EventListener is added to the element.
  • The position of the toolbar remains where it would be with the regular logo.

Multiple switches and additional options

  • If multiple switches are to be embedded for opening/closing, the CSS classeyeAble_customToolOpenerClasscan be used instead. The behaviour corresponds to the CSS ID method.
  • Note: On all pages where there is no element with the ID eyeAble_customToolOpenerID or the class eyeAble_customToolOpenerClass, the regular logo will continue to be displayed!
  • If Eye-Able is to be linked to an element without hiding the main logo, the CSS classeyeAble_customToolOpenerNoHideClasscan be used.

Open toolbar via link

It is also possible to open the Eye-Able toolbar directly via a link. To do this, simply set the link target to:

javascript
CopyEdit
javascript:EyeAbleAPI.toggleToolbar()

Accessibility

Please ensure that the access point for Eye-Able is accessible via keyboard and has text that is accessible to screen readers.

A possible label could be:
‘Open visual assistance software. Accessible via keyboard using ALT + 1’

Demonstration and logos

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

Screenshot 2025-05-07 084235

The Eye-Able logo can be downloaded and embedded here.