Wird geladen...

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.Es ist Code zu sehen.

  • blacklistFontsize : [String] Nehme Elemente von der SchriftvergrĆ¶ĆŸerung aus

z.B.

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

Weitere BeitrƤge

Falls es etwas mehr sein darf

Wird geladen...
Wird geladen...
Wird geladen...
Wird geladen...

Sie benƶtigen weitere Informationen?

Schreiben Sie uns und wir helfen Ihnen gerne weiter.

A man and a woman look at a monitor and laugh