Concevoir une hiérarchie de page adaptative qui facilite le repérage et la compréhension

Une hiérarchie de page adaptative fonctionne lorsque la personne peut reconnaître rapidement le but de la page, trouver les preuves pertinentes, comprendre les choix offerts et repérer la prochaine action, quelle que soit la présentation. Prenons une page interentreprises qui propose trois forfaits de soutien, des critères de qualification et une demande d’évaluation. Si l’introduction, les preuves, les forfaits, les détails et tous les boutons ont presque le même poids, la composition peut sembler soignée sur un grand écran tout en devenant un empilement indéchiffrable sur un écran étroit ou agrandi.

Que doit faire comprendre une hiérarchie de page adaptative?

Elle doit préserver la priorité, les relations et la direction de la tâche, plutôt que réduire une mise en page conçue pour ordinateur. Le test en quatre questions — but, preuves, choix et prochaine action — est une synthèse éditoriale, et non un cadre officiel du W3C, de Nielsen Norman Group ou de GOV.UK. Il transforme une discussion subjective sur la composition en vérification concrète de ce que la personne peut comprendre et accomplir.

Le W3C indique, dans des conseils cognitifs complémentaires aux critères de succès WCAG, qu’un titre clair peut aider une personne à savoir où elle se trouve et à saisir le but précis de la page. Nielsen Norman Group décrit aussi un balayage « en gâteau étagé », soutenu par des sous-titres distinctifs et fidèles à leur section. Ce comportement observé n’est toutefois pas une loi : la tâche, la langue, le contenu, la familiarité et la mise en page modifient la façon de parcourir une page.

• Le titre ne distingue pas la sélection de forfaits des renseignements généraux.
• Les preuves de qualification semblent valoir également pour les trois offres.
• Les attributs comparables n’apparaissent ni dans le même ordre ni sous les mêmes libellés.
• Les actions de soutien rivalisent visuellement avec la demande d’évaluation.

Que faut-il décider avant de styliser la page?

L’équipe doit d’abord rédiger un contrat de hiérarchie qui nomme le résultat attendu, les priorités de contenu, les relations et toute séquence dont l’ordre change le sens. Pour notre page, le contrat est simple : aider l’acheteur à choisir un forfait de soutien approprié, rattacher chaque preuve au point qu’elle étaye, rendre les trois offres comparables et faire de la demande d’évaluation l’action principale de la page.

Séparez ensuite trois décisions souvent confondues : ce qui importe pour la tâche, ce que la structure rend déterminable par programmation et les signaux visuels qui l’exposent. Une séquence source cohérente présente l’orientation avant l’évaluation, garde les preuves avec leur sujet et place chaque action dans son contexte. Lorsque l’ordre influence le sens, les WCAG exigent au moins une séquence correcte déterminable par programmation; des régions réellement indépendantes peuvent toutefois accepter plusieurs ordres relatifs.

Comment les signaux visuels doivent-ils révéler la hiérarchie?

Les signaux visuels doivent rendre le contrat perceptible sans devenir les seuls porteurs de sens. Remplacez les intitulés vagues par des titres qui prédisent le contenu, par exemple « Choisir un niveau de soutien » ou « Vérifier les critères de qualification ». Le W3C relève notamment la taille et la graisse des titres, l’espace, l’indentation, les étiquettes et les arrière-plans parmi les indices visuels de structure; les relations importantes doivent aussi demeurer exprimées dans le texte ou déterminables par programmation.

Adoptez une échelle typographique sobre dont les rôles restent reconnaissables lorsque la largeur diminue. Validez-la avec la vraie police, les textes français les plus longs, les autres langues servies et les niveaux d’agrandissement pertinents. Le système GOV.UK montre qu’on peut réduire certaines tailles tout en conservant des rôles nommés et un rythme cohérent, mais ses valeurs ne sont pas universelles. Son système d’espacement illustre pareillement une approche où les petits écarts restent stables tandis que de plus grandes séparations s’adaptent.

• Réservez les plus grands écarts aux changements de sujet ou de groupe.
• Gardez des écarts plus serrés entre un titre, sa preuve et son action.
• Alignez les mêmes attributs pour faciliter la comparaison des forfaits.
• Coordonnez échelle, couleur, contraste et placement avec la priorité réelle de la tâche.

Comment distinguer les preuves, les choix et la prochaine action?

