Le confort de lecture, choisi par vos visiteurs.
Wideable ajoute un petit bouton à votre site. Derrière, vos visiteurs ajustent la taille et l’espacement du texte, calment les animations, passent en vue lecture ou font lire la page à voix haute — selon ce qui leur convient. Rien n’est décidé à leur place.
<script src="./js/wideable.min.js" defer></script>59 ko · un seul fichier, aucune dépendance
La barre s’adapte à la langue de vos visiteurs
FrançaisEnglishEspañolDeutschItalianoPortuguês · d’autres à venir…
Ce que Wideable n’est pas
Les overlays d’accessibilité promettent depuis dix ans une conformité qui s’obtiendrait toute seule. Les régulateurs et les praticiens de l’accessibilité n’y croient pas, et ils ont raison : aucun script ne répare un site qu’il n’a pas construit. Voici donc ce que celui-ci ne prétend pas faire.
- Il ne rend pas votre site conforme.
Ni au RGAA, ni à l’European Accessibility Act, ni à aucune norme. Cela se joue dans la façon dont votre site est construit.
- Il ne réécrit pas votre code.
Aucune alternative textuelle inventée, aucun repère deviné, aucun titre réparé. Il ajuste la présentation et laisse votre HTML tel que vous l’avez écrit.
- Il ne détecte le handicap de personne.
Aucun profilage, aucune inférence, aucune supposition tirée du comportement. Le visiteur choisit ce dont il a besoin — lui seul le sait.
- Il ne remplace ni un audit ni les aides techniques.
Lecteurs d’écran, loupes et réglages du navigateur gardent la main. Wideable se place à côté d’eux ; il ne prend jamais le relais.
Huit modes, et tout le reste
Les modes sont mutuellement exclusifs — recliquer sur celui qui est actif le désactive. Les réglages manuels restent disponibles en permanence et se combinent librement avec n’importe quel mode.
Dyslexie
Ouvre l’espacement des mots, des lettres et des paragraphes, augmente l’interligne, force le fer à gauche. Une police dédiée peut s’ajouter.
Épilepsie
Arrête animations et transitions, met en pause vidéos et animations SVG, fige les GIF, et surveille les médias ajoutés ensuite.
Malvoyant
Agrandit le texte d’un quart, curseurs surdimensionnés, focus renforcé, liens soulignés pour ne jamais dépendre de la couleur seule.
Concentration
Assombrit la page hors d’une bande claire qui suit le pointeur, le focus clavier ou les flèches.
Lecture
Écarte navigation, encarts, pieds de page et contenus embarqués, ramène la colonne à 70 caractères et aère l’interligne.
Daltonisme
Daltonisation par filtre SVG — protanopie, deutéranopie ou tritanopie — avec réglage d’intensité, la plupart des personnes concernées étant anomales et non dichromates.
Contraste
Noir pur sur blanc pur, sans nuance ni transparence. Liens bleus soulignés, bordures et focus tracés.
Économie
Clair sur noir et images en niveaux de gris : sur une dalle OLED, un pixel noir est un pixel éteint.
Réglages manuels
Taille du texte de 80 à 150 %, espacement des mots, interlettrage, interlignage. Chacun n’écrit dans la page que s’il s’écarte de son défaut.
Synthèse vocale
Lit la sélection ou la page entière, découpée aux frontières de phrase. Aucun service externe : rien ne sort du navigateur.
Police dyslexie
Option indépendante. Le fichier de police n’est téléchargé que si le visiteur l’active réellement.
Six langues
Français, anglais, espagnol, allemand, italien et portugais. L’interface suit l’attribut lang de la page, puis le navigateur, ou ce que vous configurez.
Ce qu’il n’envoie nulle part, et ce qui le prouve
Ce ne sont pas des intentions. Chacun de ces points est une assertion de la suite de tests, vérifiée à chaque compilation, dans un vrai navigateur — seul endroit où ces assertions ont un sens. Un script déposé sur le site d’autrui doit se comporter correctement partout, y compris là où on ne l’attend pas.
Aucune requête réseau, une fois chargé
Ni fetch, ni XHR, ni balise-pixel. Le script est chargé depuis notre CDN, comme toute balise <script> — cette requête-là, nous ne la journalisons pas. Ensuite, il ne parle plus à personne.
Aucun journal côté serveur
Ni adresse IP, ni référent, ni horodatage : servir le fichier ne laisse aucune trace chez nous. Nous ne savons donc pas qui visite les sites de nos clients, et nous ne pouvons pas l’apprendre après coup.
Aucun cookie
Une seule entrée de stockage local, avec les préférences choisies par le visiteur.
Aucune détection, aucun profilage
Rien n’est déduit du visiteur, de son appareil ni de son comportement.
Aucune interférence avec les lecteurs d’écran
Votre contenu n’est jamais masqué aux aides techniques — seuls nos propres éléments décoratifs portent aria-hidden.
Des statistiques sans traçage
Le script annonce chaque changement dans votre page. Vous y branchez votre propre outil si vous le souhaitez — rien ne nous parvient.
Un code publié pour être lu
Le source est consultable et commenté : auditez-le, ligne à ligne, y compris pour vos exigences de sécurité. Rien là-dedans n’est à croire sur parole.
Quarante-cinq tests automatisés
Les huit modes, les bornes des réglages, la boucle de focus au clavier, la remise à zéro. Exécutés dans un vrai navigateur, à chaque compilation.
Sous Content-Security-Policy stricte
Monté sous une politique à nonce, sans ’unsafe-inline’, et sans une seule violation en console.
Depuis un domaine tiers
Chargé depuis une autre origine que la page : la configuration est lue, les filtres résolvent, et les préférences se rangent sous l’origine du site visité — chacun garde les siennes.
Sans trace au repos
Tant que rien n’est activé, aucune règle n’est écrite dans la page. Après une remise à zéro, il ne reste ni attribut ni variable : votre CSS retrouve exactement son état d’origine.
Hermétique à votre CSS
L’interface vit dans un shadow root. Un site aux règles !important agressives ne peut pas la déformer, et aucune de ses règles ne fuit en retour.
Sans clignotement au chargement
Les préférences sont relues et appliquées avant le premier rendu. Le visiteur ne voit jamais la page s’afficher en réglages par défaut avant de basculer.
Tarifs
Le widget entier, tous les modes et toutes les langues, dès le palier gratuit : ce qui se paie, c’est le nombre de domaines et la personnalisation. Tout le monde est servi par le même CDN, donc tout le monde reçoit les mêmes correctifs.
Gratuit
0 €
- Le widget complet, tous les modes
- Un domaine
- Servi par notre CDN, correctifs compris
- Placement du bouton réglable
Pro
19 € / mois
- Trois domaines
- Vos couleurs, votre marque
- Choix des langues servies
- Support par courriel
Agence
79 € / mois
- Vingt-cinq domaines clients
- Facturation groupée
- Un tableau de bord pour tous les sites
- Support prioritaire
Secteur public
Parlons-en
- Domaines sans limite
- Hébergement UE, engagement de service
- Prise en main et formation
- Facturation sur bon de commande
Installer
Une ligne à coller, et rien à maintenir. Le script est servi depuis notre CDN : les correctifs et les nouveaux modes arrivent chez vos visiteurs sans que vous touchiez à votre site. Il injecte ses styles, monte son interface dans un shadow root et restaure les préférences du visiteur avant le premier rendu.
- Créez votre compte
Gratuit, sans carte bancaire. L’offre gratuite couvre un domaine, avec tous les modes et toutes les langues.
- Déclarez votre domaine
Votre tableau de bord vous rend une clé publique, et la ligne à coller qui va avec.
- Collez la ligne dans votre page
Dans le <head> de préférence : les préférences enregistrées s’appliquent alors avant le premier rendu, sans clignotement.
<script src="https://cdn.wideable.com/votre-cle/wideable.min.js" defer></script>La clé identifie la configuration à servir — ce n’est pas un secret, et un script qui s’exécute dans un navigateur ne peut de toute façon rien cacher. Les réglages se font au tableau de bord : ils s’appliquent sans que vous retouchiez cette ligne.
Ce que vous réglez, et depuis où
Tout se règle depuis votre tableau de bord, jamais dans votre page : vous modifiez, et le CDN sert la nouvelle valeur au chargement suivant. Ce qui rend la barre utilisable sur votre site est ouvert à toutes les offres ; ce qui l’habille à vos couleurs appartient aux offres payantes.
| Réglage | Par défaut | Ce qu’il fait | Disponible avec |
|---|---|---|---|
| Coin d’ancrage | En bas à gauche | Le coin où se pose le bouton — et d’où le panneau se déplie. À changer si une messagerie ou un bandeau occupe déjà ce coin. | Toutes les offres |
| Décalage horizontal | 20 px | Écart depuis le bord, en toute longueur CSS. Pour dégager un élément déjà en place. | Toutes les offres |
| Décalage vertical | 24 px | Même chose en hauteur : 96px pour passer au-dessus d’un bandeau de consentement, par exemple. | Toutes les offres |
| Langue de l’interface | Automatique | Automatique suit l’attribut lang de votre page, puis le navigateur du visiteur. À forcer si votre site déclare mal sa langue. | Toutes les offres |
| Zone lue à voix haute | Détectée | Le sélecteur de ce qui est lu. À défaut : main, puis article, puis body. À préciser si la lecture attrape votre navigation. | Toutes les offres |
| Couleur d’accentuation | Couleur Wideable | La couleur du bouton et des éléments actifs du panneau. | Offres payantes |
| Police dyslexie | Polices système | L’URL d’une police que vous servez. Elle n’est téléchargée que si le visiteur active l’option. | Offres payantes |
| Langues servies | Les six | N’inclure que les langues de votre public, pour alléger le fichier servi. | Offres payantes |
| Mention Wideable | Affichée | La phrase en bas du panneau. La masquer laisse le lien de marque en tête, qui demeure. | Offres payantes |
Questions fréquentes
Comment mesurer l’usage de mon côté ?
Nous ne recevons aucune statistique : rien ne sort du navigateur de vos visiteurs, et c’est vérifié à chaque compilation du script. Pour mesurer chez vous, écoutez l’événement que le widget émet dans votre page.
document.addEventListener('wideable:change', (event) => {
console.log(event.detail) // { mode: 'dyslexie', fontScale: 120, … }
})Puis-je changer un réglage sur une seule page ?
Oui. Un attribut posé sur la balise reste prioritaire, pour traiter un cas particulier — la barre gêne un élément d’une seule page, par exemple. Les réglages d’apparence réservés aux offres payantes, eux, ne s’ouvrent pas par ce moyen.
<script
src="https://cdn.wideable.com/votre-cle/wideable.min.js"
data-position="top-right"
data-offset-y="96px"
defer></script>Puis-je l’ouvrir depuis mon propre menu ?
Si votre site a déjà un lien « Accessibilité », branchez-le sur l’API plutôt que d’afficher deux entrées concurrentes.
window.__wideable.open()
window.__wideable.setMode('dyslexie') // ou null pour désactiver
window.__wideable.setCvd('tritanopie') // protanopie | deuteranopie | tritanopie
window.__wideable.readPage()
window.__wideable.reset()Et avec une Content-Security-Policy stricte ?
Une politique script-src ’self’ bloque tout script tiers : notre domaine doit y être autorisé. Plus discret, un style-src ’self’ sans ’unsafe-inline’ laisse le script s’exécuter mais bloque les styles qu’il injecte — le widget se monte alors sans aucune apparence.
Wideable ne produit aucun attribut style, et reprend le nonce de sa propre balise quand il y en a un :
<script nonce="{{ nonce }}" src="https://cdn.wideable.com/votre-cle/wideable.min.js" defer></script>De quoi essayer
De la matière à transformer, ici même. Ouvrez le bouton jaune en bas à gauche, activez un mode, et regardez ce qui bouge dans les blocs ci-dessous.
Un texte à lire
Il pleuvait sur le port depuis trois jours. Les grues dormaient, énormes et patientes, et l’eau prenait la couleur du métal. On dit qu’à cette heure-là les souvenirs remontent : ceux qu’on garde, et ceux qu’on croyait avoir rendus.
Il regarda la pluie s’écrire sur la vitre, chaque goutte suivant la précédente sans jamais la rattraper. Rien de tout cela ne serait raconté. C’était peut-être la seule chose qui comptait : que ça ait eu lieu, et que personne n’en garde la trace — « like tears in rain », comme dit l’autre. Blade Runner, 1982.
Sélectionnez ce paragraphe, activez la synthèse vocale dans le panneau, puis appuyez sur lecture : la voix part de votre sélection. Le second bouton lit la page entière.
Un tableau
| Critère | Intitulé | État |
|---|---|---|
| 1.1 | Alternative textuelle des images | Conforme |
| 3.2 | Contraste du texte | À vérifier |
| 7.3 | Contrôle au clavier | Conforme |
| 13.8 | Contenu en mouvement contrôlable | Non conforme |