Eric Meyer explore une solution pour rendre accessibles des en-têtes de tableau avec cellules divisées diagonalement, comme dans la documentation d’Apollo 16. Il propose d’abord une structure HTML avec deux lignes d’en-têtes, mais cette approche échoue aux critères d’accessibilité WCAG 1.3.3. Une alternative validée par des experts consiste à utiliser rowspan pour fusionner les cellules de la première ligne, améliorant ainsi la navigation au clavier.
Pour le rendu visuel, Meyer utilise du positionnement CSS absolu et relatif pour superposer la deuxième ligne d’en-têtes sur la première, créant l’effet de division diagonale. Un dégradé linéaire sert à matérialiser cette séparation, bien qu’un SVG soit suggéré pour une implémentation plus robuste en production.
L’article souligne les limites de cette méthode, notamment des risques de chevauchement des textes ou de dépassement des cellules, nécessitant parfois un ajustement de la hauteur minimale. Malgré ces défis, la solution offre un compromis entre accessibilité et design, tout en invitant à des améliorations futures.
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 !