Integrate accessibility individually
The Eye-Able® Assist API makes adding your own controls – e.g. for contrast mode, font enlargement or the read-aloud function easy and flexible.
An example of integrated controls could look like this:
All available API functions with examples can be found in the official documentation:
To the Eye-Able® Assist API documentation
Step-by-step guide
1. Integrate Eye-Able® Assist
Ensure that Eye-Able® Assist is already correctly integrated into your website.
You can find instructions for this here:
How can Eye-Able® Assist be integrated into websites?
2. Create your own buttons in HTML
Place the desired controls directly in the appropriate places in the HTML of your website.
3. Connect API functions via JavaScript
Link your buttons to the corresponding functions of the Eye-Able® Assist API via JavaScript.
An example for contrast mode would be:EyeAbleAPI.toggleContrast()
This can either be linked to your own button via JavaScript with an event listener on ‘click’ or, for links, with:href="javascript:EyeAbleAPI.toggleContrast()"
Complete code example for the sample buttons
The following example shows the complete integration, including HTML, CSS and JavaScript, of the sample buttons shown above.
You can copy it exactly and adapt it to your website:
<!-- HTML, CSS & JavaScript for costum 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: Read Aloud-->
<svg role="button" aria-labelledby="srTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_screenreader" viewBox="0 0 75 75">
<title id="srTxtId">Read Aloud</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: Contrast Mode-->
<svg role="button" aria-labelledby="ctTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_contrast" viewBox="0 0 75 75">
<title id="ctTxtId">Contrast Mode</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: Fontsize-->
<svg role="button" aria-labelledby="ftTxtId" aria-pressed="false" tabindex="0" class="eyeAbleButton" id="eA_fontsize" viewBox="0 0 75 75">
<title id="ftTxtId">Enlarge Font</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");
}
// Font Size
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);
}
// Contrast
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();
}
// Screenreader
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>Implementation notes
- Design freedom: The buttons can be freely customised in colour, shape, position and symbolism.
- Barrier-free & accessible: All buttons are keyboard-operable and equipped with ARIA attributes.
- No backend integration necessary: Integration takes place entirely on the client side.
Conclusion
With the Eye-Able® Assist API, accessible features can be flexibly integrated into any individual website design.
This provides users with convenient, accessible and intuitive controls – exactly where it is needed.
For further information or questions regarding technical implementation, our support team is available at any time.