• コーディング ファクトリーHOME
  • Coding Methodology
  • 第142回 音声読み上げ対応でテーブルのアクセシビリティを改善!

コーディングメソドロジー

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

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

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

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム