Plus de confort de lecture sur Korben
Je viens de pousser en prod une fonctionnalité sur laquelle je bosse depuis quelques temps et comme je suis content du résultat, c’est le moment de partager ça avec vous.
En haut à droite du site, juste à côté de l’icône qui change le thème, vous trouverez un petit bouton “abc” qui jusqu’à présent ne servait qu’à appliquer
une police spéciale dyslexique
à mon contenu. Mais j’ai amélioré un peu tout ça pour que maintenant niveau “Confort de lecture” vous soyez refait !
En cliquant donc sur cette icône, s’ouvre un petit panneau de config avec dedans de quoi configurer votre expérience de lecture aux petits oignons. Police adaptée pour la dyslexie, espacement variable, fond couleur crème, mode audio TTS, lignes colorées pour guider l’œil…etc tout ça sans dépendre d’un service tiers.
Ensuite, vos réglages sont conservés dans le localStorage de votre navigateur pour les retrouver à chaque visite et il y a un petit lien en bas de la fenêtre pour réinitialiser tout ça.
Maintenant, l’histoire derrière cette feature, parce qu’elle est intéressante. À la base j’étais parti pour recoder un équivalent du ”
Bionic Reading
“, vous savez ce truc à la mode qui met en gras le début de chaque mot pour soi-disant accélérer la lecture. J’avais déjà bien avancé quand je suis tombé sur une
étude scientifique de 2024
qui démontait complètement le concept. En gros, les chercheurs ont mesuré que cela ne produisait aucun effet positif sur la vitesse de lecture ni sur la compréhension. Que dalle…
Du coup, pivot complet… J’ai tout repris pour bâtir un système basé sur ce qui marche vraiment, avec un principe simple : Chaque option du panneau affiche un badge “Sci ✓” si elle est soutenue par la recherche, ou “Pref” si c’est une préférence subjective documentée. Comme ça vous savez sur quoi vous cliquez et on évite le marketing déguisé en science.

Côté polices donc, vous avez 4 choix. La police par défaut du site,
Lexend
qui est une “variable font” développée par la Dr. Bonnie Shaver-Troup avec des résultats publiés montrant une amélioration significative de la fluidité de lecture,
Atkinson Hyperlegible
créée par le Braille Institute spécifiquement pour les personnes malvoyantes, et enfin OpenDyslexic que j’avais déjà. Pour cette dernière, je l’ai mise avec un badge “Pref” parce que la communauté dyslexique l’apprécie mais les études sont moins solides scientifiquement.

Les sliders d’espacement permettent également de jouer sur trois axes : espace entre les lettres, hauteur de ligne, largeur de la colonne de texte. Tout est calibré pour être utile sans casser le rendu. Vous pouvez aussi activer un fond crème qui utilise la couleur Solarized base3 (c’est #FDF6E3, reconnue dans la communauté des dev pour son confort de lecture sur une longue durée), et le texte non-justifié qui évite les “rivières” blanches entre mots qui posent problème notamment aux dyslexiques.

Pour le guide visuel, je vous ai mis 2 options. “Lignes colorées” qui applique un gradient cosinus caractère par caractère sur chaque ligne, avec une palette noir-bleu-noir-rouge qui alterne et permet à l’œil de suivre naturellement la progression du texte.

Et ce que j’ai appelé Saccade que j’ai gardé en option, marqué d’un badge orange “Pref ⚠” parce que la science dit que ça sert pas à grand chose, mais que si vous aimez visuellement, bah au moins c’est dispo !
Et puis il y a le mode audio (TTS) qui dépend de la qualité des voix installées sur votre système. Y’a pas d’IA là dedans, donc ça peut donner une lecture robotique sur certains OS. Une fois activé, ça apparaît en haut des articles avec une estimation de durée. Ça utilise la Web Speech API native de votre navigateur, donc zéro service externe une fois encore et ça respecte la voix système que vous avez configurée.

À ma connaissance, je suis le seul à proposer ce niveau de personnalisation pour l’accessibilité. N’oubliez pas qu’au delà de la démarche, l’accessibilité numérique est devenu une obligation légale en Europe avec l’
European Accessibility Act
qui s’applique depuis juin 2025 (Qui en a entendu parlé ? Pas grand monde je pense).
En tout cas, si je peux me permettre ce luxe de bosser sur des trucs qui ne rapportent pas un kopeck mais qui rendent le site plus agréable et plus accessible, c’est uniquement grâce à
mes Patreons
.
Alors un énorme merci à eux.

Leave a Comment