A lightweight, zero-dependency accessibility widget you can drop into any website with a single <script> tag. No frameworks, no build step required on the consumer side.
- Font size adjustment
- Large cursor toggle
- High contrast mode
- Invert colors
- Grayscale mode
- Hide images
- Increased text spacing
- Readable font toggle
- Background color adjustment
- Smart Skip Link
- Reset all settings
<script src="https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js" defer></script>Add this inside your root layout <body>:
<script
src="https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js"
defer
/>Add to the scripts array in angular.json:
"scripts": [
"https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js"
]Or directly in index.html:
<script
src="https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js"
defer>
</script>In your public/index.html:
<script
src="https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js"
defer>
</script>Or programmatically in main.js / main.ts:
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js';
script.defer = true;
document.body.appendChild(script);var s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js';
document.body.appendChild(s);npm i @odunsih/allyAfter installing, copy the script from node_modules into your project and reference it:
<script src="node_modules/@odunsih/ally/accessibility-launcher.min.js" defer></script>// In your root layout or _app.tsx
<script
src="https://cdn.jsdelivr.net/gh/Odunsih1/ally@v1.2.0/accessibility-launcher.v1.2.0.min.js"
defer
/>In angular.json, reference the package from node_modules:
"scripts": [
"node_modules/@odunsih/ally/accessibility-launcher.min.js"
]In main.js / main.ts:
import '@odunsih/ally';Ally enhances accessibility but does not replace proper semantic HTML, ARIA usage, and inclusive design practices.
Unlike heavy accessibility overlays, Ally is:
- Lightweight (no dependencies)
- Developer-friendly (fully transparent)
- Non-intrusive (no DOM hijacking)
- Privacy-safe (no tracking, no external APIs)
Ally does NOT claim to make your site fully WCAG compliant. It provides user-controlled accessibility enhancements.
Contributions are welcome and appreciated! Here's how to get started:
Click the Fork button at the top right of this page.
git clone https://github.com/Odunsih1/ally.git
cd allyEdit accessibility-launcher.js — this is the main source file. Keep changes focused and avoid adding external dependencies.
npm install -g terser
terser accessibility-launcher.js -o accessibility-launcher.min.js --compress --manglePush your changes to your fork and open a PR against the main branch. Include a clear description of what you changed and why.
This project follows Semantic Versioning:
patch(1.0.x) — bug fixesminor(1.x.0) — new features, backwards compatiblemajor(x.0.0) — breaking changes
MIT — free to use in personal and commercial projects.