Les repères à retenir
- Donner la réponse principale avant le sommaire et les explications détaillées.
- Employer des titres qui annoncent une question ou une décision précise.
- Faire défiler uniquement les tableaux qui ont réellement besoin de largeur.
- Vérifier les ancres avec le header, le zoom et la navigation clavier.
Commencer par la tâche du lecteur
Prenons une page qui explique comment préparer un projet de site. Une personne cherche les documents à fournir, une autre veut comprendre les étapes, une troisième revient simplement retrouver une checklist. Leur imposer la lecture de chaque paragraphe avant le premier repère complique ces trois usages. La longueur n’est pas le seul problème : l’information peut être présente et rester difficile à retrouver.
Une page longue peut rester agréable sur téléphone si le lecteur sait où il se trouve, trouve rapidement la bonne section et peut lire les tableaux sans déplacer toute la page. Le travail consiste à organiser les repères et à tester les vrais contenus, plutôt qu’à raccourcir systématiquement le texte.
Notez les questions auxquelles la page doit répondre, puis placez en premier la réponse commune. Un court résumé peut annoncer les informations nécessaires, les choix à faire et la prochaine étape. Il ne remplace pas les explications ; il donne au lecteur de quoi décider s’il poursuit. Évitez l’introduction qui commence par plusieurs généralités sur l’importance du numérique avant de nommer le sujet.
Cette réflexion relève de la refonte des parcours et de l’interface. Elle doit précéder les réglages de colonnes et les effets d’apparition. Une animation ne rend pas une consigne mieux située dans le texte.
Construire une hiérarchie qui résiste au petit écran
Un titre de section doit rester compréhensible lorsqu’on le lit seul. « Les documents à rassembler avant le rendez-vous » oriente davantage que « Pour aller plus loin ». Ne transformez pas chaque phrase importante en titre : le lecteur perdrait la différence entre le plan et le commentaire. Regroupez les idées qui répondent à la même question, puis découpez les paragraphes aux changements de raisonnement.
Sur mobile, les retours à la ligne varient selon la largeur, la police et le réglage de taille du texte. Évitez les sauts forcés introduits uniquement pour obtenir deux lignes sur votre propre écran. Une longue adresse, une référence de produit ou un mot composé peut également imposer une largeur inattendue. Testez ces cas avec les données réelles, sans supprimer l’information pour faire disparaître le débordement.
La documentation du W3C sur la redistribution du contenu explique le principe d’une lecture sans défilement dans deux directions à une largeur équivalente à 320 pixels CSS, avec des exceptions pour les contenus qui nécessitent une disposition bidimensionnelle. C’est un repère de recette, pas une certification obtenue en ouvrant une seule page à cette largeur.
Ajouter un sommaire quand il évite une recherche
Le sommaire devient utile lorsque plusieurs sections répondent à des besoins autonomes. Sur une page de trois courts paragraphes, il peut surtout repousser le contenu. Préférez une liste de liens qui reprend les titres réellement présents, dans le même ordre. Les intitulés doivent permettre de choisir la bonne section sans devoir interpréter une série de mots abstraits.
Sur téléphone, ce sommaire peut être présenté dans le flux ou dans un bloc repliable clairement nommé. La version repliable doit rester une commande utilisable au clavier, avec un état ouvert ou fermé perceptible. Ne rendez pas le sommaire fixe par principe : entre un header, une barre de contact et les outils du navigateur, il peut ne rester qu’une petite fenêtre pour lire.
Un sommaire ne remplace pas la structure du contenu. Pour organiser le plan et les liens d’un texte, la méthode de structuration des articles de blog complète ce travail. Le but est d’abord de rendre les réponses retrouvables ; aucun nombre de liens ne garantit un meilleur classement.
Tester les ancres dans les deux sens
Après un clic dans le sommaire, le titre visé doit être visible. Un header fixe peut le recouvrir alors que l’URL contient bien la bonne ancre. Le correctif consiste à prévoir l’espace de défilement correspondant au composant existant, puis à vérifier le résultat sur plusieurs tailles. N’ajoutez pas une marge immense dans chaque section : elle dégraderait l’espacement du document.
Essayez ensuite le bouton Retour du navigateur, une adresse partagée contenant une ancre et une arrivée depuis un lien interne. La page doit conserver une position compréhensible et ne pas relancer un effet qui cache le contenu. Avec le clavier, vérifiez aussi ce qui se passe après le déplacement : le prochain appui sur Tab doit rester cohérent avec la section atteinte.
Le protocole consacré au menu mobile, à ses sous-menus et au clavier traite une autre partie du parcours. Ici, le contrôle porte sur les déplacements à l’intérieur du document. Les deux essais sont nécessaires quand la même page cumule navigation principale et sommaire.
Conserver des tableaux lisibles, pas seulement petits
Réduire la police d’un tableau jusqu’à faire tenir toutes ses colonnes n’est pas une solution de lecture. Commencez par revoir son contenu : chaque colonne aide-t-elle réellement à comparer ? Des précisions longues peuvent parfois rejoindre un paragraphe sous le tableau. Si la comparaison a besoin de plusieurs colonnes, gardez une largeur exploitable et un défilement limité à cette zone.
Le conteneur défilant doit être identifiable et utilisable, y compris au clavier. La page entière ne doit pas glisser horizontalement. Conservez une légende, de vrais en-têtes et leurs associations : le guide des tableaux du W3C présente les cellules d’en-tête et l’attribut scope. Une image du tableau ferait perdre cette structure et compliquerait les mises à jour.
| Élément | Essai à réaliser | Résultat attendu |
|---|---|---|
| Résumé | Lire uniquement le début. | Comprendre le sujet et la suite possible. |
| Sommaire | Rejoindre une section, puis revenir. | Retrouver une position compréhensible. |
| Tableau | Parcourir les colonnes au toucher et au clavier. | Lire chaque donnée sans déplacer tout le document. |
| En-tête fixe | Ouvrir un lien avec une ancre. | Voir le titre ciblé et le début de sa réponse. |
Choisir des visuels qui soutiennent la lecture
Un schéma est utile lorsqu’il montre un ordre ou une relation difficile à décrire. Pour une procédure, une liste d’étapes suffit parfois mieux qu’une illustration complexe. Une photographie peut marquer une transition ou montrer un contexte, mais répéter le même paysage entre chaque section n’ajoute pas d’information. Précisez quand il s’agit d’une illustration, sans la présenter comme un atelier réalisé chez le lecteur.
Réservez les proportions des images et évitez les contenus qui déplacent soudainement le paragraphe en cours de lecture. Pour traiter le poids des médias et la priorité du premier visuel, consultez le guide sur les images et le chargement mobile. Lisibilité et rapidité sont liées, mais un score de performance ne valide pas l’organisation du texte.
Faire une recette avec une question réelle
Demandez à une personne de retrouver une information précise sans lui indiquer la section. Observez le chemin suivi, puis faites expliquer ce qui a aidé ou gêné. Notez l’URL, la largeur, le réglage du texte et la tâche. « La page est trop longue » est un ressenti ; « je n’ai pas trouvé les documents à préparer dans le sommaire » donne une correction testable.
Rejouez la tâche après modification, sur petit écran et avec un texte agrandi. Vérifiez aussi les tableaux, les liens et l’absence d’élément fixe devant la dernière ligne. Commencez par la page la plus utile à votre activité, puis étendez les corrections au modèle partagé. Vous obtenez ainsi des améliorations cohérentes, sans refaire chaque article séparément ni multiplier les effets décoratifs.
Nicolas Tissot
Gérant de Blue Strat. WordPress, développement web et référencement pour les artisans, TPE et PME.
Découvrir Nicolas Tissot