HTML/CSS/JS : créer une option pour modifier la taille du texte à la volée

Ce tutoriel accessible vous permettra de copier/coller le code et de le personnaliser selon vos besoins.

Avoir un blog/site internet personnel, professionnel c'est bien, mais qu'il soit lisible par tout le monde c'est mieux. Or la majorité du web crée des sites avec du texte statique comme 12 ou 14px en taille de texte, résultat sur écrans 4K ou si le visiteur à des problèmes de vue il faut zoomer et déformer le design du site pour espérer lire quelque chose.

Je vous propose un guide pour corriger ça une fois pour toutes tout comme je l'ai fait moi même sur mon propre site web comme vous pouvez le voir dans les Options du site en haut à droite de chaque page.

Petit bonus, ma façon de faire est persistante et respectueuse de la confidentialité et vie privée.

Nous allons voir ensemble le HTML, le CSS et le JavaScript nécessaires pour mettre en place ce contrôle.

Le HTML

Pour le code HTML, je n'ai pas choisis de mettre un <input type="range"> pour la simple raison qu'ils ont tendance à bouger beaucoup trop vite or cette option est pour améliorer l'accessibilité donc ce serait contre-productif.

<div id="fontsize-control">
<div class="fontsize-control-wrapper">
    <span aria-label="Taille du texte" class="fa-solid fa-text-height"></span>
    <label for="customfontsize">Modifier la taille du texte : </label>
    <input aria-describedby="fontsize-help" id="customfontsize" inputmode="decimal" min="1" max="2" step="0.1" type="text" value="1.2"><span class="unit">rem.</span>
    <button aria-label="Réinitialiser la taille" aria-hidden="true" class="fa-solid fa-rotate-left" id="reset-fontsize" title="Réinitialiser la taille"></button>
    <span aria-label="Aide sur la taille du texte" class="tooltip-wrapper" tabindex="0">
    <span aria-hidden="true" class="fa-regular fa-circle-question help-icon"></span>
    <span aria-live="polite" class="tooltip-content" role="tooltip">Saisissez une valeur entre 1 et 2rem puis appuyez sur <kbd>Entrée</kbd>.<br>
    Vous pouvez aussi utiliser les flèches <kbd>↑</kbd> / <kbd>↓</kbd> dans le champ texte.</span>
</div>
</div>

Explication du code HTML

• <div id="fontsize-control"> : Conteneur principal du contrôle de taille du texte.
• <div class="fontsize-control-wrapper"> : Sous‑conteneur qui aligne les éléments (icône, label, champ, unité, aide).
• <span aria-label="Taille du texte" class="fa-solid fa-text-height"></span> : Icône visuelle (Font Awesome) représentant la taille du texte, avec description pour lecteurs d’écran.
• <label for="customfontsize">Modifier la taille du texte : </label> : Libellé associé au champ texte, relié par l’attribut for.
• <input ... id="customfontsize" ... type="text" value="1.2"> : Champ texte où l’utilisateur saisit la taille en rem.
  • aria-describedby : référence vers l’aide.
  • inputmode="decimal" : clavier numérique sur mobile.
  • min : valeur minimale autorisée.
  • max : valeur maximale autorisée.
  • step : étapes entre valeur min et max.
  • value="1.2" : valeur par défaut.
• <span class="unit">rem.</span> : Affiche l’unité juste après le champ pour clarifier.
• <button ... id="reset-fontsize" title="Réinitialiser la taille"></button>
  • <button ...> : Élément interactif qui servira à remettre la taille du texte à sa valeur par défaut.
  • aria-label="Réinitialiser la taille" : Fournit une description claire pour les lecteurs d’écran, afin que le bouton soit compréhensible même sans l’icône.
  • aria-hidden="true" : Masque l’icône décorative aux lecteurs d’écran, puisque l’information utile est déjà donnée par aria-label.
  • class="fa-solid fa-rotate-left" : Applique l’icône Font Awesome représentant une flèche circulaire (symbole de “reset”).
  • id="reset-fontsize" : Identifiant unique qui permettra de relier le bouton au script JavaScript.
  • title="Réinitialiser la taille" : Affiche une info-bulle au survol de la souris, utile pour les utilisateurs voyants.
