table要素内にth要素が必要な理由

スクリーンリーダーユーザーがWebページから情報を得る際には、画面を見ながらの情報取得とは違った工夫が必要な場合があります。その1つが、テーブルからの情報の取得です。画面を見ながらテーブルから情報を取得する場合、テーブルの行と列の内容を同時に確認できます。一方、スクリーンリーダーは項目を1つずつしか読み上げないため、特に2次元的にレイアウトを把握する必要のあるテーブルから情報を得ることが難しくなる場合があります。

こうした問題の解決策の1つに、テーブルの見出しセルにth要素を設定するというものがあります。th要素を設定すると、読み上げ方に若干の違いはあるものの、スクリーンリーダーでデータセル（td要素）の内容を読み上げさせたときに、対応する見出しセルの内容を合わせて読み上げるようになります。

th要素を設定することで閲覧しやすくなるテーブルの一例には、カレンダーがあります。見出し行に曜日が、データセルに日付が記載されたカレンダーを例に、いくつかのスクリーンリーダーでどのように読み上げるのかを実際の音声付きで説明します。

まずは、NVDAとGoogle Chromeを使用した際の音声です。

「th要素なし」では、フォーカスのある項目については読み上げますが、データセルに対応する見出しセルの内容は読み上げられず、日付と曜日を関連付けるのが難しい状態となっています。「th要素あり」では、「水曜 3列 1日」など、対応する見出しセルの名前を読み上げるため、何日が何曜日であるかを素早く把握できます。さらに、これはth要素の設定の有無にかかわらず利用できますが、テーブル内で行方向だけでなく、列方向へと移動できる機能も利用できます。例えば今回の例では、「3月の水曜日は何日か」といったことを簡単に確認できます。

次に、PC-TalkerとGoogle Chromeを使用した際の音声です。

読み上げ方をNVDAと比較すると、テーブルの行数・列数を読み上げない点以外に違いはなく、「th要素あり」では、対応する見出しセルの内容を読み上げます。ただし、Google Chromeとの組み合わせでは、テーブル内で列方向へ移動できる機能は利用できません。

最後に、iOSのVoiceOverとSafariを使用した際の音声です。

テーブルの内容の読み上げ方はPC-Talkerと同様です。また、こちらもPC-Talkerと同じくテーブル内で列方向へと移動する機能は利用できません。

このように、th要素が設定されていると、読み上げから行と列を関連付けて情報を取得できます。一方、th要素が設定されていないと、特にPC-TalkerとGoogle Chromeなど、テーブル内での列方向への移動が利用できないスクリーンリーダーやブラウザの組み合わせで関連付けに多くの時間がかかってしまいます。カレンダーという比較的シンプルに思えるようなテーブルであっても、スクリーンリーダーユーザーが情報を得るためには工夫が必要であり、th要素によって行と列を関連付けられるようにすることが重要になります。