Tableur vers tableau HTML

Un tableau lu cellule par cellule

Quand vous regardez un tableau, vos yeux remontent en haut de la colonne pour se rappeler ce que signifie un nombre. Une personne qui utilise un lecteur d’écran entend une cellule à la fois et ne peut pas jeter un coup d’œil vers le haut. Le code doit donc porter le lien entre une valeur et son en-tête.

<table>
  <caption>Sales by region, 2026</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>$4,200</td></tr>
  </tbody>
</table>

Avec scope="col" et scope="row", la cellule est annoncée « North, Revenue, $4,200 ». La caption est lue quand l’utilisateur entre dans le tableau, ce qui lui permet de décider s’il vaut la peine d’être exploré. Une capture d’écran de tableur ne lui apporte rien de cela. Elle ne peut pas non plus être recherchée et elle devient floue quand on zoome.

Comment vos cellules sont lues

Quand vous copiez depuis Excel, Google Sheets ou LibreOffice, une version HTML de la plage arrive dans le presse-papiers. L’outil lit d’abord cette version, ce qui permet aux cellules fusionnées de survivre sous forme de colspan et de rowspan.

Pour du texte tapé ou un fichier CSV (jusqu’à 5 Mo, lu en UTF-8, sinon en Windows-1252), l’outil doit deviner le séparateur. S’il y a une tabulation quelque part, c’est réglé. Sinon il essaie le point-virgule, la virgule et la barre verticale sur les 30 premières lignes et garde celui qui donne le nombre de colonnes le plus régulier. Les lignes et colonnes vides autour des données sont retirées.

L’en-tête est la première ligne. Si une cellule de cette ligne est fusionnée vers le bas, l’en-tête s’étend pour la couvrir, jusqu’à trois lignes.

Ce qui arrive aux nombres et aux dates

Une colonne est considérée comme numérique quand au moins 80 pour cent de ses cellules remplies se lisent comme des nombres. Les colonnes numériques sont alignées à droite pour que les chiffres tombent en face les uns des autres.

Les nombres entiers sans symbole sont laissés tels quels, sauf si leur colonne contient aussi des montants, ce qui évite que vos années et vos numéros de référence reçoivent un séparateur de milliers. Une valeur qui commence par zéro est un code et n’est jamais touchée. Pour le cas ambigu 1,234, l’outil regarde comment le reste de la feuille écrit les décimales avant de décider.

Les dates sont réécrites en AAAA-MM-JJ, le seul ordre que personne ne lit de travers. Pour savoir si une colonne commence par le jour ou par le mois, l’outil cherche une valeur supérieure à 12 à l’une des deux positions. Quand aucune cellule ne tranche, les dates restent telles que saisies et les vérifications vous disent combien il y en a.

Lire les vérifications

• Pas de ligne d’en-tête, ou la première ligne ressemble à des données (plus de la moitié sont des nombres ou des dates) : ajoutez une ligne de titres dans la feuille.
• Colonnes sans titre : une cellule d’en-tête vide ne laisse rien à annoncer à un lecteur d’écran.
• Pas de légende : une courte phrase suffit.
• Cellules fusionnées conservées : valide, mais plus difficile à parcourir. Défusionner et répéter la valeur est plus aimable.
• Lignes ou colonnes vides : dans un tableur ce sont des espaces, sur une page web c’est du fouillis.
• Tableau large : plus de cinq colonnes avec le défilement horizontal désactivé.

Quand aucun avertissement ne s’applique, une ligne confirme que la structure est accessible.

Deux types de sortie

Pour WordPress

Le tableau est placé dans un <figure class="wp-block-table"> presque sans style, pour que votre thème le dessine comme n’importe quel autre tableau. Collez le code dans un bloc HTML personnalisé.

Autonome

Le code vient avec un court bloc <style> lié à un nom de classe unique, pour tout autre site ou pour une page à part. Vous pouvez aussi le télécharger sous forme de fichier .html complet.

Avec le défilement activé, l’enveloppe reçoit role="region", tabindex="0" et une étiquette tirée de la légende. Les utilisateurs du clavier peuvent alors placer le focus sur la zone et la faire défiler avec les flèches.

Seules les valeurs des cellules font le voyage. Les formules, les couleurs de cellule, le gras, la largeur des colonnes et les formats de nombre qui n’existent que dans les réglages d’affichage du tableur restent derrière.