🎉 Neues Tool: Einfache Sprache. Button klicken und Live ausprobieren

Eye-Able manuell an die eigene Webseite anpassen

Das Bild zeigt einen Laptop, auf dem ein Computer-Programm geöffnet ist. Dort ist Computer-Code zu sehen.

Beitrag teilen:

Bei einer Eigenkontrolle über die Konfiguration kann man Eye-Able - über den Konfigurator hinausgehend - an die eigene Webseite anpassen.
Das Bild zeigt einen Laptop, auf dem ein Computer-Programm geöffnet ist. Dort ist Computer-Code zu sehen.

Eye-Able manuell an die eigene Webseite anpassen

Teile diesen Beitrag:

Das Bild zeigt einen Laptop, auf dem ein Computer-Programm geöffnet ist. Dort ist Computer-Code zu sehen.
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:

<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.

Beispiel wie man Elemente vom Kontrast ausnimmt
  • blacklistFontsize : [String] Nehme Elemente von der Schriftvergrößerung aus

z.B.

Beispiel wie man Elemente von der Vergrößerung ausnimmt

 

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

 

Einfach für alle

Interesse geweckt? Wir helfen Ihnen gerne weiter.​

Mit über 25 Funktionen rund um die digitale Barrierefreiheit hilft Eye-Able auch Ihnen dabei, Ihre Barrieren nachhaltig zu reduzieren. So machen Sie Ihre Informationen zugänglich für alle und schließen keine Besucher*innen aus – kurzum: Sie erschließen eine neue Zielgruppe, ganz ohne hohe Marketing-Volumina.

Icon zeigt Barrierefreiheit-Figur

Beratungsgespräch

Unverbindliches Beratungsgespräch zur digitalen Barrierefreiheit im Allgemeinen

Icon zeigt Barrierefreiheit-Figur

Analyse

Erörterung möglicher Optimierungspotentiale auf Ihrer Website​

Icon zeigt Barrierefreiheit-Figur

Live-Demo

Vorstellung der Assistenzsoftware direkt auf Ihrer Website​

Weitere Beiträge

Falls es etwas mehr sein darf: