アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える

前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。

それ、本当に役に立つの？

はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとheaders属性の使用はソースが煩雑になってしまってあまり現実的ではないです）。

なので「これって本当に役に立つのかな？」という疑問が残っています。

でも、テーブルの構造をソースコードで明示しておくことには意味があると思うので、基本的なコーディングのやり方くらいは覚えておこうと思います。ソースコードを読み取って解釈するのはVoiceOverだけじゃないですし。複雑なテーブルにせざるを得ない状況（クライアントの要望とか？）もあると思います。

ちょっと複雑なデータ・テーブルのコーディング

W3Cのウェブアクセシビリティ・チュートリアル の内容をもとに、自分なりに検証して必要だと思う内容を整理してみました。

今回まとめたのは以下の2つのコーディングのやり方です。

1. 見出し列をグルーピングするcolgroupの使い方
2. 見出し行をグルーピングするtbodyとrowgroupの使い方

実は、この「ちょっと複雑」というところがキモで、これ以上複雑な構造のテーブルは使わない方が良いと考えています。複雑なテーブルはユニバーサルにわかりやすくするのが困難なので、そもそもの構造を見直すのが得策だと思うからです。もちろん、目的によって判断基準は違ってきますが、より多くのユーザに、よりわかりやすく情報を提供したいのであれば、複雑な構造のデータ・テーブルはシンプルに再構成するなどの工夫をすべきです。

1. colgroup要素で構造を定義

まず、colとcolgroup要素を使って列のグループ構成をtableタグのすぐ下に定義します。1つのセルをcol、スパンする列をcolgroup要素とspan属性を使って記述します。スパンさせるセルの数も含め、合計が見出しのセルの数の合計と同じなるようにします。

<table>
  <caption>メンバーの好き嫌い</caption>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>

<!-- 略 -->

VoiceOverで読み上げると…

たとえば、上述したサンプルのテーブルで「トマト」を選択するとVoiceOverでは以下のように読み上げられます。

トマトが「食べ物」のグループに属することがわかっていいですね。

ただ、その下のセル（好き）を選択すると、「トム、食べ物、好き」としか読み上げられないので、テーブルの構造を頭の中で描けてないとトマトのことを言っているのかピーマンなのかわかりません。

これを考えると、以下のようにテーブルを2つに分けた方が親切かもしれません。データの比較は難しくなるかもしれませんが、内容の理解が難しくなるよりはましだと思います。

colgroupとscopeを入れない場合

ちなみに、colgroupやscopeを入れないバージョンを作ってVoiceOverで読み上げてみたんですが、読み上げ内容に特に変わりありませんでした。他のスクリーンリーダーやデバイスだと変わるのっでしょうか？この辺は今後の調査課題です。

1. tbodyでスパンした行をグルーピングする

スパンした行を以下のようにtbody要素を使ってグルーピングします。tbody要素は1つのテーブルで複数回使っていいんですね。僕はてっきり1回だけだと思ってました。

<!-- 略 -->
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">パンタロン</th>
      <th scope="row">赤</th>
      <td>L、M、S</td>
    </tr>
    <tr>
      <th scope="row">青</th>
      <td>L、S、XS</td>
    </tr>
    <tr>
      <th scope="row">緑</th>
      <td>XL、M、XS</td>
    </tr>
  </tbody>
  <tbody>
    <!-- 略 -->
  </tbody>
<!-- 略 -->

VoiceOverで読み上げると…

たとえば、テーブルの外にフォーカスがある状態でパンタロンの青を選択すると以下のように読み上げてくれます。

ここまではわかりやすいですね。ところが、パンタロンの青のサイズ（L、S、XS）を選択すると、以下のように読み上げられます。

この読み上げだと、どの色のパンタロンなのかわからないですね。

テーブルを上から順番に読み上げていけば理解できるんですけどね。それでも、以下のようにテーブルを分割した方が親切かもしれません。

分割したテーブルの例

さいごに

今回は、アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングのやり方をまとめてみました。結局、「本当に役に立つのか？」という疑問が残り、セルはスパンさせずにテーブルを分割した方が良さそうだという結論に至りました。

でも、colgroupやrowgroupなどの基本的な使い方は覚えておきたいと思います。VoiceOver以外のスクリーンリーダーが、よりわかりやすく読み上げてくれるかもしれないですし、こうやってコーディングしておけば将来VoiceOverが進化した時に、読み上げ方が変わっているかもしれません。

colgroupやrowgroupを指定するコーディングは、それほど手間のかかることでもないですし、基本に忠実にコーディングしていこうと思います。

では、Enjoy making accessible tables!

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

この記事をシェアする

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