アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）

先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。

主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。

ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。

テーブルといってもシンプルなものから複雑なものまであるので、まずはシンプルなテーブルをコーディングする際に必要なことを「基本編」としてまとめます。複雑なテーブルについては後日整理します。

なにごとも、まずは基本から！

3つの基本

シンプルなテーブルのコーディングでは、以下の3つを確実に行います。この3つを守るだけでもデータ・テーブルをアクセシビリティを考慮したものにできます。

1. テーブルの説明を入れる
2. 表の見出しを指定する
3. セルを適切な見出しに紐付ける

まずは基本を確実に、条件反射でできるくらいに習慣化できるといいですね。

2. 表の見出しを指定する

th要素を使って、行と列、または、行か列のヘッダーを指定します。一番シンプルな例だと以下のようになります。

<table>
  <caption>テーブルの短い説明</caption>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

表示例

上のソースがレンダリングされると以下のように表示されます。CSSでスタイルは追加されています。

VoiceOverで読み上げると…

上に示したようにthを使ってテーブルを組むとVoiceOverが見出しを認識してくれるので、列を移動した際にどの見出しの列にあるデータかわかるように「見出し」を先に読み上げてくれます。

たとえば「データ1」を読み上げてから「データ2」を選択すると「見出し2、データ2…」といったように読み上げられます。読み上げられているセルの見出しがわかりやすくて親切ですね。

行と列に見出しを入れる場合

では、行と列に見出しを入れるとどうなるか、もう少し現実味のある情報をテーブルに入れて見てみます。

<table>
  <caption>メンバーの趣向</caption>
  <tr>
    <th>メンバー</th>
    <th>好きなスポーツ</th>
    <th>嫌いな食べ物</th>
  </tr>
  <tr>
    <th>トム</th>
    <td>野球</td>
    <td>バナナ</td>
  </tr>
  <tr>
    <th>ジョン</th>
    <td>バスケットボール</td>
    <td>ベーコン</td>
  </tr>
</table>

表示例

上のソースがレンダリングされると以下のように表示されます。CSSでスタイルは追加されています。

VoiceOverで読み上げると…

VoiceOverを立ち上げて、テーブルの外にフォーカスがある状態でこのテーブルの「野球」を選択すると以下のように読み上げてくれます。

テーブルの外にフォーカスがあったので、まずはcaption要素にあるテーブルの説明を読み上げて、見出しの「トム」と「好きなスポーツ」を読み上げてから、選択されたセルの内容「野球」を読み上げてくれます。

次に「ベーコン」を選択すると以下のように読み上げてくれます。

次に「バスケットボール」を選択すると以下のように読み上げてくれます。

スクリーンリーダーがコンテキストを理解して、必要ない見出しを省略してくれるんですね。たとえばもっと大きなテーブルだったら、同じ列を読み上げてるのに毎回「ジョン」と言われても鬱陶しいですよね。

th要素で見出しを入れておくと、スクリーンリーダーがいい感じに読み上げてくれるのでテーブルの内容がわかりやすくなります。逆に、見出しを入れないと、選択されたセルの内容が読まれるだけなのでテーブルを最初から読み上げないと理解するのが難しくなります。

その他の注意点

情報を集めていて、僕が気になった点をあと3つほど書いておきます。

セルをスパン（統合）させる場合

セルをスパン（統合）させる場合でもscopeは適用されるとのことですが、スクリーンリーダーなどによっては複雑な構造のテーブルはサポートされていないそうなので、できるだけフラットでシンプルなテーブルの構築を心がけたほうが良さそうです。（テーブルだけじゃなくて、他の要素でもそうですね。シンプルイズベスト！）

ちなみに、より複雑な構造のテーブルについてはheaders属性やid属性を使った記述方法もあるらしいですが推奨されていないそうです。どうしても必要になってしまった場合のオプションとして覚えておけば良さそうです。

セルの幅指定について

ページが横スクロールしないようにするために、セルの幅は指定せずにブラウザのウィンドウ幅に合わせた自動的なレイアウトに任せるのが推奨されています。文字が拡大された場合なども考えてセルの高さも指定しないほうが良いです。

とはいえ、幅を指定しないとテーブルが見にくくなるケースもあります。なので、幅を指定する場合はパーセントなどの相対値を使うことが推奨されています。

theadやtbodyについて

thead、tfoot、tbodyはアクセシビリティ的には意味がないそうです。ただ、プリントするときにテーブルが複数ページに印刷される場合に、ヘッダーをリピートしてくれるそうです（要検証）。長いデータ・テーブルの場合、印刷される確率も上がりそうなので入れておくと親切ですね。

以上、アクセシビリティを考慮したデータ・テーブルのコーディングの基本についてまとめてみました。

Let’s have fun coding accessible data tables!

2019年2月5日に公開され、2020年2月17日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存