Skip to Content
AccessibilitéPartie 7 — Texte, couleur & contraste7.5 — Langue & lisibilité

Chapitre 7.5 — Langue & lisibilité

⏱️ TL;DR — Un lecteur d’écran doit savoir dans quelle langue prononcer ta page. Déclare-la sur <html> avec l’attribut lang (critère 3.1.1), et marque les passages étrangers avec un lang local (3.1.2) — sinon un mot anglais est lu avec l’accent français, souvent incompréhensible. Au-delà de la machine, la lisibilité est une affaire d’accessibilité cognitive : langage clair, lignes ni trop longues ni trop courtes, pas de texte justifié, interlignage confortable, polices lisibles.

🎯 Objectifs

  • Déclarer la langue principale de la page (3.1.1) et comprendre son impact.
  • Marquer les changements de langue dans le contenu (3.1.2).
  • Améliorer la lisibilité : longueur de ligne, alignement, interlignage, police.
  • Relier ces choix à l’accessibilité cognitive (Partie 15).

lang sur la page : le geste minimal

L’attribut lang sur la balise racine dit à la technologie d’assistance quelle voix et quelles règles de prononciation utiliser. Sans lui, le lecteur d’écran devine — souvent mal.

<!-- ❌ Aucune langue déclarée : le lecteur d'écran devine -->
<html>
 
<!-- ✅ Langue principale déclarée (critère 3.1.1) -->
<html lang="fr">

En Next.js, ça se règle une fois pour toutes dans le layout racine : la balise <html> doit porter lang="fr" (ou la langue du site). C’est une ligne, et c’est l’un des tout premiers points qu’un audit vérifie.

♿ Côté utilisateur — Sans lang, un lecteur d’écran configuré par défaut peut lire du français avec des règles de prononciation anglaises : « bonjour » devient une bouillie méconnaissable. L’utilisateur aveugle passe alors un temps fou à décoder, ou abandonne. Une seule ligne d’attribut change tout le confort d’écoute de la page.

lang sur un passage : les mots étrangers

Quand tu insères un mot ou une phrase dans une autre langue que celle de la page, marque ce fragment avec son propre lang (critère 3.1.2). Le lecteur d’écran bascule alors sur la bonne prononciation le temps du passage.

<p lang="fr">
  On appelle ce comportement le
  <span lang="en">progressive enhancement</span>,
  puis on revient au français.
</p>

Sans le span lang="en", « progressive enhancement » serait lu à la française. Nuance importante : les noms propres et les termes passés dans l’usage courant (comme « week-end », « email » ou « web ») n’ont pas besoin d’être marqués. Réserve lang aux vrais passages étrangers dont la prononciation compte.

⚠️ Piège — Marquer trop, ou pas assez. Coller un lang="en" sur chaque mot anglicisé du jargon dev (« un bug », « le cache ») alourdit le HTML pour rien et hache la voix de synthèse. À l’inverse, une citation entière en anglais non marquée est illisible à l’oreille. Le bon curseur : marque les phrases et expressions vraiment étrangères, laisse tranquilles les termes techniques entrés dans l’usage.

La lisibilité : au-delà de la machine

Déclarer la langue règle la prononciation. La lisibilité, elle, rend le texte réellement absorbable — surtout pour les personnes dyslexiques, fatiguées, ou en difficulté de lecture. Ce sont des choix de mise en forme simples et à fort impact.

Longueur de ligne. Une ligne trop longue fait « perdre » la ligne suivante ; trop courte, elle hache la lecture. Vise environ 45 à 75 caractères par ligne. En CSS, max-width en unité ch est fait pour ça.

/* ✅ Longueur de ligne confortable */
.prose {
  max-width: 65ch;
  line-height: 1.6;
}

Évite le texte justifié. Le text-align: justify crée des espaces inégaux entre les mots — les fameuses « rivières » blanches — qui gênent particulièrement les lecteurs dyslexiques. Préfère text-align: left (aligné à gauche, bord droit libre).

/* ❌ Rivières blanches, pénibles à suivre */
.prose { text-align: justify; }
 
/* ✅ Fer à gauche : rythme régulier */
.prose { text-align: left; }

Interlignage. Un line-height d’au moins 1,5 pour les paragraphes aère le texte et facilite le suivi ligne à ligne. C’est aussi une des valeurs cibles de l’espacement du texte (1.4.12, vu au chapitre précédent).