• <span aria-label="Aide sur la taille du texte" class="tooltip-wrapper" tabindex="0"> : Conteneur du tooltip d’aide, accessible au clavier grâce à tabindex="0".
• <span aria-hidden="true" class="fa-regular fa-circle-question help-icon"></span> : Icône “?” déclencheur du tooltip, masqué aux lecteurs d’écran car l’aide est donnée ailleurs.
• <span aria-live="polite" class="tooltip-content" role="tooltip"> ... </span> : Texte d’aide affiché au survol ou au focus.
  • role="tooltip" : rôle explicite.
  • aria-live="polite" : annonce douce aux lecteurs d’écran.
  • Contient les instructions clavier (Entrée, ↑, ↓) mises en valeur avec <kbd>.

Le CSS

Dans ce CSS, on définit d’abord des variables pour la taille du texte --customfontsize qui sera la seule modifiable par le visiteur puis on définit --font-size-large pour la mise en valeur, --font-size-normal pour le contenu "normal" et --font-size-small pour le contenu "petit" comme les notes.

Elles servent à garder une cohérence sur tout le site.

Ensuite, on applique ces variables au body, aux classes .important et .note.

Enfin, on stylise le contrôle de taille du texte (#fontsize-control) et son tooltip pour qu’il soit clair, accessible et agréable à utiliser.

/* ===========================
   Variables générales
=========================== */
:root {
    --customfontsize: 1.2rem; /* valeur par défaut modifiable par l’utilisateur */
    --font-size-large: calc(var(--customfontsize) + 0.3rem); /* texte mis en valeur */
    --font-size-normal: var(--customfontsize); /* texte standard */
    --font-size-small: calc(var(--customfontsize) - 0.2rem); /* texte réduit (notes) */
}

/* ===========================
   Application des variables
=========================== */
/* Taille du texte par défaut du site */
body {
    font-size: var(--font-size-normal);
}

/* Texte mis en valeur */
.important {
    font-size: var(--font-size-large);
}

/* Texte secondaire / notes */
.note {
    font-size: var(--font-size-small);
}

/* ===========================
   Contrôle de taille du texte
=========================== */
#fontsize-control,
#fontsize-control:hover {
    padding: 0 20px; /* espace interne constant */
}

#fontsize-control:hover {
    background-color: #1e1e1e; /* contraste au survol */
    color: #eeeeee;
}

#fontsize-control {
    display: block;
    width: 100%;
}

#fontsize-control * {
    width: auto; /* évite que les enfants héritent d’une largeur fixe */
}

#fontsize-control label {
    margin-left: .3em; /* petit espace entre icône et label */
}

#fontsize-control input {
    box-sizing: border-box; /* inclut padding/border dans la largeur */
    color: #101010; /* couleur forcée pour lisibilité */
    cursor: text;
    line-height: 1.5;
    margin-left: .3em;
    padding: 0;
    text-align: center; /* valeur centrée dans le champ */
    width: 5em; /* largeur fixe pour la saisie */
}

/* Wrapper pour aligner icône, label et champ */
.fontsize-control-wrapper {
    align-items: center;
    display: inline-flex;
    height: 60px;
    width: 100%;
}

.fontsize-control-wrapper .unit {
    color: #eeeeee;
    font-size: var(--font-size-normal);
    margin-left: .3em;
}

#reset-fontsize {
    cursor: pointer;
}

/* ===========================
   Tooltip d’aide
=========================== */
#fontsize-control .tooltip-wrapper {
    display: inline-block;
    margin-left: .4em;
    position: relative; /* nécessaire pour positionner le contenu */
}

#fontsize-control .help-icon {
    cursor: help; /* icône “?” avec curseur d’aide */
}

/* Affichage du tooltip au focus ou au survol */
#fontsize-control .tooltip-wrapper:focus .tooltip-content,
#fontsize-control .tooltip-wrapper:hover .tooltip-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Style du contenu du tooltip */
#fontsize-control .tooltip-content {
    bottom: 125%; /* position au-dessus de l’icône */
    background-color: #1e1e1e;
    border-radius: 16px;
    box-shadow: 8px 8px 8px rgba(255, 0, 0, 0.5),
                -8px -8px 8px rgba(255, 0, 0, 0.5),
                8px -8px 8px rgba(255, 0, 0, 0.5),
                -8px 8px 8px rgba(255, 0, 0, 0.5); /* effet lumineux rouge */
    color: #eeeeee;
    font-size: var(--font-size-small);
    opacity: 0; /* caché par défaut */
    padding: .6em;
    position: absolute;
    right: -.5em;
    transform: translateY(10px); /* animation vers le haut */
    transition: opacity .3s ease, transform .3s ease; /* effet fluide */
    visibility: hidden;
    white-space: normal;
    width: max-content;
    z-index: 10; /* au-dessus du reste */
}

