Reading comfort your visitors choose for themselves.
Wideable adds a small button to your site. Behind it, visitors adjust text size and spacing, calm animations down, switch to a reading view, or have the page read aloud — whatever suits them. Nothing is decided on their behalf.
<script src="./js/wideable.min.js" defer></script>59 ko · one file, no dependencies
The bar adapts to your visitors’ language
FrançaisEnglishEspañolDeutschItalianoPortuguês · more soon…
What Wideable is not
Accessibility overlays have promised automatic compliance for a decade. Regulators and accessibility practitioners remain unconvinced, and they are right: no script can repair a site it did not build. So here is what this one does not claim.
- It does not make your site compliant.
Not with WCAG, not with the European Accessibility Act, not with any national standard. That comes from the way your site is built.
- It does not rewrite your markup.
No injected alt text, no guessed landmarks, no repaired headings. It adjusts presentation and leaves your HTML exactly as you wrote it.
- It does not detect anyone's disability.
No profiling, no inference, no guessing from behaviour. The visitor picks what they need — they are the only one who knows.
- It does not replace an audit or assistive technology.
Screen readers, magnifiers and browser settings stay in charge. Wideable sits beside them; it never takes over.
Eight modes, and everything else
Modes are mutually exclusive — clicking the active one turns it off. The manual settings stay available at all times and combine freely with any mode.
Dyslexia
Opens up word, letter and paragraph spacing, raises line height, forces left-aligned text. An optional typeface can be added.
Epilepsy
Stops animations and transitions, pauses videos and SVG animation, freezes GIFs, and keeps watching for media added afterwards.
Low vision
Scales text by a quarter, oversized cursors, reinforced focus rings, links underlined so they never rely on colour alone.
Focus
Dims the page outside a bright band that follows the pointer, the keyboard focus, or the arrow keys.
Reading
Sets aside navigation, sidebars, footers and embeds, narrows the column to 70 characters and opens up the leading.
Colour blindness
SVG daltonisation — protanopia, deuteranopia or tritanopia — with adjustable strength, because most people affected are anomalous rather than dichromatic.
High contrast
Pure black on pure white, no shades and no transparency. Underlined blue links, drawn borders and focus rings.
Eco
Light on black with greyscale images: on an OLED panel, a black pixel is a pixel switched off.
Manual settings
Text size from 80 to 150 %, word spacing, letter spacing, line height. Each writes into the page only when it differs from its default.
Text-to-speech
Reads the current selection or the whole page, split at sentence boundaries. No external service: nothing leaves the browser.
Dyslexia typeface
An independent option. The font file is downloaded only if the visitor actually turns it on.
Six languages
English, French, Spanish, German, Italian and Portuguese. The interface follows the page's lang attribute, then the browser, or whatever you configure.
What it never sends anywhere, and the proof
These are not intentions. Each one is an assertion in the test suite, checked on every build, in a real browser — the only place where these assertions mean anything. A script dropped onto someone else’s site has to behave everywhere, including where you would not expect it to.
No network request, once loaded
No fetch, no XHR, no beacon, no tracking pixel. The script is loaded from our CDN, like any <script> tag — and that request is not logged. After that, it talks to nobody.
No server-side logs
No IP address, no referrer, no timestamp: serving the file leaves no trace with us. We do not know who visits our customers’ sites, and we could not find out after the fact.
No cookie
A single local storage entry, holding the preferences the visitor chose.
No detection, no profiling
Nothing is inferred about the visitor, their device or their behaviour.
No interference with screen readers
Your content is never hidden from assistive technology — only our own decorative elements carry aria-hidden.
Usage analytics without tracking
The script announces each change inside your page. You plug your own tooling in if you want to — nothing reaches us.
Code published to be read
The source is available and commented: audit it line by line, including for your own security requirements. None of this has to be taken on trust.
Forty-five automated tests
The eight modes, the setting bounds, the keyboard focus loop, the reset. Run in a real browser, on every build.
Under a strict Content-Security-Policy
Mounted under a nonce-based policy with no 'unsafe-inline', and not a single console violation.
From a third-party domain
Loaded from an origin other than the page: configuration is read, filters resolve, and preferences are stored under the visited site's origin — each site keeps its own.
No trace at rest
Until something is turned on, no rule is written into the page. After a reset, neither attribute nor variable remains: your CSS is exactly as it was.
Sealed off from your CSS
The interface lives in a shadow root. A site writing aggressive !important rules cannot distort it, and none of its rules leak back out.
No flash on load
Preferences are read and applied before the first paint. Visitors never see the page render with default settings and then jump.
Pricing
The whole widget, every mode and every language, from the free tier onwards: what you pay for is the number of domains and the customisation. Everyone is served by the same CDN, so everyone gets the same fixes.
Free
€0
- The full widget, every mode
- One domain
- Served from our CDN, fixes included
- Button placement is adjustable
Pro
€19 / month
- Three domains
- Your colours, your branding
- Choose which languages are served
- Email support
Agency
€79 / month
- Twenty-five client domains
- Consolidated invoicing
- One dashboard for every site
- Priority support
Public sector
Let's talk
- Unlimited domains
- EU hosting, service agreement
- Onboarding and training
- Invoicing on purchase order
Install
One line to paste, and nothing to maintain. The script is served from our CDN: fixes and new modes reach your visitors without you touching your site. It injects its styles, mounts its interface inside a shadow root, and restores the visitor's preferences before the first paint.
- Create your account
Free, no card required. The free tier covers one domain, with every mode and every language.
- Declare your domain
Your dashboard hands you a public key, and the line that goes with it.
- Paste the line into your page
In the <head> preferably: saved preferences then apply before the first paint, with no flash.
<script src="https://cdn.wideable.com/votre-cle/wideable.min.js" defer></script>The key identifies which configuration to serve — it is not a secret, and a script running in a browser could not hide one anyway. Settings live in your dashboard: they apply without you editing this line again.
What you set, and from where
Everything is set from your dashboard, never in your page: you change a value and the CDN serves it on the next load. What makes the bar usable on your site is open to every tier; what dresses it in your colours belongs to the paid ones.
| Setting | Default | What it does | Available with |
|---|---|---|---|
| Anchor corner | Bottom left | Which corner the button sits in — and where the panel unfolds from. Change it when a chat widget or a banner already occupies that corner. | Every tier |
| Horizontal offset | 20 px | Distance from the edge, in any CSS length. To clear something already in place. | Every tier |
| Vertical offset | 24 px | The same vertically: 96px to sit above a consent banner, for instance. | Every tier |
| Interface language | Automatic | Automatic follows your page’s lang attribute, then the visitor’s browser. Force it if your site declares its language poorly. | Every tier |
| Area read aloud | Detected | The selector for what gets read. Falls back to main, then article, then body. Set it if reading picks up your navigation. | Every tier |
| Accent colour | Wideable colour | The colour of the button and of the panel’s active elements. | Paid tiers |
| Dyslexia typeface | System fonts | The URL of a font you serve. It is downloaded only if the visitor turns the option on. | Paid tiers |
| Languages served | All six | Include only your audience’s languages, to lighten the file being served. | Paid tiers |
| Wideable mention | Shown | The line at the foot of the panel. Hiding it leaves the brand link at the top, which stays. | Paid tiers |
Frequently asked
How do I measure usage on my side?
We receive no statistics at all: nothing leaves your visitors’ browsers, and that is checked on every build. To measure on your side, listen for the event the widget fires inside your page.
document.addEventListener('wideable:change', (event) => {
console.log(event.detail) // { mode: 'dyslexie', fontScale: 120, … }
})Can I change a setting on a single page?
Yes. An attribute on the tag still wins, to handle one particular case — the bar getting in the way on a single page, say. The appearance settings reserved for paid tiers, however, do not open up this way.
<script
src="https://cdn.wideable.com/your-key/wideable.min.js"
data-position="top-right"
data-offset-y="96px"
defer></script>Can I open it from my own menu?
If your site already has an “Accessibility” link, wire it to the API rather than showing two competing entry points.
window.__wideable.open()
window.__wideable.setMode('dyslexie') // or null to turn it off
window.__wideable.setCvd('tritanopie') // protanopie | deuteranopie | tritanopie
window.__wideable.readPage()
window.__wideable.reset()What about a strict Content-Security-Policy?
A script-src 'self' policy blocks any third-party script: our domain has to be allowed. More quietly, a style-src 'self' without 'unsafe-inline' lets the script run but blocks the styles it injects — the widget then mounts with no appearance at all.
Wideable emits no style attribute, and picks up the nonce from its own tag when there is one:
<script nonce="{{ nonce }}" src="https://cdn.wideable.com/your-key/wideable.min.js" defer></script>Somewhere to try it
Material to transform, right here. Open the yellow button at the bottom left, turn a mode on, and watch what moves in the blocks below.
Something to read
It had been raining on the docks for three days. The cranes slept, huge and patient, and the water took on the colour of metal. They say that at that hour memories surface: the ones you keep, and the ones you thought you had given back.
He watched the rain write itself down the glass, each drop following the last without ever catching it. None of this would ever be told. Perhaps that was the only thing that mattered: that it happened at all, and that no one kept the record — “like tears in rain”, as the man said. Blade Runner, 1982.
Select this paragraph, turn on text-to-speech in the panel, then press play: the voice starts from your selection. The second button reads the whole page.
A table
| Criterion | Name | Status |
|---|---|---|
| 1.1.1 | Non-text content | Pass |
| 1.4.3 | Contrast (minimum) | To review |
| 2.1.1 | Keyboard | Pass |
| 2.2.2 | Pause, stop, hide | Fail |