Les tableaux de mise en page sont un piège

Il y a des années, les développeurs construisaient la mise en page des pages avec l’élément table. Cette habitude persiste dans l’ancien code et cause encore aujourd’hui de réels problèmes d’accessibilité.

Un lecteur d’écran traite chaque tableau comme des données. Il annonce les lignes, les colonnes et le nombre de cellules de votre mise en page, submergeant les utilisateurs sous une structure dépourvue de sens.

Les tableaux de mise en page répartissent souvent le contenu dans des cellules selon une séquence déroutante. L’ordre visuel et l’ordre de lecture divergent, laissant les utilisateurs désorientés.

La mise en page moderne relève de CSS. Utilisez flexbox ou grid pour organiser une page, et gardez l’élément table uniquement pour les véritables données tabulaires.

Lorsque vous alignez des éléments sur une ligne ou une colonne, flexbox est l’outil naturel. Il s’adapte au contenu sans que la sémantique des tableaux intervienne.

Pour gérer ensemble les lignes et les colonnes, grid de CSS vous offre un véritable système de mise en page. Il sépare l’apparence d’une page de la signification de son balisage.

Avec une mise en page CSS, votre HTML peut utiliser de véritables repères comme header, nav et main. Les utilisateurs de lecteurs d’écran obtiennent une carte pertinente plutôt qu’un simple décompte de cellules.

Si vous ne pouvez vraiment pas supprimer un ancien tableau de mise en page, ajoutez role=presentation. Cela supprime la sémantique du tableau afin que les technologies d’assistance ignorent la grille.

Considérez role=presentation comme un pansement temporaire. La véritable solution consiste à migrer vers CSS, ce qui élimine le problème au lieu de le dissimuler.

L’absence de légende et de th, ainsi que des cellules contenant des sections entières plutôt que des valeurs, sont des signaux d’alerte. Ce schéma indique presque toujours un tableau de mise en page à refactoriser.

Posez-vous cette question simple pour tout tableau : présente-t-il des données organisées en lignes et colonnes de valeurs liées ? Sinon, il s’agit d’un tableau de mise en page que CSS devrait remplacer.

Vous récupérez une page qui utilise un tableau uniquement pour positionner des colonnes de contenu.

Ne mettez jamais une page en forme avec un tableau. Utilisez flexbox ou grid, réservez les tableaux aux vraies données et ne considérez role=presentation que comme une solution provisoire pour l’ancien code.