Cet article de Guillaume Barbier explore les défis liés à la création de tableaux de données accessibles sur le web en 2025. Il identifie deux principales raisons pour lesquelles les tableaux restent inaccessibles : un manque de culture numérique et des limitations techniques. L'auteur souligne la confusion entre la structuration de l'information et la présentation visuelle, ainsi que les difficultés techniques rencontrées avec certaines combinaisons de navigateurs et lecteurs d'écran. Il propose une synthèse des connaissances pour aider à créer des tableaux accessibles et évoque quelques motifs à éviter. L'article aborde également d'autres critères d'accessibilité comme la redistribution et les mouvements de glissement, avec des techniques pour éviter les déformations sur les écrans étroits.
L’article explique comment concevoir des tableaux clairs et efficaces, en s’appuyant sur les travaux d’Edward Tufte et de Charlie Munger. Il souligne que le choix entre tableau et graphique dépend de l’usage : les tableaux conviennent mieux aux petits jeux de données et aux comparaisons précises, tandis que les graphiques mettent en valeur les tendances et le mouvement des données. Pour rendre un tableau lisible, il recommande de limiter les bordures et les couleurs, d’aligner correctement le texte et les nombres (à droite pour ces derniers), et d’éviter les répétitions inutiles. L’article propose aussi des bonnes pratiques en HTML/CSS pour structurer et styliser les tableaux, comme l’utilisation de <thead>, <tbody>, et <tfoot>, l’alignement vertical sur la baseline, et l’adaptation responsive pour mobile. Enfin, il insiste sur l’importance de maximiser le ratio "data-ink" (encre utile) et de supprimer tout élément redondant ou superflu pour faciliter la compréhension. Une référence utile pour quiconque souhaite améliorer la présentation de données.
On n'utilise pas un table pour le design d'une interface... et les "id" sont uniques
Tout est dans le titre
L'auteur présente des conseils et bonnes pratiques pour le design / UX des tableaux de données : choix des couleurs, polices de caractère, alignement, etc. Tout y est ^^
L'auteur montre une astuce pour l'élément table, astuce qui permet de donner une largeur minimale à une colonne. Les commentaires de l'article donnent une autre solution (plus propre à mon avis)
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre, sauf que ça concerne CSS
L'auteur expose quelques leçons qu'il a tirées de son expérience sur la construction de tableaux accessibles (via https://stephaniewalter.design/fr/blog/semaine-pixels-5-aout-2016/ )
Tout est dans le titre
Tout est dans le titre
Un vieux problème quasiment résolu ^^
Tout est dans le titre
L'auteur montre la mise en place minimale d'un tableau HTML adaptatif et conforme au standard d'accessibilité WCAG
Tout est dans le titre
Tout est dans le titre
Des sélecteurs CSS pour permettre la sélection d'une cellule d'un tableau en un clic : pratique !
Tout est dans le titre