WCAG 1.4.8 : Présentation visuelle

Ce que signifie cette règle

Le critère de succès 1.4.8 des WCAG, intitulé Présentation visuelle, se situe au niveau AAA sous le principe « Perceptible ». Il s’applique spécifiquement aux blocs de texte — c’est-à-dire à des passages substantiels de contenu lisible, et non à des mots isolés, des libellés ou de courtes expressions. Le critère définit cinq exigences distinctes qui doivent toutes être satisfaites simultanément pour obtenir une conformité complète.

Premièrement, les couleurs de premier plan et d’arrière-plan doivent être sélectionnables par l’utilisateur. La page doit soit éviter de spécifier les deux couleurs ensemble (en laissant au moins l’une d’elles à la valeur par défaut du navigateur), soit fournir un mécanisme permettant aux utilisateurs de choisir leur propre combinaison de couleurs. Imposer une paire de couleurs fixe — même avec un contraste élevé — peut être préjudiciable aux lecteurs présentant des troubles tels que le syndrome d’Irlen ou la photosensibilité, qui ont besoin de teintes spécifiques.

Deuxièmement, la largeur des blocs de texte ne doit pas dépasser 80 caractères (ou 40 caractères pour les écritures CJK — chinoise, japonaise et coréenne). Cette limite est calculée par ligne de texte rendu, et non par largeur d’élément. Une colonne de 1200 px de large qui contient des lignes courtes en raison d’une grande taille de police peut tout de même être conforme, tandis qu’une colonne étroite avec un texte très petit et de longues chaînes ininterrompues peut échouer.

Troisièmement, le texte ne doit pas être justifié (c’est-à-dire aligné simultanément sur les marges gauche et droite). La justification complète crée des espacements irréguliers entre les mots — parfois appelés « rivières » d’espaces blancs — qui perturbent la fluidité de lecture pour les personnes dyslexiques ou présentant d’autres différences de lecture. Le texte aligné à gauche (drapeau à droite) est toujours acceptable ; le texte centré ou aligné à droite est acceptable pour de courts passages.

Quatrièmement, l’interligne doit être au moins 1,5 fois la taille de la police à l’intérieur des paragraphes, et l’espacement entre les paragraphes doit être au moins 2,25 fois la taille de la police. Ces minimums garantissent un espace vertical suffisant pour que les lecteurs qui suivent les lignes avec attention ne perdent pas leur place et ne confondent pas les lignes adjacentes.

Cinquièmement, le texte doit pouvoir être redimensionné jusqu’à 200 % sans technologie d’assistance et sans perte de contenu ni de fonctionnalité. Cela diffère légèrement du critère 1.4.4 (Redimensionnement du texte, niveau AA) en ce qu’il exige explicitement ce comportement pour la présentation visuelle des blocs de texte en particulier, et sans s’appuyer sur une loupe d’écran ou un zoom du navigateur qui outrepasse la page — c’est la page elle-même qui doit gérer correctement cette mise à l’échelle.

Une exception officielle clé : les exigences ne s’appliquent pas aux légendes ni aux images de texte. Le texte intégré dans des images matricielles ne peut pas être redimensionné ou recoloré par CSS, ce qui explique pourquoi le critère 1.4.5 (Images de texte) en décourage séparément l’utilisation. Le texte décoratif utilisé uniquement comme élément graphique est également exclu.

Pour réussir, il faut satisfaire les cinq sous-exigences. Un échec sur une seule — par exemple, l’application de text-align: justify au corps d’un long article sans mécanisme de remplacement — constitue un échec du critère dans son ensemble.

Pourquoi c’est important

La présentation visuelle du texte a un impact disproportionné sur les lecteurs pour qui la lecture de documents imprimés ou d’écrans n’est pas naturellement aisée. Les groupes les plus directement concernés par ce critère incluent les personnes dyslexiques, celles ayant une basse vision qui s’appuient sur le zoom du navigateur plutôt que sur des loupes d’écran, les personnes atteintes du syndrome d’Irlen ou de sensibilité scotopique, les personnes ayant des handicaps cognitifs affectant la vitesse de lecture et la compréhension, ainsi que les utilisateurs âgés dont le confort de lecture a diminué avec le temps.

