表計算からHTMLテーブルへ

セルを一つずつ読まれる表

表を見るとき、目は列の上へ飛んで、数字が何を意味するかを確かめます。スクリーンリーダーを使う人はセルを一つずつ聞くので、上をちらりと見ることができません。だから、値と見出しのつながりをマークアップで伝える必要があります。

<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>

scope="col" と scope="row" があれば、このセルは「North、Revenue、$4,200」と読み上げられます。caption は利用者が表に入ったときに読まれるので、詳しく見る価値があるかを判断できます。スプレッドシートのスクリーンショットでは、これが何も伝わりません。検索もできず、拡大するとぼやけます。

セルの読み取り方

Excel、Googleスプレッドシート、LibreOfficeからコピーすると、範囲のHTML版がクリップボードに入ります。ツールはまずその版を読むので、結合セルが colspan と rowspan として残ります。

入力したテキストやCSVファイル（最大5 MB、UTF-8で読み、だめならWindows-1252）の場合は、区切り文字を見極める必要があります。どこかにタブ文字があれば、それで決まりです。なければ、最初の30行でセミコロン、カンマ、縦棒を試し、列数が最もそろうものを選びます。データの周りの空の行と列は取り除きます。

見出しは1行目です。その行のセルが下方向に結合されていれば、見出しはそれを覆うまで広がります。最大3行までです。

数値と日付の扱い

埋まっているセルの80パーセント以上が数値として読める列は、数値列とみなします。数値列は桁がそろうよう右揃えにします。

記号のない整数は、同じ列に金額もある場合を除いてそのままにします。年や参照番号に桁区切りが付かないようにするためです。0で始まる値はコードとみなし、一切触りません。あいまいな 1,234 については、シートのほかの部分が小数をどう書いているかを見てから決めます。

日付は、誰も読み間違えない唯一の順序である YYYY-MM-DD に書き換えます。列が日が先か月が先かを知るために、どちらかの位置に12を超える値がないかを探します。決め手となるセルがなければ、日付は入力どおりに残し、その数をチェックでお知らせします。

チェック結果の読み方

• 見出し行がない、または1行目がデータに見える（半分以上が数値や日付）：シートに見出しの行を追加してください。
• 見出しのない列：見出しセルが空だと、スクリーンリーダーは何も読み上げられません。
• キャプションがない：短い一言で十分です。
• 結合セルを維持：有効ですが、移動しにくくなります。結合を解除して値を繰り返すほうが親切です。
• 空の行や列：表計算では余白ですが、ウェブページでは邪魔なだけです。
• 幅の広い表：5列を超えていて、横スクロールがオフになっています。

どの警告にも当てはまらなければ、構造がアクセシブルであることを確認する一行が出ます。

2種類の出力

WordPress用

表はスタイルをほとんど持たない <figure class="wp-block-table"> に入るので、テーマがほかの表と同じように描きます。コードを「カスタムHTML」ブロックに貼り付けてください。

単体用

コードには、固有のクラス名に結び付いた短い <style> ブロックが付きます。ほかのサイトや単独のページ向けです。完全な .html ファイルとしてダウンロードすることもできます。

スクロールがオンなら、外枠に role="region"、tabindex="0"、キャプションから取ったラベルが付きます。キーボードの利用者はその領域にフォーカスし、矢印キーでスクロールできます。

持ち出されるのはセルの値だけです。数式、セルの色、太字、列幅、スプレッドシートの表示設定にしかない数値書式は残ります。