Le JS

Ce script JavaScript gère le contrôle de taille du texte.

Il initialise la valeur à partir du stockage local (localStorage), met à jour la variable CSS --customfontsize et permet à l’utilisateur de modifier la taille via le champ texte.

La validation se fait avec la touche Entrée, les flèches ↑ / ↓, ou lors de la sortie du champ (blur).

Le bouton reset permet de revenir à la taille par défaut et j'y ai associé le raccourci clavier ALT+R.

document.addEventListener('DOMContentLoaded', () => {
  const inputNumber = document.getElementById('customfontsize');
  const defaultSize = 1.2;

  // init
  const saved = localStorage.getItem('customfontsize');
  const initial = saved ? parseFloat(saved) : defaultSize;
  const resetBtn = document.getElementById('reset-fontsize');
  const root = document.documentElement;

  inputNumber.value = initial;
  root.style.setProperty('--customfontsize', initial + 'rem');

  // fonction commune
  function applyFontsize(value) {
    root.style.setProperty('--customfontsize', value + 'rem');
    localStorage.setItem('customfontsize', value);
    inputNumber.value = value;
  }

  // bouton reset
  resetBtn.addEventListener('click', () => {
    applyFontsize(defaultSize);
  });

  // raccourci global Alt+R
  document.addEventListener('keydown', (e) => {
    if (e.altKey && e.key.toLowerCase() === 'r') {
      e.preventDefault();
      applyFontsize(defaultSize);
    }
  });

  // champ texte : ne pas forcer pendant la saisie
  inputNumber.addEventListener('input', () => {
    // on laisse l’utilisateur taper librement
  });

  // validation avec entrée + flèches du clavier
  inputNumber.addEventListener('keydown', (e) => {
    let current = parseFloat(inputNumber.value.replace(',', '.')) || defaultSize;

    if (e.key === 'Enter') {
      e.preventDefault();
      let raw = inputNumber.value.replace(',', '.');
      let value = parseFloat(raw);
      if (!isNaN(value) && value >= 1 && value <= 2) {
        applyFontsize(value);
      } else {
        inputNumber.value = localStorage.getItem('customfontsize') || defaultSize;
      }
    }

    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      e.preventDefault();
      let step = e.key === 'ArrowUp' ? 0.1 : -0.1;
      let next = Math.min(2, Math.max(1, current + step));
      applyFontsize(Number(next.toFixed(1)));
    }
  });

  // validation finale au blur
  inputNumber.addEventListener('blur', () => {
    let raw = inputNumber.value.replace(',', '.');
    let value = parseFloat(raw);

    if (!isNaN(value) && value >= 1 && value <= 2) {
      applyFontsize(value);
    } else {
      // si invalide → on remet la dernière valeur connue
      inputNumber.value = localStorage.getItem('customfontsize') || defaultSize;
    }
  });
});

Explication du JS

• DOMContentLoaded : attend que la page soit chargée avant d’exécuter le script.
• const root = document.documentElement : cible l’élément racine <html> pour modifier la variable CSS --customfontsize.
• localStorage.getItem() : récupère la dernière valeur enregistrée par l’utilisateur.
• applyFontsize() : fonction commune qui applique la taille au site et la sauvegarde.
• const resetBtn : récupère le bouton reset pour lui associer un comportement.
• resetBtn.addEventListener('click') : réinitialise la taille à la valeur par défaut quand on clique sur le bouton.
• document.addEventListener('keydown') : ajoute un raccourci clavier global Alt+R pour réinitialiser la taille.
• input : laisse l’utilisateur taper librement sans validation immédiate.
• keydown :
  • Entrée : valide la valeur si elle est comprise entre 1 et 2.
  • ↑ / ↓ : augmente ou diminue la taille par pas de 0.1, arrondi à une décimale.
• blur : à la sortie du champ, vérifie la valeur et remet la dernière connue si invalide.
• Gestion des virgules : replace(',', '.') permet d’accepter les saisies avec virgule.