Eye-Able manuell an die eigene Webseite anpassen

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.

• blacklistFontsize : [String] Exclude elements from the font magnification.

E.g.

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