Eye-Able manuell an die eigene Webseite anpassen

Bei einer Eigenkontrolle über die Konfiguration kann man Eye-Able - über den Konfigurator hinausgehend - an die eigene Webseite anpassen.

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

Bei einer Eigenkontrolle über die Konfiguration kann man Eye-Able – über den Konfigurator hinausgehend – an die eigene Webseite anpassen. Die Vorteile einer solchen Anpassung sind in dem Artikel „Welche Vorteile bringt mir eine initiale Anpassung?“ beschrieben. Um diese Anpassungen vorzunehmen ist ein fortgeschrittenes Verständnis von HTML und CSS notwendig. Für jede Webseite bieten wir deshalb die Option einer vollständigen Prüfung und Optimierung von Eye-Able an. Einige Möglichkeiten dieser Anpassung sind aber jederzeit für nicht-Managed User von Eye-Able möglich. Im Folgenden werden verfügbare Einstellungen vorgestellt.

Hinweis: Folgende Konfigurationen sind nur eine Teilmenge der in einer vollständigen Optimierung durch Eye-Able verfügbaren Parameter.

Um die Eye-Able Konfiguration zu erweitern müssen der eyeAble_pluginConfig Variable weitere Schlüssel-Wert Paare hinzugefügt werden. Eine Beispiel Konfiguration finden Sie hier (https://www.eye-able-cdn.com/example.js)

Neben der Einbindung der Konfig direkt inline, können Änderungen an der Eye-Able Konfiguration auch über die eine separate Funktion durchgeführt werden. Um selbst Änderungen an der Konfiguration durchführen zu können wird deshalb die Methode über die eyeAble_updateConfig()-Methode empfohlen:

Wp Block Code<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>

Parameter die nicht verändert werden sollen, können Sie auskommentieren.

Vergrößerung:

Folgende Parameter existieren, um die Vergrößerung zu begrenzen:

• maxMagnification : [int] Beschreibt die maximale Vergrößerung (Default: 21)

• maxMobileMagnification : [int] Beschreibt die maximale mobile Vergrößerung (Default: 3)

Position:

Folgende Parameter existieren, um die Position des Haupticons zu ändern:

• topPosition: [String] Setzt die top-Position des Icons am Desktop in % oder px (Default: „10%“)

• rightPosition: [String] Setzt die right-Position des Icons am Desktop in px. Wenn sidePosition auf „left“ gestellt ist wird die left-Position gesetzt (Default: „10px“)

• mobileBottomPosition: [String] Setzt die bottom-Position des Icons mobil in % oder px (Default: „15%“)

• mobileRightPosition: [String] Setzt die right-Position des Icons mobil in px (Default: „10px“)

• sidePosition: [String] Setzt die Seite an der das Icon erscheint „left“ oder „right“ (Default: „right“)

Aussehen:

Folgende Parameter existieren, um das Aussehen zu ändern:

• mainIconAlt: [int] Ändere das Haupticon zwischen drei Varianten 0, 1 oder 2 (Default: 0)

• iconSize: [int] Ändere die Größe des Icons am Desktop, empfohlene Werte zwischen 50-70 Pixel (Default: 70px)

• mobileIconSize: [int] Ändere die Größe des Icons mobil, empfohlene Werte zwischen 35-50 Pixel (Default: 50px)

Screenreader:

Mit folgenden Parametern lassen sich die Anpassungs-CSS-Klassen verändern:

• customSrBlacklistCSS: [String] Ändert die CSS Klasse für die zu auszunehmenden Elemente (Default: eyeAble_SrSkip)

• customSrStartCSS: [String] Ändert die CSS Klasse für das neue Start-Element (Default: eyeAble_SrStart)

• customSrTextCSS: [String] Ändert die CSS Klasse für den vorzulesenden Block (Default: eyeAble_SrText )

Elemente von Funktionen ausnehmen:

Mit folgenden Parametern lassen sich bestimmte Elemente von den Funktionen von Eye-Able ausnehmen. Dies ist hilfreich für Text, welcher bei der Vergrößerung aus seinem Container ausbricht, oder für Elemente deren Farben nicht durch den Kontrast- oder Nachtmodus angepasst werden sollen. Elemente lassen sich über native CSS-Selektoren (mehr Infos hier (https://www.w3schools.com/cssref/css_selectors.asp) auswählen. Mehrere CSS-Selektoren werden durch Kommas getrennt. Die Ausnahme gilt auch für alle Kinder ausgewählter Elemente!

• blacklistContrast : [String] Nehme Elemente von der Farbanpassung des Kontrast- oder Nachtmodus aus.

z.B.

• blacklistFontsize : [String] Nehme Elemente von der Schriftvergrößerung aus

z.B.

• forceWhiteBackground: [String] Forciert einen weißen Hintergrund bei aktiviertem Nacht- oder Kontrastmodus