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

If you check the configuration yourself, you can customize Eye-Able - beyond the configurator - to your own website. The advantages of such a customization are described in the article "What are the advantages of an initial customization?". An advanced understanding of HTML and CSS is required to make these customizations. We therefore offer the option of a complete Eye-Able check and optimization for every website. However, some of these customization options are available to non-managed users of Eye-Able at any time. Available settings are presented below.

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

To extend the Eye-Able configuration, additional key-value pairs must be added to the eyeAble_pluginConfig variable. You can find an example configuration here(https://www.eye-able-cdn.com/example.js)

In addition to integrating the config directly inline, changes to the eye-ble configuration can also be made using a separate function. The method via the eyeAble_updateConfig() methodis therefore recommended in order to be able to make changes to the configuration yourself:

<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 is 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 on 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 customization CSS classes can be changed with the following parameters:

• customSrBlacklistCSS: [String] Changes the CSS class for the elements to be excluded (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 pre-read (default: eyeAble_SrText )

Exclude elements from functions:

The following parameters can be used to exclude certain elements from the Eye-Able functions. This is helpful for text that breaks out of its container when enlarged, or for elements whose colors should not be adjusted by the contrast or night mode. Elements can be selected via native CSS selectors (more information 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 enlargement

e.g.

 

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