Free for every website
AccessLayer adds an accessibility button to your site. Visitors open it to translate the page into their language, make text bigger, raise the contrast, switch to a dyslexia-friendly font or pause motion. It's free, with no subscription and no tracking.
Pick a profile. The whole page changes, through the real widget.
Turned on
The tools
Multi-step cards move to the next option on each click and wrap back to off, exactly as the panel does. Everything you change here is saved, so it follows you to the console.
Profiles
Eight presets in the same order as UserWay's, so visitors moving between sites find what they already know. A profile replaces the previous one rather than stacking on it, and choosing it again puts the page back.
How it works
<html>
Presentation tools are data-mla-* attributes plus one injected stylesheet,
so they survive a client-side route change with nothing to re-apply.
This is this page's root element, right now:
Bigger text scales each element from its own computed size, so headings stay bigger
than body. A blanket font-size: 20px !important is what gets that wrong.
Smart contrast finds each text's real background and moves the colour along its own lightness axis until it passes WCAG 1.4.3. Grey stays grey, just darker.
This line fails at about 2.1:1. Turn on Smart contrast.
The widget is one custom element. Your CSS cannot restyle the panel, and the
widget's own !important rules cannot reach in and eat it.
The dashboard
Sign in, add each website by its exact address, and shape the widget for it. The managed snippet fetches what you publish on every page load, so a new colour or a tool you switch off never needs another embed.
What it won't claim
It changes presentation at runtime. It cannot repair heading order, unlabelled controls, or components a screen reader can't drive. The 2024 Title II rule has no overlay safe harbour.
Read aloud is a reading aid for sighted visitors. People who rely on assistive technology use NVDA, JAWS or VoiceOver, and those need correct markup underneath.
On purpose. Patching labels at runtime hides the problem. Fix them in the source, and let an axe check in your end-to-end suite keep them fixed.
Privacy
A visitor's settings live in localStorage under access-layer:v1.
There is no analytics, no beacon and no visitor account. Two tools can reach the
network, and only when a visitor asks them to.
Install
Use the managed snippet from the dashboard, or embed a
pinned release with its integrity hash and configure it with
data-* attributes. Every release keeps its own address forever;
/v1/ follows the newest 1.x for pages that should update on their own.
Pin the version on checkout and account pages, so the browser runs only the file you reviewed.
Build a tag in the console<!-- Copy yours from the dashboard: Installation.
Appearance and tools come from what you publish. -->
<script defer data-access-layer data-auto="false"
src="https://cdn.example.com/access-layer-loader.js"
data-site="YOUR-SITE-ID"></script>
<!-- The release notes carry the exact integrity hash. -->
<script src="https://cdn.example.com/v1.0.0/access-layer.iife.js"
integrity="sha384-…" crossorigin="anonymous" defer
data-access-layer
data-fonts-url="https://cdn.example.com/v1.0.0/fonts/"
data-color="#1742C9"
data-statement-url="/accessibility"></script>
<!-- Your button opens the panel and the floating
icon stays hidden. Managed sites set this ID
under Appearance instead. -->
<script src="https://cdn.example.com/v1/access-layer.iife.js"
defer data-access-layer
data-trigger-id="accessibility-button"></script>
<button id="accessibility-button" type="button">
Accessibility options
</button>
import { defineNuxtPlugin } from '#imports'
export default defineNuxtPlugin(() => {
const script = document.createElement('script')
script.src = 'https://cdn.example.com/v1/access-layer.iife.js'
script.defer = true
script.dataset.accessLayer = ''
script.dataset.color = '#1742C9'
document.body.append(script)
})
import { mount } from 'access-layer'
const widget = mount({ color: '#1742C9', statementUrl: '/accessibility' })
widget.settings.setProfile('dyslexia')
widget.settings.subscribe((state) => console.log(state))
Or use the button in the corner of this one. Everything on this page was built to be changed by it. When you're ready, add your site in the dashboard.