La page doit rapprocher chaque preuve de l’affirmation qu’elle soutient, présenter les choix dans une structure comparable et différencier clairement les rôles d’action. Dans la vue large corrigée, le but de sélection ouvre la page, les critères de qualification accompagnent le point visé et les trois forfaits forment une région de comparaison nommée. Leur portée, leurs conditions et leurs modalités apparaissent dans le même ordre, sans inventer un forfait « recommandé » que la recherche sur les tâches ne justifie pas.

Les boutons de chaque forfait servent à examiner ou à sélectionner une option; les liens secondaires donnent accès aux précisions; la demande d’évaluation demeure l’action principale de la page. GOV.UK recommande des libellés qui décrivent ce qui se produira et met en garde contre plusieurs actions principales également dominantes. Cela n’impose pas une seule action possible : une page de choix peut en offrir plusieurs, pourvu que leur rôle et leur importance relative restent compréhensibles.

• Nommer l’action : « Demander une évaluation » est plus précis que « Continuer ».
• Conserver les preuves complémentaires, même lorsque leur présentation devient secondaire.
• Ne condenser un détail que si son sujet et son accès demeurent évidents.
• Vérifier l’association entre forfait, preuve et action dans les vues large, étroite, agrandie et linéarisée.

Quelles opérations adaptatives préservent le sens?

Les bonnes opérations sont celles qui préservent l’information, la fonctionnalité, le contexte et la priorité de la tâche : conserver, empiler, déplacer, condenser ou dévoiler progressivement. Commencez par une base étroite à une colonne, puis ajoutez une disposition plus large seulement si elle améliore réellement la comparaison ou l’association des preuves. GOV.UK applique cette approche dans son système, mais sa grille et ses mesures restent des choix propres à ce produit, et non des seuils à copier.

Les conseils WCAG sur la redistribution exigent, dans leurs conditions d’essai, qu’une présentation conserve l’information et la fonctionnalité sans défilement selon deux axes, sauf lorsque la bidimensionnalité est essentielle au sens ou au fonctionnement. Plusieurs pages de lecture peuvent donc empiler des régions distinctes si chacune demeure compréhensible et utilisable. Un tableau de données complexe ou un composant riche peut plutôt nécessiter un traitement fonctionnel adapté qu’une transformation naïve en longue colonne.

• Conserver une région lorsque son contenu, sa relation et son rôle survivent tels quels.
• Empiler seulement des régions indépendantes ou déjà placées dans une séquence correcte.
• Déplacer une région lorsque la séquence déterminable par programmation demeure valide.
• Condenser la présentation répétitive sans supprimer l’information essentielle.
• Dévoiler des détails lorsque le déclencheur, le contenu associé et le fonctionnement restent clairs.

La hiérarchie adaptative n’est pas l’ordre dans lequel les boîtes s’effondrent, mais celui dans lequel le sens survit.

Comment auditer et gouverner la hiérarchie?

L’audit doit reprendre les quatre questions du contrat dans les vues large, étroite, agrandie et linéarisée, puis vérifier la tâche auprès de personnes représentatives. Commencez sans expliquer la conception : demandez à la personne évaluatrice d’identifier le but, les critères de qualification pertinents, les trois forfaits et la demande d’évaluation. Un module qui entre dans la fenêtre n’est pas nécessairement réussi; la redistribution doit aussi préserver son information, sa fonction et son contexte.

Inspectez séparément la séquence déterminable par programmation. Les titres décrivent-ils leur section? Les valeurs suivent-elles encore leurs libellés? Les preuves précèdent-elles ou suivent-elles leur sujet d’une manière cohérente? Les actions restent-elles rattachées au bon forfait? Concentrez la vérification de l’ordre sur les séquences qui modifient le sens, car des régions indépendantes peuvent conserver plusieurs positions valides. Des titres bien rédigés facilitent le repérage, mais ne remplacent pas une structure sémantique correcte.

1. Observer la page large sans présentation préalable de l’intention.
2. Répéter le test sur une vue étroite et une vue agrandie.
3. Rechercher les pertes de contenu, les associations rompues et les actions concurrentes.
4. Évaluer la séquence linéarisée indépendamment de la composition visuelle.
5. Faire accomplir la sélection et la demande à des acheteurs représentatifs.

Consignez chaque échec sous la question du contrat qu’il compromet, puis encodez les correctifs récurrents dans les modèles de contenu, les gabarits, les composants, les critères de révision et les contrôles avant publication. La conformité WCAG demeure une exigence d’accessibilité; elle ne prouve pas à elle seule que les personnes comprennent la page ou réussissent la tâche prévue. Faites intervenir des spécialistes en accessibilité ou en recherche utilisateur lorsque l’équipe ne peut pas évaluer avec confiance une relation ou un comportement adaptatif.