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 警察戦隊パトレンジャー
大河ドラマ 花燃ゆ 真田丸 おんな城主 直虎 西郷どん

DAISY閲覧環境におけるEPUB3対応

 全視情協(全国視覚障害者情報提供施設協会)のテキストデイジー再生機器等に関する調査結果(2015)を元に、私が知りうる範囲で今の情況を追加してDAISY閲覧環境におけるEPUB3対応をまとめてみました。海外のDAISY閲覧環境を探すともっとあるかもしれません。

 EPUBに対応したDAISYの閲覧環境も増えました。最近出るものは、だいたいEPUBにも対応しています。2013年にEPUBに対応したDASIY再生ソフトウェアと再生機器を調べたときの情況や2014年に「DAISYユーザーのためにEPUB 3リーディングシステムはまだか、という話」というエントリを書いたことがありましたが、その時とは隔世の感があります。

DAISY閲覧環境におけるEPUB3対応一覧
名称 種類 DAISY2.02(音声、マルチメディア) DAISY3.0(テキスト) EPUB3 備考
Voice-Trek DS-902 ICレコーダー 対応 未対応 未対応 販売終了
My BookⅢ DAISY再生ソフト(Windows) 対応 対応 対応
Dolphin EasyReader DAISY再生ソフト(Windows) 対応 対応 対応
AMIS DAISY再生ソフト(Windows) 対応 対応 未対応
ReadHear DAISY再生ソフト(Windows, Mac) 対応 対応 対応
ボイス オブ デイジー スマートフォン、タブレット用アプリ(iOS、Android) 対応 未対応 対応予定
いーリーダー タブレット用アプリ(iOS) 対応 対応 対応
EasyReader for iOS and Android スマートフォン、タブレット用アプリ(iOS、Android) 対応 対応 対応
Voice Dream Reader スマートフォン、タブレット用アプリ(iOS、Android) 対応 対応 対応
プレクストークPTR2 卓上型DAISY再生機器 対応 対応 未対応 販売終了
プレクストークPTR3 卓上型DAISY再生機器 対応 対応 対応 PTR2の後継機
プレクストークPTN2 卓上型DAISY再生機器 対応 対応 未対応 販売終了
プレクストークPTN3 卓上型DAISY再生機器 対応 対応 対応 PTN2の後継機
プレクストークポケットPTP1 携帯型DAISY再生機器 対応 対応 未対応
プレクストークリンクポケットPTP1/LINK 携帯型DAISY再生機器 対応 対応 未対応
ブレイズET 携帯型DAISY再生機器 対応 対応 対応 2018年3月発売予定
ブレイルセンスU2 点字携帯情報端末 対応 対応 不明 EPUB3かどうかは不明だが、対応ファイル形式にEPUBは有り
ブレイルセンスオンハンドU2ミニ 点字携帯情報端末 対応 対応 不明 EPUB3かどうかは不明だが、対応ファイル形式にEPUBは有り
ブレイルメモスマート(BMS)16 点字携帯情報端末 対応 対応 未対応
ブレイルメモスマート(BMS)40 点字携帯情報端末 対応 対応 未対応