🎉 New tool: Simple language. Click the button and try it out live

Eye-Able Manually adapt to your own website

The image shows a laptop with a computer program open. Computer code can be seen there.

Share post:

With a self-control over the configuration, you can adapt Eye-Able - beyond the configurator - to your own website.
The image shows a laptop with a computer program open. Computer code can be seen there.

Eye-Able Manually adapt to your own website

Share this post:

The image shows a laptop with a computer program open. Computer code can be seen there.
With a self-control over the configuration, you can adapt Eye-Able - beyond the configurator - to your own website.

Photo Credits: Any IP Ltd, Link to the Author is https://anyip.io/ and Simplex - Web Design Sydney 

In case of a self-control over the configuration, one can adapt Eye-Able - beyond the configurator - to one's own website. The advantages of such a customization are described in the article "What are the advantages of an initial customization? To make these customizations an advanced understanding of HTML and CSS is necessary. Therefore, for each website we offer the option of a full testing and optimization of Eye-Able . However, some options of this customization are possible at any time for non-managed users of Eye-Able . Available settings are presented below.

Note: The following configurations are only a subset of the parameters available in a full optimization through Eye-Able .

To extend the Eye-Able configuration additional key-value pairs have to be added to the eyeAble_pluginConfig variable. An example configuration can be found here(https://www.eye-able-cdn.com/example.js).

Besides the integration of the config directly inline, changes to the Eye-Able configuration can also be performed via a separate function. To be able to make changes to the configuration yourself, the method via the eyeAble_updateConfig() methodis therefore recommended:

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

Parameters that should not be changed can be commented out.

Magnification:

The following parameters exist to limit the magnification:

  • maxMagnification: [int] Describes the maximum magnification (default: 21)
  • maxMobileMagnification: [int] Describes the maximum mobile magnification (default: 3).

Position:

The following parameters exist to change the position of the main icon:

  • topPosition: [String] Sets the top position of the icon on the desktop in % or px (Default: "10%")
  • rightPosition: [String] Sets the right position of the icon on the desktop in px. If sidePosition is set to "left" the left position will be set (default: "10px").
  • mobileBottomPosition: [String] Sets the bottom position of the mobile icon in % or px (default: "15%").
  • mobileRightPosition: [String] Sets the right position of the mobile icon in px (default: "10px").
  • sidePosition: [String] Sets the side at which the icon appears "left" or "right" (Default: "right")

Appearance:

The following parameters exist to change the appearance:

  • mainIconAlt: [int] Change the main icon between three variants 0, 1 or 2 (default: 0)
  • iconSize: [int] Change the size of the icon on the desktop, recommended values between 50-70 pixels (default: 70px)
  • mobileIconSize: [int] Change the size of the mobile icon, recommended values between 35-50 pixels (default: 50px).

Screen reader:

The following parameters can be used to modify the customization CSS classes:

  • customSrBlacklistCSS: [String] Changes the CSS class for the elements to exclude (default: eyeAble_SrSkip).
  • customSrStartCSS: [String] Changes the CSS class for the new start element (default: eyeAble_SrStart).
  • customSrTextCSS: [String] Changes the CSS class for the block to be read out (default: eyeAble_SrText ).

Exclude elements from functions:

The following parameters can be used to exclude certain elements from the functions of Eye-Able . This is useful for text that breaks out of its container when zoomed in, or for elements whose colors should not be adjusted by the contrast or night mode. Elements can be selected using native CSS selectors (more info here(https://www.w3schools.com/cssref/css_selectors.asp). Multiple CSS selectors are separated by commas. The exception also applies to all children of selected elements!

  • blacklistContrast: [String] Exclude elements from the color adjustment of the contrast or night mode.

E.g.

Example of how to exclude elements from contrast
  • blacklistFontsize: [String] Exclude elements from the font magnification.

E.g.

Example of how to exclude elements from magnification

 

  • forceWhiteBackground: [String] Forces a white background when night or contrast mode is enabled.

 

Simple for all

Interest aroused? We will be happy to help you.

With over 25 functions for digital accessibility, Eye-Able also helps you to reduce your barriers in the long term. In this way, you make your information accessible to all and do not exclude any visitors - in short: you tap into a new target group without high marketing volumes.

Icon shows accessibility figure

Consultation

Non-binding consultation on digital accessibility in general

Icon shows accessibility figure

Analysis

Discussion of possible optimization potential on your website

Icon shows accessibility figure

Live Demo

Presentation of the assistance software directly on your website

More contributions

If it may be a little more: