tailwind-dys-accessibility

Plugin CSS pour Tailwind v4 — accessibilité des personnes DYS (dyslexie, dyspraxie, dyscalculie…).

Installation

bashnpm install tailwind-dys-accessibility

Dans ton fichier CSS principal :

css@import "tailwindcss"; @import "tailwind-dys-accessibility/dys.css";

Usage rapide

Mode global (recommandé)

html

Toggle JavaScript avec persistance

jsconst btn = document.getElementById('btn-dys');

// Restaurer au chargement if (localStorage.getItem('dys') === 'true') { document.body.classList.add('dys-mode'); }

btn.addEventListener('click', () => { document.body.classList.toggle('dys-mode'); localStorage.setItem('dys', document.body.classList.contains('dys-mode')); });

Classes disponibles

Typographie

ClasseDescriptiondys-fontActive Atkinson Hyperlegibledys-size-basefont-size: 1.125rem (18px — minimum recommandé)dys-size-lgfont-size: 1.25rem (20px)dys-size-xlfont-size: 1.5rem (24px)

Espacement & lisibilité

ClasseDescriptiondys-textletter-spacing, word-spacing, line-height augmentésdys-paragraphParagraphes séparés, alignés à gauche, largeur limitéedys-no-justifyForce text-align: leftdys-columnsLimite à 65 caractères par ligne (max-width: 65ch)

Fonds doux (tous WCAG AA)

ClasseCouleurdys-bg-cream#FDF6E3 — beige Solarizeddys-bg-yellow#FEFBD8 — jaune très pâledys-bg-green#F0F7EE — vert menthedys-bg-gray#F5F5F0 — gris neutre

Liens

ClasseDescriptiondys-linkSoulignement offset + épaisseur lisibles

Numérique

ClasseDescriptiondys-zero-slashedZéro barré — évite la confusion 0 / Odys-tabularChiffres à chasse fixe pour les tableaux

Aide à la lecture

ClasseDescriptiondys-rulerSurligne la ligne au survol (règle de lecture virtuelle)dys-focus-paraAtténue les paragraphes adjacents au survol

Mode global

ClasseDescriptiondys-modeCombine tous les réglages essentiels en une classe

Police recommandée

Ajouter Atkinson Hyperlegible dans ton :

html

Ou en local : https://brailleinstitute.org/freefont

Personnalisation via variables CSS

Toutes les valeurs sont surchargeables :

css:root { --dys-font: "OpenDyslexic", sans-serif; --dys-size-base: 1.25rem; --dys-line-height: 2; --dys-letter: 0.08em; --dys-bg-cream: #FFFDE7; }