Comment ajouter un mode Dyslexique sur Wordpress sans plug-in

Pourquoi ce mode ?

L’accessibilité numérique est un sujet qui me tient profondément à cœur. Mon frère est dyslexique et je vois chaque jour à quel point lire et écrire peuvent être des tâches complexes et exigeantes pour lui. Et que dire de son parcours scolaire, souvent semé d’embûches…

C’est pourquoi, j’ai décidé d’ajouter à mon blog WordPress un mode "dyslexique" qui améliore la lisibilité en utilisant une police conçue spécifiquement pour cela : OpenDyslexic.

Nous allons voir comment ajouter ce mode facilement.

Télécharger OpenDyslexic

Plusieurs polices existent :

• OpenDyslexic
• Lexend, Andika (google fonts)
• Atkinson Hyperlegible
• Read Regular
• Dyslexie Font

Mon choix s'est arrêté sur OpenDyslexic.

👉 https://github.com/antijingoist/OpenDyslexic

Dans le dossier webfonts, il faut télécharger les fichiers suivants au format .woff2 :

• OpenDyslexic-Regular.woff2
• OpenDyslexic-Italic.woff2
• OpenDyslexic-Bold.woff2
• OpenDyslexic-Bold-Italic.woff2

Je les ai ensuite placés dans le dossier fonts de mon thème WordPress. (

-> /wp-content/themes/nom_de_votre_theme/fonts/open-dyslexic/

Déclaration des Polices

Ajouter dans votre fichier fonts.css le code suivant :

@font-face {
  font-family: 'OpenDyslexic';
  src: url('./open-dyslexic/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('./open-dyslexic/OpenDyslexic-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('./open-dyslexic/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('./open-dyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

Html, Css, JS et Php

Html

Ajout d'un bouton et du svg dans le header du site. J'ai récupéré et adapté le svg sur le site svgrepo.

<button id="dyslexic-toggle" title="<?php echo esc_attr(sbt_get_config('msg_switch_dyslexic'));?>" class="rounded-full bg-transparent transition hover:scale-125 transition-transform duration-200">                             
                                <svg id="dyslexic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="green" class="h-7 w-7">
                                    <g>
                                    <path  d="M504.556,297.257c-4.745-7.638-11.463-13.868-19.446-18.003c-1.687-0.89-3.531-1.694-5.498-2.426h-0.28
                                        c-2.326,0-4.551-0.703-6.424-2.003c-3.504-0.768-7.1-1.156-10.711-1.156c-11.499,0-22.288,3.804-31.211,10.997
                                        c-2.002,1.615-4.515,2.505-7.084,2.505c-3.439,0-6.647-1.529-8.801-4.2c-1.895-2.347-2.764-5.29-2.44-8.291
                                        c0.315-3.008,1.787-5.7,4.134-7.602c12.792-10.322,28.907-16.007,45.381-16.007c5.255,0,10.509,0.574,15.663,1.723
                                        c9.648-7.638,15.749-18.47,17.271-30.759c0.244-1.938,0.366-3.891,0.366-5.822c0-11.255-4.121-22.166-11.607-30.694
                                        c-7.545-8.585-17.946-14.098-29.295-15.506c-1.378-0.172-2.77-0.286-4.156-0.33c-1.02,1.156-2.082,2.297-3.18,3.403
                                        c-4.451,4.479-9.935,8.542-16.775,12.44c-5.154,2.922-10.998,5.678-17.365,8.191c-11.032,4.343-19.675,6.417-19.761,6.432
                                        c-0.833,0.201-1.723,0.302-2.613,0.302c-5.233,0-9.741-3.546-10.982-8.629c-0.711-2.942-0.23-5.972,1.342-8.542
                                        c1.529-2.519,3.919-4.299,6.762-5.046l0.222-0.05l2.053,5.334l-1.414-5.506l2.032-0.553c1.823-0.517,4.407-1.299,7.465-2.332
                                        c5.527-1.888,13.674-5.025,21.097-9.246c4.896-2.778,9.009-5.786,11.88-8.685c1.644-1.666,3.252-3.503,4.788-5.477l0.732-0.905
                                        c7.056-9.324,11.14-21.046,11.133-32.582c-0.014-11.916-4.221-22.92-12.167-31.836c-9.44-10.566-22.985-16.632-37.17-16.632
                                        c-12.239,0-24.012,4.493-33.142,12.648c-2.074,1.852-4.745,2.871-7.523,2.871c-3.223,0-6.296-1.378-8.435-3.782
                                        c-2.002-2.247-3.014-5.147-2.85-8.155c0.173-3.015,1.508-5.779,3.755-7.789c4.895-4.371,10.315-8.033,16.15-10.918
                                        c-1.436-10.789-6.374-20.824-14.141-28.591c-9.411-9.411-21.915-14.587-35.21-14.593c-13.302,0.006-25.806,5.182-35.216,14.593
                                        c-9.404,9.404-14.579,21.916-14.586,35.209v81.187h46.4c6.23,0,11.298,5.075,11.298,11.298c0,6.23-5.068,11.299-11.298,11.299
                                        h-46.4v55.74c13.459,0.631,24.844,2.434,34.685,5.477c11.736,3.61,21.377,9.167,28.634,16.496c4.286,4.328,7.903,9.439,10.76,15.19
                                        c3.712,7.515,5.7,15.167,7.021,20.996c0.725,3.231,1.357,6.424,1.967,9.54c1.048,5.276,2.031,10.258,3.338,14.672
                                        c1.199,4.063,2.562,7.321,4.185,9.97c2.003,3.302,4.422,5.786,7.594,7.839c4.516,2.886,10.473,4.781,18.205,5.786
                                        c2.972,0.373,5.635,1.895,7.486,4.278c1.852,2.398,2.656,5.37,2.276,8.356c-0.732,5.628-5.549,9.863-11.198,9.863l-1.465-0.101
                                        c-9.454-1.214-17.314-3.553-24.04-7.142c-6.403-3.403-11.751-8.026-15.885-13.718c-2.412-3.288-4.422-6.927-6.152-11.098
                                        c-1.788-4.307-3.202-8.951-4.594-15.06c-0.711-3.158-1.328-6.317-1.946-9.447c-0.632-3.187-1.256-6.352-1.974-9.439
                                        c-2.068-9.03-4.516-15.24-7.947-20.135c-2.326-3.338-5.132-6.138-8.592-8.557c-4.695-3.273-10.488-5.778-17.709-7.659
                                        c-6.97-1.816-15.239-2.994-24.65-3.489v207.346c0.007,13.294,5.183,25.806,14.579,35.217c9.418,9.404,21.922,14.579,35.224,14.586
                                        c13.294-0.006,25.798-5.182,35.21-14.586c9.404-9.418,14.586-21.923,14.586-35.217c0.007-7.2-1.967-15.103-5.427-21.686
                                        c-3.934-7.531-9.411-13.086-16.266-16.532c-5.298-2.641-11.162-3.933-17.931-3.948c-6.224,0-11.292-5.061-11.292-11.284
                                        c0-6.239,5.068-11.306,11.298-11.306c7.717,0,15.039,1.228,21.765,3.654c6.295,2.261,12.096,5.584,17.235,9.863
                                        c8.973,7.501,15.786,17.788,19.705,29.746c2.297,7.028,3.503,14.457,3.503,21.492c0.007,5.613-0.639,11.183-1.916,16.625
                                        c5.212,1.78,10.732,2.713,16.187,2.713c12.188-0.007,23.933-4.48,33.049-12.591c10.61-9.44,16.697-23.007,16.704-37.226
                                        c0-6.023-1.077-11.923-3.18-17.544c-2.139-5.693-5.312-10.926-9.411-15.541c-4.135-4.659-3.712-11.809,0.933-15.95
                                        c2.082-1.845,4.745-2.85,7.508-2.85c3.23,0,6.31,1.378,8.456,3.797l0.783,0.897l0.517,0.087c0.352,0.05,0.574,0.071,1.098,0.093
                                        c0.459,0.007,1.098,0.014,1.981,0.014c13.294-0.007,25.806-5.183,35.218-14.586c9.403-9.418,14.579-21.922,14.586-35.217
                                        C511.994,314.169,509.416,305.103,504.556,297.257z"/>
                                    <path  d="M194.906,11.453c-13.302,0.006-25.806,5.182-35.217,14.593c-7.767,7.767-12.706,17.81-14.141,28.584
                                        c5.822,2.886,11.241,6.539,16.144,10.918l0.797,0.783l0.826,0.947l1.658,1.823c1.5,1.622,3.682,3.948,6.352,6.618
                                        c4.831,4.853,12.232,11.845,20.078,17.637c5.204,3.848,10.078,6.762,14.112,8.435c2.8,1.163,4.752,1.557,5.9,1.687
                                        c3.008,0.337,5.7,1.823,7.58,4.177c1.888,2.355,2.742,5.305,2.404,8.306c-0.639,5.728-5.462,10.05-11.219,10.05l-1.249-0.071
                                        c-3.862-0.431-7.81-1.508-12.074-3.281c-3.546-1.472-7.164-3.366-11.077-5.8c-6.137-3.826-12.763-8.88-19.69-15.01
                                        c-10.142-8.987-17.902-17.587-19.898-19.841c-9.08-7.903-20.674-12.253-32.697-12.253c-14.178,0.007-27.723,6.066-37.155,16.632
                                        c-8.162,9.124-12.648,20.903-12.655,33.142c0,8.312,2.074,16.453,6.022,23.739h0.136c3.726,0,7.473,0.28,11.127,0.847
                                        c6.166,0.962,10.394,6.74,9.446,12.892c-0.869,5.549-5.556,9.576-11.155,9.576c-0.574,0-1.163-0.044-1.751-0.13
                                        c-2.498-0.394-5.083-0.588-7.667-0.588c-0.596,0-1.184,0.007-1.788,0.021c-12.964,0.467-25.081,5.872-34.097,15.225
                                        c-8.987,9.332-13.933,21.592-13.933,34.513c0,0.596,0.007,1.199,0.022,1.802c0.473,13.345,6.324,25.936,16.151,34.944
                                        c4.508-0.861,9.073-1.299,13.603-1.299c16.496,0,32.611,5.685,45.396,16.007l1.12,1.02l0.855,0.962
                                        c0.388,0.423,0.983,1.047,1.766,1.838c2.218,2.239,4.616,4.436,7.121,6.539c5.549,4.652,14.342,11.062,24.773,15.204
                                        c7.113,2.821,14.112,4.25,20.796,4.25c6.23,0,11.298,5.067,11.298,11.298s-5.068,11.299-11.298,11.299
                                        c-9.584-0.008-19.382-1.974-29.13-5.85c-7.581-3.014-15.154-7.179-22.518-12.383c-10.229-7.242-17.25-14.514-19.604-17.092
                                        c-8.807-6.862-19.367-10.494-30.572-10.494c-8.075,0-15.785,1.874-22.913,5.585c-7.975,4.135-14.701,10.365-19.446,18.003
                                        c-4.86,7.846-7.436,16.912-7.444,26.215c0.008,13.287,5.183,25.792,14.586,35.209c9.411,9.404,21.922,14.579,35.217,14.586
                                        c1.644,0,2.434-0.007,3.094-0.078l0.445-0.058l0.84-0.955c2.146-2.419,5.226-3.797,8.456-3.797c2.764,0,5.427,1.005,7.501,2.85
                                        c2.254,2.002,3.597,4.766,3.776,7.788c0.172,3.008-0.833,5.908-2.842,8.162c-4.092,4.615-7.264,9.856-9.404,15.548
                                        c-2.11,5.621-3.18,11.514-3.18,17.537c0.006,14.213,6.094,27.78,16.696,37.226c9.124,8.111,20.868,12.584,33.056,12.591
                                        c5.456,0,10.976-0.933,16.187-2.713c-1.278-5.427-1.917-10.997-1.917-16.625c0-8.995,1.91-18.276,5.513-26.868
                                        c4.049-9.662,10.164-18.083,17.688-24.356c2.031-1.694,4.601-2.627,7.235-2.627c3.368,0,6.525,1.479,8.679,4.063
                                        c3.977,4.781,3.338,11.916-1.435,15.908c-4.76,3.962-8.679,9.404-11.342,15.756c-2.419,5.764-3.754,12.203-3.747,18.126
                                        c0,13.294,5.182,25.798,14.586,35.217c9.411,9.404,21.916,14.579,35.217,14.586c13.294-0.006,25.806-5.182,35.217-14.586
                                        c9.396-9.411,14.572-21.923,14.579-35.217v-90.54h-42.166c-6.223,0-11.291-5.061-11.291-11.292c0-6.23,5.068-11.299,11.291-11.299
                                        h42.166v-68.668c-4.796-2.21-10.036-3.374-15.334-3.38c-3.718,0-7.436,0.574-11.047,1.694c-9.447,3.266-18.972,4.96-28.139,4.96
                                        c-17.45,0-33.35-6.202-44.864-17.458c-10.948-10.681-17.236-25.411-17.242-40.421c-0.007-13.344,4.751-26.1,13.782-36.889
                                        c2.153-2.585,5.312-4.056,8.671-4.056c2.642,0,5.212,0.934,7.236,2.627c4.781,3.999,5.42,11.127,1.436,15.908
                                        c-5.642,6.776-8.513,14.32-8.52,22.418c0,8.937,3.797,17.78,10.422,24.248c7.408,7.2,17.465,11.012,29.087,11.026
                                        c6.676,0,13.76-1.285,21.046-3.811c6.123-1.924,12.11-2.836,18.14-2.836c5.204,0,10.33,0.675,15.326,2.032V61.256
                                        c-0.008-13.294-5.183-25.806-14.579-35.209C220.712,16.635,208.2,11.46,194.906,11.453z"/>
                                </g>
                                </svg>

                            </button>

Css

Ajout du css dans mon fichier base.css qui sera ensuite intégré à style.css grâce à la compilation de tailwind. Ou ajouter simplement ce code CSS dans votre feuille de style principale.

body.dyslexic-mode {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.6em;
  text-align: left !important;
  background-color: #fefefe;
  color: #000;
}

Js

Le Javascript pour toggle le mode dyslexique et sauvegarder le mode dans les préférences de l'utilisateur sur son navigateur (localstorage). Attention, j'ai un menu spécial mobile donc deux boutons activables.

document.addEventListener('DOMContentLoaded', function () {
  const body = document.body;
  const toggleButtons = [
    document.getElementById('dyslexic-toggle'),
    document.getElementById('dyslexic-toggle-mobile')
  ];

  // Appliquer le mode au chargement
  if (localStorage.getItem('dyslexic-mode') === 'enabled') {
    body.classList.add('dyslexic-mode');
  }

  toggleButtons.forEach(btn => {
    if (btn) {
      // Ajouter un écouteur d'événement pour le clic sur le bouton
      btn.addEventListener('click', function () {
        body.classList.toggle('dyslexic-mode');
        if (body.classList.contains('dyslexic-mode')) {
          // Enregistrer l'état dans le localStorage
          localStorage.setItem('dyslexic-mode', 'enabled');
        } else {
          // Supprimer l'état du localStorage
          localStorage.removeItem('dyslexic-mode');
        }
      });
    }
  });
});

Php

Pour charger ce code javascript, j'ai créé un fichier dyslexic.js dans le dossier assets et je le charge dans le fichier functions.php de mon theme.

wp_enqueue_script('dyslexic', get_template_directory_uri() . '/assets/dyslexic.js', array(), null, true);

Résumé

Rendre un site plus accessible, c’est le rendre plus humain. Ajouter un mode dyslexique est une petite action, mais qui peut faire une vraie différence pour certains lecteurs.

La police OpenDyslexic est libre, simple à intégrer, et compatible avec tous les navigateurs modernes. Grâce à cette mise en place, mon frère (et peut-être d'autres !) peut désormais lire mes articles plus confortablement. (note pour moi, mon frère ne lira certainement jamais cet article)

Si vous aussi vous souhaitez améliorer l’accessibilité de votre site, n’hésitez pas à intégrer cette fonctionnalité. C’est simple et utile.