Designed for developers – faster start, simple, flexible, no lock-in
A11yes was designed from the ground up to integrate seamlessly with any modern web architecture.
Whether it’s a classic HTML project, a single-page application, or a framework-based app.
Integration takes just a few minutes and doesn’t require deep changes to your existing code.
You keep full control: you decide how A11yes is integrated into your system landscape.
Integration can be done manually or directly in the build process and fits cleanly into existing workflows.
The result: a stable, high-performance, and future-proof integration—without extra technical bloat and without dependence on an external platform.
Integration takes only a few minutes
Installation
Ideal for static websites or projects without a build pipeline.
- Download the latest version.
- Include the CSS and JavaScript in your project.
- Initialize A11yes in your own code if you want to use a custom configuration.
This way, you retain full control over hosting and the loading order of the assets.
<!-- Include A11yes CSS -->
<link rel="stylesheet" href="/your-path/libs/a11yes/a11yes.css" />
<!-- Include A11yes JavaScript -->
<script type="module" src="/your-path/libs/a11yes/a11yes.js"></script>
<!-- Include your custom JS to Custom Configuration A11yes (Optional)-->
<script type="module" src="/your-path/index.js"></script>
Configuration tailored to your needs
A11yes is fully configurable and adapts to your project — not the other way around.
You can pass configuration options to the a11YesInit object
to individually control behavior, appearance, and feature set.
Whether it’s a streamlined UI, specific accessibility features, or project-specific defaults — everything can be defined centrally.
a11YesInit({
currentLanguage: 'de',
openButtonClassname: 'a11yes-open',
// Font size controls
fontSize: true,
fontSizeStep: 2,
fontSizeMax: 5,
fontSizeMin: 0,
// Letter spacing controls
letterSpacing: true,
letterSpacingStep: 1,
maxLetterSpacingSteps: 5,
minLetterSpacingSteps: 0,
// Contrast settings
contrast: true,
highLightColor: 'red',
// Fonts options
fonts: {
'Arial': 'Arial, sans-serif',
'Times New Roman': 'Times New Roman, serif',
},
// Enable other accessibility functions
otherFunctions: true,
// Links shown in the popup (array of [label, URL, target])
links: [
['Learn more about Accessibility', 'https://www.a11yes.com/', '_blank'],
['Simple Language', 'https://www.a11yes.com/', '_blank']
],
// Show icons in the popup
icons: true,
// Path to your translations file
translations: "./path-to-your-translations.json"
});
The configuration can be adjusted at any time without breaking existing integrations.
Built for Performance & Scalability
- No dependency on external services
- Minimal bundle size
- Framework-agnostic
- No impact on Core Web Vitals
A11yes tool integrates seamlessly into your application while meeting the highest accessibility standards.