Selon la British Dyslexia Association, environ 10 % de la population présente une forme de dyslexie, dont environ 4 % de manière sévère. Pour ces utilisateurs, le texte pleinement justifié peut créer des distorsions visuelles rendant la lecture presque impossible. Les lignes trop longues aggravent le problème en augmentant la distance que l’œil doit parcourir en fin de ligne, ce qui accroît la probabilité de perdre la ligne suivante. Des paires de couleurs fixes qui ne peuvent pas être remplacées empêchent les utilisateurs d’appliquer des filtres colorés ou des schémas de contraste qu’ils ont identifiés comme facilitant leur lecture.

Pour les utilisateurs malvoyants — dont l’Organisation mondiale de la Santé estime le nombre à environ 246 millions dans le monde — la capacité de redimensionner le texte dans le flux de la page est essentielle. Si une mise en page se brise, tronque le contenu ou masque la navigation lorsque le texte est agrandi à 200 %, ces utilisateurs se retrouvent de fait exclus de certaines parties du site. Ils peuvent ne pas avoir accès à un logiciel de grossissement d’écran dédié, ou préférer le contrôle plus fin des paramètres de zoom du navigateur qu’ils ont eux-mêmes calibrés.

Considérons un scénario concret : une personne présentant une dyslexie modérée visite un portail d’actualités en ligne pour lire un article d’investigation long format. Le corps de l’article utilise text-align: justify, une colonne de 900 px (environ 120 caractères par ligne à la taille de police par défaut) et un schéma de couleurs fixe gris foncé sur blanc avec un interligne de 1,2. L’utilisateur a configuré son navigateur pour préférer un arrière-plan sépia, mais le CSS du site outrepasse à la fois la couleur de premier plan et d’arrière-plan, neutralisant cette préférence. En deux paragraphes, l’espacement irrégulier, la longueur excessive des lignes et l’impossibilité d’appliquer la teinte préférée rendent l’article pratiquement illisible. Ce n’est pas un cas hypothétique marginal — cela décrit la conception par défaut de nombreux grands sites éditoriaux aujourd’hui.

Au-delà de l’accès pour les personnes handicapées, ces exigences recoupent les bonnes pratiques générales de lisibilité reconnues par la recherche UX. Les sites qui respectent la longueur des lignes, l’espacement et la flexibilité des couleurs ont tendance à retenir les lecteurs plus longtemps, à réduire les taux de rebond et à obtenir de meilleurs scores de lisibilité — autant de facteurs qui ont des implications mesurables en matière de SEO et d’engagement.

Règles axe-core associées

Le critère WCAG 1.4.8 nécessite un test manuel. Il n’existe aucune règle automatisée axe-core qui signale directement les violations de ce critère. La raison est fondamentale : les outils automatisés évaluent le DOM et les styles CSS calculés, mais ils ne peuvent pas déterminer si la combinaison de couleur, de longueur de ligne, d’espacement et de comportement de redimensionnement produit une expérience de lecture accessible pour un utilisateur humain. Chacune des cinq sous-exigences implique un jugement contextuel :

