table要素内のth要素やscope属性の有無によるスクリーンリーダーの読み上げの違い

table要素内のth要素やscope属性を使用することで、以下の環境でスクリーンリーダーがどう読み上げるか確認してみました。

  1. PC-Talker 7 + Internet Explore 11
  2. PC-Talker7 + NetReader2
  3. NVDA+ Firefox、Google Chorme
  4. JAWS 17 + Firefox、Google Chorme
  5. Windows 10 ナレーター + Edge
  6. VoiceOver(iOS版) + Safari
  7. VoiceOver(Mac版) + Google Chrome

 上の環境でこのエントリの最後にあるテストサンプルのパターン1からパターン4を読み上げて確認しました。

確認結果

1. PC-Talker 7 + Internet Explore 11

 この組み合わせでは、th要素とscope属性に対応していることが確認できませんでした。

2. PC-Talker7 + NetReader2

 NetReaderには「テーブルモード」というモードがあります。テーブルに入って、Insertキーを押すとテーブルモードになり、横(行移動)だけではなく、縦(列移動)も可能になります。移動先セルの読み上げをオンにすると(オン/オフ Ctrl+F9)、カーソルが移動したセルのth見出しを読み上げます。
  行の移動→移動したセルの列の見出しを読み上げる
  列の移動→移動した行の見出しを読み上げる

Shift+F9で、カレントなセルの値とともに、その行見出しと列見出しを読み上げます。
scope属性はおそらく対応していない。パターン3のような見出しが複数の階層からなる場合は、最も内側の見出しが読まれています。

3. NVDA+ Firefox、Google Chormeから7.VoiceOver(Mac版) + Google Chromeまで

 いずれもth要素とscope属性に対応しているようです。VoiceOverだけは若干操作方法が異なりましたが、Tキーでテーブル単位にフォーカスを移動でき、Ctrl+Alt+矢印キーでセルを自由に移動できるようで、操作方法も共通するものが多いようです。

 読み上げ方はスクリーンリーダーによって異なるのですが、概ね共通する挙動は以下のとおりでした。

  • 行移動(セルを横に移動させる)の場合は移動した先のセルの行見出しを読み上げる(パターン2の「仮面ライダー」の行を移動する場合は、「2015年 ゴースト」「2016年 エグゼイド」などとと読み上げる)
  • 列移動(セルを縦に移動する場合)の場合は、移動した先のセルの行見出しを読み上げる(パターン2の「2017年」の列を移動する場合は、「仮面ライダー ビルド」、「スーパー戦隊 宇宙戦隊キュウレンジャー」などと読み上げる)
  • scoep属性が設定されていれば、パターン4のように、見出しが複数に階層重なる場合も外側から順番に読み上げる(パターン4の場合、「東映特撮 スーパー戦隊 動物戦隊ジュウオウジャー」のように)。

 th要素があるだけ、列見出しや行見出しは読み上げてくれるので、パターン2やパターン3のようなシンプルな表であれば、scope属性の有無に差は見られませんした。scope属性が効果を発揮するのは、パターン3のような複数の見出しが重なるパターンのようです。

 ただ、パターン2やパターン3の1列目は、列見出しに「ヒーロー種別」とつけていますが、この列はth要素の並ぶ見出し行であるため、パターン2の場合、列見出しの「ヒーロー種別 仮面ライダー」とは、読み上げてくれません。パターン3のようにscope属性を使用していると、「ヒーロー種別 仮面ライダー」のように、1行目の列見出しも読み上げてくれる環境もありました(ないものもあった)

