Les cellules de tableau vides

Dans les tableaux de données il arrive parfois que des cellules restent vides, ce qui peut donner l’impression que votre tableau est mal structuré graphiquement si ces cellules sont nombreuses ou placées aléatoirement.

Aussi, on peut vouloir y placer un indicateur graphique ou textuel qui remplira la cellule.

La restitution des cellules vides peut différer en fonction du lecteur d’écran que vos utilisateurs utilisent, mais elle devrait rester identique quel que soit le tableau parcouru.

Avec VoiceOver sous Mac, on peut entendre par exemple « vierge, colonne trois sur quatre » ; et je ne souhaite pas que l’ajout d’un caractère typographique décoratif vienne perturber cette restitution.

La pseudo-classe :empty semble idéale ici :

• elle va permettre de détecter les cellules vides ;
• l’injection d’un contenu via un pseudo-élément n’aura pas d’impact sur celle-ci.

Mais comme nous l’avons vu par le passé, les contenus générés dans des pseudo-éléments sont vocalisés, nous allons donc essayer d’empêcher ça.

CSS prévoit la possibilité de passer une alternative aux contenus générés via cette syntaxe :

::before {
    content: '★★★' / 'Trois étoiles';
}

On pourrait donc envisager d’écrire quelque chose du style :

td:empty::before {
    content: '–' / '';
}

Malheureusement, le support de cette syntaxe reste trop aléatoire à ce jour.

Je retiens donc une solution qui ne se base pas que sur CSS, et je préfère injecter dans mes cellules vides ce petit bout de HTML :

<td><span aria-hidden="true" data-before-content="–"></span></td>

Le aria-hidden permet de conserver une sémantique de cellule vide, et le tout combiné à cette règle CSS, cela fonctionne parfaitement :

[data-before-content]::before {
    content: attr(data-before-content);
}

Avantages à passer ainsi par un attribut de donnée (data-*) :

• le contenu textuel reste décoratif et lié à la présence de CSS ;
• il serait plus facile de le traduire (si besoin) sans devoir générer des fichiers CSS dédiés aux langues.

---

Le CodePen qui permet de tester les différentes approches est ici.