• La sélection des couleurs ne peut pas être évaluée automatiquement, car un outil peut détecter que color et background-color sont tous deux définis, mais il ne peut pas déterminer si la page fournit un mécanisme de remplacement contrôlé par l’utilisateur (comme un sélecteur de thème) ou si la feuille de style utilisateur du navigateur est respectée. La présence de propriétés personnalisées CSS, de bascules de thème en JavaScript ou de préférences côté serveur doit être évaluée par un testeur humain.
• La largeur de ligne (limite de 80 caractères) nécessite de rendre le texte à la taille de police par défaut de l’utilisateur et de mesurer le nombre réel de caractères par ligne. Les outils automatisés ne simulent pas de manière fiable cette mesure à travers les polices, les tailles de police et les largeurs de fenêtre. Un testeur doit inspecter visuellement ou utiliser une superposition de comptage de caractères.
• La justification du texte peut être partiellement détectée — axe pourrait théoriquement signaler text-align: justify — mais le critère autorise le texte justifié si un mécanisme permet à l’utilisateur de le modifier. Aucune règle automatisée ne capture actuellement cette nuance dans axe-core 4.x.
• L’interligne et l’espacement des paragraphes nécessitent l’inspection des valeurs calculées de line-height et de margin dans leur contexte et la vérification qu’elles respectent respectivement les seuils de 1,5× et 2,25×. Bien que les styles calculés soient lisibles par l’automatisation, la détermination contextuelle de savoir si un bloc constitue « un bloc de texte » soumis au critère nécessite un jugement humain.
• Le redimensionnement à 200 % sans perte recoupe conceptuellement la règle meta-viewport d’axe (qui vérifie la présence de user-scalable=no), mais cette règle concerne le critère 1.4.4, et non 1.4.8. Une page peut réussir le contrôle automatisé meta-viewport et tout de même échouer au 1.4.8 si la mise en page se brise à 200 % de zoom d’une manière qui masque ou tronque des blocs de texte.

Parce que les cinq vérifications nécessitent un jugement humain, le critère 1.4.8 doit être audité au moyen de procédures structurées de revue manuelle décrites dans la section suivante.

Comment tester

1. Identifier les blocs de texte sur la page. Naviguez vers une page représentative riche en contenu (article, description de produit, conditions d’utilisation, documentation d’aide). Identifiez tous les blocs substantiels de texte continu — paragraphes, corps de listes, cellules de tableau contenant du texte courant — qui sont soumis au critère. Excluez les légendes d’images et le texte décoratif.
2. Vérifier le contrôle des couleurs. Ouvrez les DevTools du navigateur (F12) et inspectez les styles calculés d’un bloc de texte. Si color et background-color sont tous deux explicitement définis par le CSS de la page (et non hérités des valeurs par défaut du navigateur), vérifiez que la page fournit une alternative : un sélecteur de thème, une bascule de mode à contraste élevé ou des instructions pour activer une feuille de style utilisateur. Si rien de tout cela n’existe, cette sous-exigence échoue. Vous pouvez également forcer temporairement une feuille de style utilisateur dans Firefox (about:config → layout.css.has-selector.enabled) ou utiliser l’émulation « Forced Colors » dans Chrome DevTools pour observer si le site respecte les préférences de couleurs du système.
3. Mesurer la longueur des lignes. Utilisez une extension de navigateur telle que « Line Length » ou le panneau « Intelligent Guided Tests » d’axe DevTools pour superposer le comptage de caractères, ou comptez manuellement les caractères dans une ligne longue représentative. Vous pouvez aussi coller une ligne de texte dans un traitement de texte et compter les caractères. Si les lignes dépassent systématiquement 80 caractères (ou 40 pour le CJK) sans aucun mécanisme permettant à l’utilisateur de réduire la largeur de la colonne, cette sous-exigence échoue.
4. Inspecter l’alignement du texte. Dans les DevTools, vérifiez la valeur calculée de text-align pour chaque bloc de texte. Toute valeur justify sur un bloc de texte long format constitue un échec, sauf si la page fournit une bascule permettant aux utilisateurs de passer à un alignement à gauche.
5. Vérifier les valeurs d’espacement. Dans les DevTools, inspectez la valeur calculée de line-height pour les blocs de texte. Si elle est exprimée dans une unité autre qu’un multiplicateur (par exemple, 24px), divisez-la par la valeur de font-size. Le résultat doit être ≥ 1,5. Ensuite, inspectez la valeur de margin-bottom (ou margin-top) des éléments de paragraphe ; divisée par la taille de police, elle doit être ≥ 2,25. Les valeurs définies avec le drapeau !important qui empêcheraient les remplacements par l’utilisateur doivent être notées comme facteur de risque.
6. Tester le redimensionnement à 200 %. Dans le navigateur, réglez le zoom sur 200 % (Ctrl/Cmd + touche « plus », ou Affichage → Zoom avant, deux fois à partir de 100 %). Passez en revue tous les blocs de texte pour détecter les troncatures, les débordements masqués par overflow: hidden, le texte qui disparaît derrière d’autres éléments ou une navigation qui devient inaccessible. Utilisez la barre d’outils d’appareils de Chrome DevTools pour simuler la fenêtre zoomée si nécessaire. Il y a échec si un contenu textuel est perdu ou si une fonctionnalité devient indisponible.
7. Vérification avec technologies d’assistance. Avec NVDA et Firefox, zoomez la page à 200 % et parcourez l’article à l’aide des touches fléchées. Vérifiez que tout le texte est toujours annoncé par le lecteur d’écran (le contenu masqué via overflow: hidden après zoom peut être tronqué visuellement mais tout de même lu à voix haute — signalez cela comme un échec visuel malgré tout). Avec VoiceOver sur macOS et Safari, répétez le test de zoom. Ces vérifications aident à confirmer que les changements de mise en page liés au zoom ne retirent pas de contenu de l’arbre d’accessibilité.
8. Simulation de remplacement par l’utilisateur. Dans Firefox, allez dans Paramètres → Général → Polices et couleurs → Couleurs, activez « Utiliser mes couleurs choisies » et définissez des couleurs de premier plan et d’arrière-plan personnalisées. Revenez sur la page et vérifiez si le site respecte ou outrepasse ces choix. Les sites qui utilisent !important sur les déclarations de couleur outrepasseront les préférences de l’utilisateur, ce qui constitue un échec de la sous-exigence de sélection des couleurs.