まとめ

 行を移動している時に、列見出しも一緒に読んでくれるだけで、スクリーンリーダーユーザーにとってはわかりやすさが全く異なると思いますので、ここまで対応が進んでいると、th要素とscope要素を使用する意義を改めて感じました。

 このエントリでもときどき、以下のように大部な表を掲載していますが、th要素とscope属性に対応した環境であれば、大部であっても、スクリーンリーダーで利用可能なコンテンツになっているのでしょうか(気になる)。

 
  Ctrl+Alt+矢印キーでセルを移動すると、セルの値とともに見出しを読み上げるものが多かったのですが、NVDAの場合は、矢印キーで移動するだけでもセルのテキストだけではなく、見出しも読み上げてくれるので(この場合は行移動しかできませんが)、テーブルの利用のハードルがさらに低くてよいのではないかと感じました。

 ここまで書いていて、以下で紹介されているパターンもあることに気がつきましたが、力尽きて改めての確認できませんでした。NVDA+Windowsでは、この記事が書かれた2016年10月と状況は変わっていないようですね。

テストサンプル

パターン1(th要素、scope属性なし)


<table>
<caption>パターン1(th要素、scope属性なし) 仮面ライダーとスーパ戦隊の放送開始年</caption>								
<tr><td>ヒーロー種別</td><td>2015年</td><td>2016年</td><td>2017年</td><td>2018年</td></tr>
<tr><td>仮面ライダー</td><td>ゴースト</td><td>エグゼイド</td><td>ビルド</td><td>未定</td></tr>
<tr><td>スーパー戦隊</td><td>手裏剣戦隊ニンニンジャー</td><td>動物戦隊ジュウオウジャー</td><td>宇宙戦隊キュウレンジャー</td><td>快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー</td></tr>
</table>
パターン1(th要素、scope属性なし) 仮面ライダーとスーパ戦隊の放送開始年
ヒーロー種別 2015年 2016年 2017年 2018年
仮面ライダー ゴースト エグゼイド ビルド 未定
スーパー戦隊 手裏剣戦隊ニンニンジャー 動物戦隊ジュウオウジャー 宇宙戦隊キュウレンジャー 快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー

パターン2 (th要素、scope属性なし)


<table>
<caption>パターン2 (th要素、scope属性なし) 仮面ライダーとスーパ戦隊の放送開始年</caption>
<thead>					
<tr><th>ヒーロー種別</th><th>2015年</th><th>2016年</th><th >2017年</th><th>2018年</th></tr>
</thead>
<tbody>
<tr><th>仮面ライダー</th><td>ゴースト</td><td>エグゼイド</td><td>ビルド</td><td>未定</td></tr>
<tr><th>スーパー戦隊</th><td>手裏剣戦隊ニンニンジャー</td><td>動物戦隊ジュウオウジャー</td><td>宇宙戦隊キュウレンジャー</td><td>快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー</td></tr>
</tbody>
</table>
パターン2 (th要素、scope属性なし) 仮面ライダーとスーパ戦隊の放送開始年
ヒーロー種別 2015年 2016年 2017年 2018年
仮面ライダー ゴースト エグゼイド ビルド 未定
スーパー戦隊 手裏剣戦隊ニンニンジャー 動物戦隊ジュウオウジャー 宇宙戦隊キュウレンジャー 快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー

パターン3 (th要素、scope属性あり)


<table>
<caption>パターン3 (th要素、scope属性あり)仮面ライダーとスーパ戦隊の放送開始年</caption>
<thead>					
<tr><th scope="col">ヒーロー種別</th><th scope="col">2015年</th><th scope="col">2016年</th><th scope="col">2017年</th><th scope="col">2018年</th></tr>
</thead>
<tbody>
<tr><th scope="row">仮面ライダー</th><td>ゴースト</td><td>エグゼイド</td><td>ビルド</td><td>未定</td></tr>
<tr><th scope="row">スーパー戦隊</th><td>手裏剣戦隊ニンニンジャー</td><td>動物戦隊ジュウオウジャー</td><td>宇宙戦隊キュウレンジャー</td><td>快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー</td></tr>
</tbody>
</table>
パターン3 (th要素、scope属性あり)仮面ライダーとスーパ戦隊の放送開始年
ヒーロー種別 2015年 2016年 2017年 2018年
仮面ライダー ゴースト エグゼイド ビルド 未定
スーパー戦隊 手裏剣戦隊ニンニンジャー 動物戦隊ジュウオウジャー 宇宙戦隊キュウレンジャー 快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー

