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.