Comment corriger

Association de couleurs fixe sans contrôle utilisateur — Incorrect

<!-- Both color and background-color are hardcoded; user browser preferences are overridden -->
<style>
  .article-body {
    color: #1a1a1a;
    background-color: #ffffff;
    /* No theme switcher provided */
  }
</style>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Association de couleurs fixe sans contrôle utilisateur — Correct

<!-- Uses CSS custom properties so a theme switcher or user stylesheet can override both values -->
<style>
  :root {
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
  }
  [data-theme='sepia'] {
    --text-color: #3b2a1a;
    --bg-color: #f5edd6;
  }
  [data-theme='high-contrast'] {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
  .article-body {
    color: var(--text-color);
    background-color: var(--bg-color);
  }
</style>
<!-- Theme switcher gives users explicit control -->
<div role='group' aria-label='Color theme'>
  <button onclick="document.documentElement.setAttribute('data-theme','default')">Default</button>
  <button onclick="document.documentElement.setAttribute('data-theme','sepia')">Sepia</button>
  <button onclick="document.documentElement.setAttribute('data-theme','high-contrast')">High Contrast</button>
</div>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Texte justifié avec longueur de ligne excessive — Incorrect

<!-- text-align: justify applied to a very wide unrestricted column -->
<style>
  .content {
    text-align: justify;
    /* No max-width constraint; lines easily exceed 80 characters */
  }
</style>
<div class='content'>
  <p>This paragraph stretches across the full width of the viewport, creating uneven word spacing that makes reading difficult for users with dyslexia or other reading differences. Each line may contain well over 100 characters.</p>
</div>

Texte justifié avec longueur de ligne excessive — Correct

<!-- Left-aligned text with a max-width that keeps lines under 80 characters -->
<style>
  .content {
    text-align: left; /* Ragged-right prevents uneven word spacing */
    max-width: 66ch;  /* ch unit approximates character width; 66ch ≈ 80 average chars */
    line-height: 1.6; /* Exceeds the 1.5× minimum */
  }
  .content p {
    margin-bottom: 2.5em; /* 2.5× font-size exceeds the 2.25× paragraph spacing minimum */
  }
</style>
<div class='content'>
  <p>This paragraph is constrained to a comfortable reading width, uses left alignment, and has generous line and paragraph spacing — satisfying three of the five sub-requirements simultaneously.</p>
</div>

Interligne insuffisant qui se dégrade à 200 % de zoom — Incorrect

<!-- line-height set in pixels; does not scale with font resizing -->
<style>
  .article p {
    font-size: 16px;
    line-height: 18px; /* Only 1.125× font size — below the 1.5× requirement */
  }
</style>
<div class='article'>
  <p>When the user zooms to 200%, this text becomes 32px but line-height remains 18px, causing lines to overlap and become unreadable.</p>
</div>

Interligne insuffisant qui se dégrade à 200 % de zoom — Correct

<!-- line-height as a unitless multiplier scales with any font size change -->
<style>
  .article p {
    font-size: 1rem;   /* Respects browser default font size setting */
    line-height: 1.6;  /* Unitless: always 1.6× the current font size, even when zoomed */
    margin-bottom: 2.5em; /* Scales proportionally with font size */
  }
</style>
<div class='article'>
  <p>At any zoom level or font size, this paragraph maintains correct proportional spacing because line-height is expressed as a unitless number rather than a fixed pixel value.</p>
</div>

Erreurs courantes

• Définir line-height en pixels ou en points plutôt qu’avec un multiplicateur sans unité. Lorsque les utilisateurs agrandissent le texte ou zooment la page, un interligne en pixels reste fixe, ce qui provoque le chevauchement des lignes. Utilisez toujours une valeur sans unité comme 1.6 afin que l’espacement s’adapte proportionnellement.
• Utiliser text-align: justify sur du texte de corps long format sans fournir d’alternative. Même lorsque le texte justifié semble propre sur un écran de bureau au zoom par défaut, il crée des espaces irréguliers entre les mots pour les utilisateurs dyslexiques. Supprimez la justification des blocs de prose ou ajoutez une bascule d’alignement visible par l’utilisateur.
• Définir max-width en pixels plutôt qu’en unités de caractères (ch) ou en unités relatives (em). Une largeur maximale en pixels ne s’adapte pas lorsque les utilisateurs modifient la taille de police par défaut de leur navigateur, ce qui peut permettre aux lignes de dépasser 80 caractères avec des petites polices et laisser de l’espace perdu avec des polices plus grandes.
• Déclarer à la fois color et background-color avec !important sur les éléments body ou article. L’utilisation de !important bloque explicitement les feuilles de style utilisateur qui tentent de remplacer les couleurs, alors qu’il s’agit du principal mécanisme par lequel les personnes photosensibles ou atteintes du syndrome d’Irlen personnalisent leur environnement de lecture.
• S’appuyer sur overflow: hidden sur les conteneurs de texte sans tester à 200 % de zoom. Les conteneurs dimensionnés en unités de fenêtre ou en pixels fixes vont couper le texte lorsque l’utilisateur zoome, masquant le contenu au lieu de le faire se replier.
• Appliquer l’espacement des paragraphes uniquement via padding plutôt que margin. Si un conteneur parent a overflow: hidden, le padding inférieur se « replie » visuellement et l’espacement semble absent. Utilisez margin-bottom sur les paragraphes pour un espacement fiable.
• Définir l’espacement des paragraphes en pixels (margin-bottom: 20px) plutôt qu’en em. Comme l’interligne, un espacement en pixels ne s’adapte pas aux changements de taille de police, ce qui fait que les paragraphes se rapprochent lorsque les utilisateurs choisissent des polices de base plus grandes dans les paramètres de leur navigateur.
• Supposer qu’une fenêtre étroite signifie automatiquement des lignes courtes. Sur les petits écrans mobiles, une petite taille de police peut toujours produire des lignes très longues en nombre de caractères. Vérifiez toujours le nombre de caractères par ligne à la taille de police par défaut de l’appareil, et pas seulement en mesurant la largeur de la colonne en pixels.
• Fournir une bascule de thème à contraste élevé qui ne modifie que les ratios de contraste, et non la sélection des couleurs. Une bascule qui passe du mode clair au mode sombre spécifie toujours les couleurs de premier plan et d’arrière-plan. Le critère exige que les utilisateurs puissent choisir leurs propres couleurs, et pas seulement sélectionner parmi des paires prédéfinies. Complétez les préréglages par un sélecteur de couleurs personnalisé ou assurez-vous que la page respecte les media queries prefers-color-scheme et forced-colors.
• Oublier de tester le texte long dans des conteneurs défilants. Les blocs de texte à l’intérieur d’éléments avec overflow: scroll ou overflow: auto sont souvent omis lors des revues manuelles. Ces conteneurs ont leurs propres contraintes de largeur qui peuvent entraîner des longueurs de ligne ou des comportements de zoom différents de ceux du flux principal du document.

Lien avec la réglementation d’accessibilité de la Turquie

La Circulaire présidentielle n° 2025/10 de la Turquie, publiée au Journal officiel n° 32933 le 21 juin 2025, établit des exigences obligatoires en matière d’accessibilité numérique qui se réfèrent directement aux WCAG 2.1 (avec un fort alignement sur les bonnes pratiques des WCAG 2.2). La Circulaire crée des obligations exécutoires pour un large éventail de types d’entités opérant en Turquie, notamment les institutions publiques et les organismes gouvernementaux à tous les niveaux, les plateformes de commerce électronique, les banques et prestataires de services financiers, les hôpitaux et établissements de santé privés, les opérateurs télécoms comptant 200 000 abonnés ou plus, les agences de voyage, les entreprises de transport privé et les écoles privées autorisées par le ministère de l’Éducation nationale.

Le critère WCAG 1.4.8 est un critère de niveau AAA, ce qui signifie que la Circulaire ne l’impose pas comme seuil légal minimal — l’exigence légale de base est généralement la conformité au niveau AA des WCAG. Cependant, les critères de niveau AAA tels que la Présentation visuelle ont un poids pratique et réputationnel important pour les organisations turques pour plusieurs raisons.

Premièrement, les institutions publiques et les grandes entités du secteur privé couvertes par la Circulaire sont censées démontrer une amélioration progressive de l’accessibilité au fil du temps. Les auditeurs et organismes de supervision considèrent de plus en plus les critères AAA comme des indicateurs d’un engagement réel au-delà d’une conformité de façade. Les organisations qui mettent en œuvre de manière proactive le critère 1.4.8 — en particulier en offrant des contrôles de thème de couleur, en respectant les préférences de couleur du système et en maintenant un espacement correct du texte — sont beaucoup moins susceptibles de faire l’objet de plaintes de la part d’utilisateurs dyslexiques, malvoyants ou photosensibles.

Deuxièmement, la Turquie compte une population importante d’utilisateurs qui bénéficient directement du critère 1.4.8. Avec une prévalence estimée de 10 % pour la dyslexie et des millions d’utilisateurs malvoyants, les entités qui servent de larges bases de consommateurs — banques, opérateurs télécoms, plateformes de commerce électronique, hôpitaux — peuvent s’attendre à ce qu’une part significative de leurs utilisateurs rencontre des difficultés avec une présentation visuelle non conforme. Ne pas traiter ce point constitue à la fois une barrière d’accessibilité et un risque commercial.

Troisièmement, certains services spécialisés — en particulier dans l’éducation (écoles privées autorisées par le ministère de l’Éducation nationale) et la santé — peuvent être soumis à des lignes directrices réglementaires sectorielles qui relèvent la barre jusqu’au niveau AAA pour le contenu présenté à des populations vulnérables telles que les enfants, les patients âgés ou les personnes ayant des handicaps cognitifs. Dans ces contextes, le critère 1.4.8 passe d’aspirationnel à pratiquement obligatoire.

Les organisations qui souhaitent démontrer une accessibilité de premier plan sur le marché turc — et anticiper l’évolution de leur posture de conformité à mesure que la réglementation progresse — devraient traiter le critère 1.4.8 comme une norme de conception plutôt que comme une amélioration optionnelle. La mise en œuvre de propriétés personnalisées CSS pour la gestion des thèmes de couleur, la limitation de la largeur des colonnes avec des unités ch, l’élimination du texte justifié dans les blocs de prose et l’utilisation de valeurs d’interligne sans unité sont des changements peu coûteux et à fort impact qui bénéficient à un large public et signalent un véritable leadership en matière d’accessibilité dans le cadre réglementaire turc.