Les tableaux HTML présentent des données tabulaires (des lignes et des colonnes de données connexes) — pas une mise en page. Un tableau accessible utilise une structure appropriée afin que les lecteurs d'écran puissent annoncer les en-têtes avec chaque cellule.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> avec scope — marque les cellules d'en-tête. scope="col" pour les en-têtes de colonne, scope="row" pour les en-têtes de ligne. Les lecteurs d'écran annoncent alors « Nord, Chiffre d'affaires : 12 000 $ » au lieu de lire les cellules sans contexte.<caption> — un titre pour tout le tableau, le premier enfant de <table> ; lu à voix haute pour orienter les utilisateurs.<thead>/<tbody>/<tfoot> — groupent les lignes d'en-tête, de corps et de résumé ; facilitent la navigation et permettent à l'en-tête de se répéter lors de l'impression.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Les tableaux de mise en page confondent les lecteurs d'écran (ils annoncent la sémantique du tableau de données) et sont peu flexibles. Utilisez CSS Grid/Flexbox pour la mise en page des pages.
La sémantique correcte des tableaux (<th scope>, <caption>, sectionnement) est ce qui rend les tableaux de données utilisables pour les utilisateurs de lecteurs d'écran — ils lient chaque valeur à ses en-têtes de ligne et de colonne.
Réservez <table> strictement aux données tabulaires véritables.