パターン4 (th要素、scope属性あり、列見出しが複数階層)

 パターン4は、列が2行になります。1列目に「東映特撮」という列見出しがあり、その下の階層の見出しとして、2列目に「仮面ライダー」、「スーパー戦隊」という見出しがあります。3行目の列見出しは「大河ドラマ」ですが、これは東映特撮ものではありませんので1列目と2列目を統合しています。

<table>					
<caption>仮面ライダーとスーパ戦隊と大河ドラマの放送開始年(列見出しが複数重なる)</caption>
<thead>										
<tr><th colspan="2" scope="colgroup">ジャンル</th><th scope="col">2015年</th><th scope="col">2016年</th><th scope="col">2017年</th><th scope="col">2018年</th></tr>
</thead>											
<tbody>											
<tr><th rowspan="2" scope="rowgroup">東映特撮</th><th scope="row">仮面ライダー</th><td>ゴースト</td><td>エグゼイド</td><td>ビルド</td><td>未定</td></tr>
<tr><th scope="row">スーパー戦隊</th><td>手裏剣戦隊ニンニンジャー</td><td>動物戦隊ジュウオウジャー</td><td>宇宙戦隊キュウレンジャー</td><td>快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー</td></tr>
<tr><th colspan="2" scope="rowgroup">大河ドラマ</th><td> 花燃ゆ</td><td>真田丸</td><td>おんな城主 直虎</td><td>西郷どん</td></tr>
</tbody>
</table>
仮面ライダーとスーパ戦隊と大河ドラマの放送開始年(列見出しが複数重なる)
ジャンル 2015年 2016年 2017年 2018年
東映特撮 仮面ライダー ゴースト エグゼイド ビルド 未定
スーパー戦隊 手裏剣戦隊ニンニンジャー 動物戦隊ジュウオウジャー 宇宙戦隊キュウレンジャー 快盗戦隊ルパンレンジャー VS 警察戦隊パトレンジャー
大河ドラマ 花燃ゆ 真田丸 おんな城主 直虎 西郷どん

『保健医療科学』 第66巻 第5号 (2017年10月)特集「地域の情報アクセシビリティ向上を目指して―『意思疎通が困難な人々』への支援―」

 国立保健医療科学院の刊行物『保健医療科学』 第66巻 第5号 (2017年10月)の特集が「地域の情報アクセシビリティ向上を目指して―『意思疎通が困難な人々』への支援―」です。

  • 巻頭言 地域の情報アクセシビリティ向上を目指して―「意思疎通が困難な人々」への支援― / 橘とも子
  • 共生社会における情報アクセシビリティ向上を目指して〈論壇〉 / 橘とも子
  • 意思疎通が困難な者に対する国の福祉的支援施策について〈解説〉 / 村山太郎
  • 難治性神経・筋疾患に対するコミュニケーション支援技術: 透明文字盤,口文字法から最新のサイバニックインタフェースまで〈総説〉 / 中島孝
  • ICT による障碍者に対する意思疎通支援の現状と課題〈総説〉 / 水島洋
  • 意思疎通が困難な者への障害種別ごとに求められる支援手法に関する文献レビュー〈総説〉 / 佐藤洋子
  • 失語症のある人のための意思疎通支援〈総説〉 / 立石雅子
  • 視覚障害者の意思疎通支援サービス,及びICT機器利用状況の地域間差の分析〈総説〉 / 渡辺哲也
  • 自閉スペクトラム症の社会モデル的な支援に向けた情報保障のデザイン:当事者研究の視点から〈総説〉 / 熊谷晋一郎