Eye-Able manuell an die eigene Webseite anpassen

Teilen ist erwünscht:

Share on linkedin
Share on facebook
Share on email
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. 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)

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

1 Kommentar zu „Eye-Able manuell an die eigene Webseite anpassen“

  1. Pingback: Screenreader von Eye-Able® - Software für Barrierefreiheit im Internet

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

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.

Unverbindliches Beratungsgespräch zur digitalen Barrierefreiheit im Allgemeinen

Erörterung möglicher Optimierungspotentiale auf Ihrer Website

Vorstellung der Assistenzsoftware direkt auf Ihrer Website

Weitere Beiträge

Falls es etwas mehr sein darf.