Polices lisibles. Choisis une police sans fioritures, aux formes de lettres nettes et bien distinctes (attention aux confusions l / I / 1). Évite le tout en capitales sur de longs passages : les mots perdent leur silhouette et deviennent plus durs à reconnaître. Il existe des polices pensées pour la dyslexie, mais une bonne police système lisible et un espacement généreux font déjà l’essentiel du travail.

Le lien avec l’accessibilité cognitive

Langue déclarée, langage clair, mise en page aérée : tout ça relève de l’accessibilité cognitive — la famille la plus large et la plus oubliée (revoir la Partie 1). Un texte court, structuré en titres, avec des phrases simples, profite à tout le monde : la personne dyslexique, celle qui lit dans une deuxième langue, celle qui est pressée sur mobile. On industrialise ces bonnes pratiques (guide de style, composants, revues) en Partie 15 — Design accessible & industrialiser.

🧭 Sur A11yLearn — Le layout racine d’A11yLearn (app/layout.tsx) rendait un <html> sans attribut lang : un audit l’a signalé au premier scan. On a mis <html lang="fr">. Puis, dans une fiche de cours, la phrase « ce module couvre le progressive enhancement » était lue « progressif énanceumeun » par NVDA. On a enveloppé le terme : <span lang="en">progressive enhancement</span>. Deux corrections minuscules, un confort d’écoute transformé — la page se déclare française et sait basculer en anglais pile là où il faut.

✏️ Exercices

Exercice 1 — Répare l’en-tête HTML. Une application Next.js rend <html> sans attribut, et une page contient la phrase : « notre approche s’appelle mobile first ». Deux corrections à apporter, lesquelles ?

✅ Solution

(1) Déclarer la langue principale sur la racine : <html lang="fr"> (critère 3.1.1), à faire dans le layout racine. (2) Marquer le passage anglais pour la prononciation : <span lang="en">mobile first</span> (critère 3.1.2), sinon le lecteur d’écran le lit à la française. Résultat : la page se déclare en français et bascule en anglais uniquement sur l’expression étrangère.

Exercice 2 — Améliore la lisibilité. Un article s’affiche pleine largeur (lignes de ~140 caractères), en text-align: justify, avec un line-height: 1.1. Cite trois changements et pourquoi.

✅ Solution

(1) Limiter la longueur de ligne (max-width: 65ch) : au-delà de ~75 caractères, on perd la ligne suivante. (2) Passer en text-align: left : le justifié crée des espaces inégaux (« rivières ») pénibles, surtout en dyslexie. (3) Remonter l’interligne à line-height: 1.6 (min. 1,5) : un texte trop serré est fatigant et échoue à l’espacement du texte (1.4.12). Ces trois réglages améliorent le confort pour tout le monde, à commencer par les lecteurs en difficulté.

🧠 Quiz de révision

1. À quoi sert l’attribut lang sur la balise racine ?

Il déclare la langue principale de la page (critère 3.1.1) pour que la technologie d’assistance choisisse la bonne voix et les bonnes règles de prononciation. Sans lui, le lecteur d’écran devine, souvent mal. C’est <html lang="fr"> pour un site francophone.

2. Quand faut-il ajouter un lang sur un fragment de texte ?

Quand un passage est dans une autre langue que celle de la page (critère 3.1.2) : le lecteur d’écran bascule alors sur la bonne prononciation. On enveloppe le fragment, par ex. <span lang="en">…</span>. Inutile pour les noms propres et les termes passés dans l’usage.

3. Pourquoi éviter le texte justifié ?

Parce que text-align: justify crée des espaces inégaux entre les mots (« rivières » blanches) qui gênent la lecture, particulièrement pour les personnes dyslexiques. On préfère l’alignement à gauche (text-align: left), au rythme régulier.

4. Quelle longueur de ligne viser, et pourquoi ?

Environ 45 à 75 caractères par ligne (max-width en ch). Trop long, on perd la ligne suivante ; trop court, la lecture est hachée. C’est un réglage simple à fort impact sur le confort de lecture.

5. En quoi la lisibilité relève-t-elle de l’accessibilité cognitive ?

Parce que langage clair, structure en titres, lignes courtes et texte aéré réduisent la charge cognitive — bénéfiques aux personnes dyslexiques, fatiguées ou lisant dans une deuxième langue. C’est la famille de handicap la plus large ; on l’industrialise en Partie 15.

Partie suivante : Partie 8 — Images, icônes & média — décrire l’image, gérer l’icône et rendre la vidéo perceptible.

Last updated on
7.4 — Taille, zoom & reflowVue d'ensemble