Coding Methodology

音声読み上げ対応でテーブルのアクセシビリティを改善!

2021 / 06 / 01

コーディングしたテーブルを読み上げソフトで確認してみると、思っていたよりも問題なく読まれることもあれば、意味が通じにくくなってしまう場合もあります。 今回は、どのようなテーブルだと上手く読み上げられるのか、反対にどのようなテーブルだと問題が発生するのか、そのパターンと解決方法についてご紹介していきたいと思います。(検証環境は、Windows NVDA+Firefoxとなります。)

音声読み上げ対応でテーブルのアクセシビリティを改善!

修正不要。シンプルなパターン

【CASE1-1】見出しセルが列または行どちらか一方にある。 【CASE1-2】見出しセルが列または行どちらか一方にあり、見出しセルが結合している。

このようにシンプルなテーブルの場合は、見出し要素を<th>、データ要素を<td>でマークアップすると、「見出し」→「データ」の順に読み上げてくれます。

【CASE1-1】
【CASE1-2】

scope属性を使うと安心!見出しセルが複数あるパターン

【CASE2】見出しセルが列・行どちらにもある。

▼問題点

「職種」→「職種・人数」→「職種・人数・日本」→「人数・タイ」→「運用」→「運用・コーダー」と「職種」セルを行方向のタイトルとみなして読み上げてしまいます。(矢印①)

▼解決策

「職種」セルに「scope=”colgroup”」属性を追記すると、「職種」→「人数」→「人数・日本」→「人数・タイ」→「職種・運用」→「運用・職種・コーダー」と「職種」セルを列方向のタイトルとみなして読み上げるようになります。(矢印②)
このように、見出しセルが複数行または複数列にある場合は、読み上げソフトに方向を正しく伝えるため、scope属性を設定すると安心です。

【CASE2】

要注意!データセルが結合しているパターン

【CASE3-1】結合したデータセルと紐づく見出しセルが複数存在する。

▼問題点

「コーダー」→「日本・6人」→「ディレクター」→「日本・2人」…と「タイ・6人」をとばして読み上げられます。

▼解決策

idとheaders属性を使用します。まず、「日本」と「タイ」の<th>にidを設定します。「日本」は「id=”japan”」、「タイ」は「id=”thai”」を設定した場合、「6人」セルに「headers=”japan thai”」とheaders属性を追記すると、「コーダー」→「日本・タイ・6人」→「ディレクター」…と読み上げられるようになります。

【CASE3-1】表

【CASE3-1】HTMLコード

<table>
  <tr><td></td><th id="japan">日本</th><th id="thai">タイ</th></tr>
  <tr><th>コーダー</th><td colspan="2" headers="japan thai">6人</td></tr>
  <tr><th>ディレクター</th><td>2人</td><td>3人</td></tr>
</table>

【CASE3-2】結合したデータセルと紐づく要素が、見出しセルではなくデータセル。

▼問題点

「職種・コーダー」→「日本・6人」→「タイ・3人」→「職種・ディレクター」→「タイ・2人」のように、「ディレクター」後の「日本・6人」をとばして読み上げられます。紐づく要素がデータセルのため、idとheaders属性で関連付けすることや、scope属性の付与はできません。

▼解決策

「職種」列を<th>でマークアップし直して、【CASE3-1】同様idとheaders属性を付与するか、「日本」列の結合を解除するなどの検討が必要になります。

【CASE3-2】

テーブルをコーディングする際、見た目がデザイン通りであれば良しとしてしまいがちですが、もし読み上げソフトの対応が不十分であった場合、読み上げソフト利用者には正しい情報を伝えることができません。今回挙げた例のように、結合セルがある場合や、見出しセルが行と列両方にある場合は注意が必要です。なるべくシンプルなテーブルにするのが一番ですが、上記の方法もご検討頂けたらと思います。

一覧に戻る