Sur grand écran, trois offres tiennent confortablement côte à côte. Sur téléphone, le même tableau peut devenir une série de chiffres minuscules ou une longue bande dont les noms de colonnes ont disparu. La largeur n’est qu’une partie du problème : les lecteurs doivent se souvenir de ce qu’ils comparent. Commencez par déterminer quelle différence ils doivent trouver, plutôt que par réduire la taille du texte.
Définissez d’abord la tâche
Imaginez la comparaison de trois programmes de formation. Les différences utiles pourraient être le format d’enseignement, la durée et les connaissances préalables requises. Placez la présentation promotionnelle de chaque programme hors du tableau. Une cellule contenant des conditions, des exceptions et la biographie d’un enseignant n’est plus un point de comparaison concis. Séparez les faits des explications, sans cacher les restrictions qui modifient le sens d’une offre.
Gardez les intitulés liés aux valeurs
Le W3C recommande de baliser les en-têtes et cellules de données avec les éléments HTML appropriés. Des relations plus complexes peuvent nécessiter des attributs supplémentaires. Mettre la première ligne en gras ne transmet pas, à lui seul, cette structure aux technologies d’assistance. Donnez un nom clair au tableau, précisez les unités de mesure et représentez les valeurs inconnues de façon cohérente. Une cellule vide ne doit pas signifier silencieusement tantôt « gratuit », tantôt « non compris ».
Choisissez entre défilement et cartes
Lorsqu’une personne doit comparer une caractéristique entre plusieurs options, conserver un tableau à défilement horizontal peut être préférable à une longue succession de cartes. Rendez la zone de défilement identifiable et testez son accès sans geste tactile. Si les visiteurs lisent habituellement chaque offre séparément, les cartes peuvent être plus simples. Répétez les intitulés des caractéristiques dans chaque carte, pas seulement les valeurs. C’est un choix éditorial, pas une règle universelle applicable à tous les tableaux.
Ne faites pas fonctionner toute la page comme un tableau
L’explication du W3C sur la redistribution du contenu prévoit une exception pour les informations nécessitant une disposition bidimensionnelle afin d’être comprises. Elle n’autorise pas à faire défiler toute la page latéralement. Le texte introductif, les boutons et les sections suivantes doivent rester confortables sur écran étroit. Même dans un tableau, faites revenir à la ligne les longues explications plutôt que de les réduire à un texte à peine lisible.
Testez la décision, pas seulement l’image
Sur écran étroit, cherchez une différence précise entre deux options. Augmentez ensuite le zoom, parcourez les commandes disponibles au clavier et vérifiez la lecture des en-têtes avec une technologie d’assistance. Après défilement, sait-on à quelle option appartient un chiffre ? Les faits sont-ils identiques sur ordinateur et sur mobile ? Si répondre exige de mémoriser plusieurs écrans, simplifiez la structure. Une bonne comparaison économise des efforts, pas seulement de l’espace.