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?

The Eye-Able Assist software can be easily integrated into your website. Below are the main options for incorporating your own controls.

Eye-Able Assist Icon

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, Assist 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 class eyeAble_customToolOpenerClass can be used instead. The behaviour corresponds to the CSS ID method.

Important: 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 Assist is to be linked to an element without hiding the main logo, the CSS class eyeAble_customToolOpenerNoHideClass can be used.

Open toolbar via link

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

Accessibility

Please ensure that the access point for Assist 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:

Symbol von Eye-Able Assist: Weißes Symbol einer stilisierten menschlichen Figur mit ausgestreckten Armen auf schwarzem abgerundetem Quadrat

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