Barrierefreiheit individuell integrieren
Sie möchten eigene Bedienelemente – z. B. für den Kontrastmodus, die Schriftvergrößerung oder die Vorlesefunktion – direkt in Ihre Website einfügen? Die Eye-Able® Assist API macht das einfach und flexibel möglich.
Ein Beispiel für integrierte Bedienelemente könnte folgendermaßen aussehen:
Alle verfügbaren API-Funktionen mit Beispielen finden Sie in der offiziellen Dokumentation:
Zur Eye-Able® Assist API Dokumentation
Schritt-für-Schritt Anleitung zur Integration
1. Eye-Able® Assist einbinden
Stellen Sie sicher, dass Eye-Able® Assist bereits korrekt in Ihre Website integriert ist.
Die Anleitung dazu finden Sie hier:
Wie kann Eye-Able® Assist in Websites integriert werden?
2. Eigene Buttons im HTML anlegen
Platzieren Sie die gewünschten Bedienelemente direkt an den passenden Stellen im HTML Ihrer Website.
3. API-Funktionen per JavaScript verbinden
Verknüpfen Sie Ihre Buttons über JavaScript mit den entsprechenden Funktionen der Eye-Able® Assist API.
Ein Beispiel für den Kontrastmodus wäre:
EyeAbleAPI.toggleContrast()
Dies kann entweder über Javascript mit einem EventListener auf "click" mit Ihrem eigenen Button verknüpft werden oder bei Links mit:
href="javascript:EyeAbleAPI.toggleContrast()"
Vollständiges Codebeispiel der Beispielbuttons
Das folgende Beispiel zeigt die komplette Einbindung inklusive HTML, CSS und JavaScript der oben zu sehenden Beispielbuttons.
Sie können es 1:1 übernehmen und an Ihre Website anpassen:
<!-- HTML, CSS & JavaScript für eigene Eye-Able® Buttons -->
<style>
.eyeAbleButton {
width: 70px;
height: 70px;
position: fixed;
z-index: 9999;
filter: drop-shadow(2px 2px 3px darkgrey);
}
.eyeAbleButton:focus {
outline: 3px solid black;
}
#eA_fontsize { bottom: 115px; left: 30px; }
#eA_contrast { bottom: 195px; left: 30px; }
#eA_screenreader { bottom: 275px; left: 30px; }
@media (max-width: 1460px) and (min-width: 800px) {
#eA_fontsize { bottom: 115px; left: 30px; }
#eA_contrast { bottom: 115px; left: 110px; }
#eA_screenreader { bottom: 115px; left: 190px; }
}
@media (max-width: 800px) {
#eyeAble_onSiteButtons { display: none !important; }
}
.onSiteButton_Active > .stEyeAble0 {
stroke: black; fill: white;
}
.onSiteButton_Active > .stEyeAble1 {
fill: black;
}
.stEyeAble0 {
stroke: white; fill: black;
}
.stEyeAble1 {
fill: white;
}
</style>
<div id="eyeAble_onSiteButtons" style="display:none" class="eyeAbleContrastSkip">
<!-- Button: Vorlesefunktion -->
<svg role="button" aria-labelledby="srTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_screenreader" viewBox="0 0 75 75">
<title id="srTxtId">Vorlesefunktion</title>
<circle class="stEyeAble0" cx="37.5" cy="37.5" r="35.6"/>
<path class="stEyeAble1" d="M36.5,26.1c0.6,0.2,1,0.9,1,1.4v20c0,0.7-0.4,1.2-1,1.4..."/>
</svg>
<!-- Button: Kontrastmodus -->
<svg role="button" aria-labelledby="ctTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_contrast" viewBox="0 0 75 75">
<title id="ctTxtId">Kontrastmodus</title>
<circle class="stEyeAble0" cx="37.5" cy="37.5" r="35.9"/>
<path class="stEyeAble1" d="M37.5,19.8c-9.8,0-17.7,7.9-17.7,17.7s7.9,17.7,17.7,17.7..."/>
</svg>
<!-- Button: Schriftgröße -->
<svg role="button" aria-labelledby="ftTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_fontsize" viewBox="0 0 75 75">
<title id="ftTxtId">Schrift vergrößern</title>
<circle class="stEyeAble0" cx="37.5" cy="37.5" r="35.8"/>
<path class="stEyeAble1" d="M30.2,40.8h-5.3L23.8,44h-3.1l5.1-14.7h3.6L34.5,44h-3.2..."/>
</svg>
</div>
<script>
document.addEventListener("eyeable:init_completed", function () {
document.getElementById("eyeAble_onSiteButtons").style.display = "block";
function updateAria(buttonId, active) {
document.getElementById(buttonId).setAttribute("aria-pressed", active ? "true" : "false");
}
// Schriftgröße
const fontBtn = document.getElementById("eA_fontsize");
fontBtn.addEventListener("click", toggleFontSize);
fontBtn.addEventListener("keydown", e => { if (e.key === "Enter") toggleFontSize(); });
function toggleFontSize() {
const zoom = eyeAbleVariables.Fontsize === 0 ? 3 : 0;
EyeAbleAPI.setZoomLevel(zoom);
updateAria("eA_fontsize", zoom > 0);
}
// Kontrast
const contrastBtn = document.getElementById("eA_contrast");
contrastBtn.addEventListener("click", toggleContrast);
contrastBtn.addEventListener("keydown", e => { if (e.key === "Enter") toggleContrast(); });
function toggleContrast() {
EyeAbleAPI.toggleContrast();
updateAria("eA_contrast", EyeAbleAPI.getColorMode() === "Contrast");
adjustContrast();
}
// Vorleser
const readerBtn = document.getElementById("eA_screenreader");
readerBtn.addEventListener("click", EyeAbleAPI.toggleScreenreader);
readerBtn.addEventListener("keydown", e => {
if (e.key === "Enter") {
EyeAbleAPI.toggleScreenreader();
updateAria("eA_screenreader", EyeAbleAPI.getScreenreaderState());
}
});
function adjustContrast() {
const active = eyeAbleVariables.Color_Mode !== "0" && eyeAble_contrastBackgroundDark;
document.querySelectorAll(".eyeAbleButton").forEach(btn =>
btn.classList.toggle("onSiteButton_Active", active)
);
updateAria("eA_contrast", EyeAbleAPI.getColorMode() === "Contrast");
updateAria("eA_fontsize", EyeAbleAPI.getZoomLevel() > 0);
updateAria("eA_screenreader", EyeAbleAPI.getScreenreaderState());
}
setInterval(adjustContrast, 2000);
adjustContrast();
document.addEventListener("eyeable:event", adjustContrast);
});
</script>
Hinweise zur Umsetzung
-
Designfreiheit: Die Buttons können in Farbe, Form, Position und Symbolik frei angepasst werden.
-
Barrierefrei & zugänglich: Alle Buttons sind tastaturbedienbar und mit ARIA-Attributen ausgestattet.
-
Keine Backend-Integration nötig: Die Einbindung erfolgt vollständig clientseitig.
Fazit
Mit der Eye-Able® Assist API lassen sich barrierefreie Funktionen flexibel in jedes individuelle Website-Design integrieren.
Sie bieten Nutzer*innen dadurch eine komfortable, barrierefreie und intuitive Bedienung – genau an der Stelle, wo sie gebraucht wird.
Für weitere Informationen oder bei Fragen zur technischen Umsetzung steht Ihnen unser Support-Team jederzeit zur Verfügung.