th、scope、caption要素

本物のデータテーブルは、行と列の関係を示します。適切にマークアップすれば、スクリーンリーダーは各値がどの見出しに属するかを読み上げられます。

すべてのセルが単なるtdだと、スクリーンリーダーは文脈なしで数字を読み上げます。ユーザーには値は聞こえても、意味はわかりません。

見出しセルを td から th に置き換えてください。これでブラウザーは、それらのセルがデータを格納するのではなくラベルを付けるものだと認識し、見出しとして公開します。

th 要素は見出しとして通知され、説明対象のセルと関連付けられます。この関連付けが、単独では意味を持たない数字に意味を与えます。

各 th に scope を追加し、どのセルを対象とするかを示します。列見出しには col、行見出しには row を指定します。

列の上部にある見出しには scope=col を使います。ユーザーが列を下へ移動すると、その下の各セルがこのラベルを引き継ぎます。

行を示す最初のセルには scope=row を使います。左端にある人物名や日付などで、その行を識別する場合に使用します。

caption 要素はテーブル全体にタイトルを付けます。スクリーンリーダーユーザーは最初にこれを聞くため、これから何を確認するのか把握できます。

テーブルの開始タグの直後、テーブル内の最初の子要素として caption を置いてください。ほかの位置では無効となり、無視される可能性があります。

近くに h2 があるだけでは不十分です。caption はプログラム上テーブルと関連付けられるため、テーブルからテーブルへ移動してもタイトルを見つけられます。

caption、scope を指定した th の見出し行、そしてデータ行。この基盤があれば、ほとんどの単純なテーブルを ARIA なしで完全にアクセシブルにできます。

アクセシブルなテーブルの3要素を学びました。見出しには th、対象を指定するには scope、テーブル名には caption を使います。これで作業の大部分は完了です。