カテゴリー: Web

スクリーンリーダーのテーブルまわりの対応状況を検証する（特に見出し関係）

kzakza

　表は、見出しと値を組み合わせることで、必要な情報だけを選択して取得することができるとても便利なフォーマットです。しかし、見出しと値を同時に参照できることで初めてその有用性を発揮します。視覚機能に問題のない方であれば、見出しと値セルを同時に見ることも可能ですが、視覚障害者等の音声ユーザーは、スクリーンリーダーでフォーカスがあったところの情報を順番に読み上げて取得するため、表を読み上げる場合、見出しから離れた箇所で例えば、値セル「300円」と読み上げられても、何が300円かわかりませんので、自分が求める情報を特定することができません。「アイスコーヒー 300円」のように、値セルにある「300円」という情報と関連する見出しの「アイスコーヒー」が同時に読み上げられる機能が利用できることが重要です。

　「table要素内の th 要素や scope 属性の有無によるスクリーンリーダーの読み上げの違い」（以下、「前エントリ」）というエントリを3月に書いたことがあり、テーブルの見出し読み上げについて、一度検証したことがありました。その際にheaders属性の検証をしていなかったことと、改めて検証してみると誤りもあったこと（すいません）、3月時点では対応していなかった（と思われた）PC-Talkerの見出し対応が確認されたことから、改めて確認しました（誤りがあったこと、また、すでに情報が古くなっていることから、このエントリを公開のタイミングで前エントリは非公開とました）。

　本エントリは、kzakzaが確認できる範囲でまとめた検証結果及び結論ですでの、誤りがある可能性があります。その点をご留意ください。

1. 検証対象

　今回検証対象とした環境は以下のとおりです。可能な限り最新のものを検証するようにしましたが、JAWSの検証環境については、最新のJAWS 2018より2つ前のバージョンで検証していますので、ご留意ください。

  1. PC-Talker 10 ver.1.25（体験版） + Internet Explore 11[Windows 10 ver.1803]（以下、表では「PT10 + IE11」）

  2. PC-Talker 10 ver.1.25（体験版） + NetReader 2 ver.2.31（体験版） [Windows 10 ver.1803]（以下、表では「PT10 + NR2」）

  3. NVDA 2018.2.1jp+ Firefox 62.0[OS: Windows 10 ver.1803]（以下、表では「NVDA + FF」）
  4. JAWS 日本語版 17.0.2729 + Internet Explore 11, Chrome ver.61.0.3163.100 [OS:Windows7]（以下、表では「JAWS17 + IE11, FF, Chrome」）
  5. ナレーター + Edge [Windows 10 ver.1803]（以下、表では「ナレーター + Edge」）
  6. VoiceOver（iOS版） +　Safari[OS:iOS 11.4.1]（以下、表では「VO (iOS) + Safari」）
  7. VoiceOver（Mac版） + Safari[OS: macOS High Sierra 10.13.6]（以下、表では「VO (Mac) + Safari」）

　なお、PC-Talker 10と同じ挙動すると思われたことから、前エントリで検証したPC-Talker7（Windows7版のPC-Talker7）の検証を省略しました(PC-Talker10ほどがりがりに検証してはいませんが、PC-Talker7も見出し読み上げに対応していることは一応は確認済み)。

2. 各環境のテーブルまわりの基本操作と機能

　備忘的に各種環境のテーブルまわりの機能と操作方法を以下の通りまとめました。

各環境のテーブルまわりの基本操作と機能
組み合わせ 概要
PT10 + IE11 Tキーでテーブル単位の移動が可能。セル間の移動は基本的に水平移動のみで、他環境で可能となっている垂直移動はできない。
PT10 + NR2
  • （PC-Talker10側の機能）Tキーでテーブル単位の移動が可能
  • （NetReader2側の機能）「テーブルモード」（table内に入って、Insertキーでモードのオン/オフ切り替え）というテーブルに特化したモードで次の①から③の操作が可能
    • ①矢印キーで横（行移動）だけではなく、縦（列移動）も可能になる
    • ②「移動先セルの読み上げ」をオンにすると（オン／オフ Ctrl+F9）、カーソルが移動したセルのth見出しを読み上げる
    • ③Shift+F9で、カレントなセルの値とともに、その行見出しと列見出し

    詳細はNetReader2のマニュアル参照。
NVDA + FF
  • Tキーでテーブル単位の移動が可能
  • Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。
  • 矢印キーのみで移動する（この場合は、水平移動しかできない）だけでも値セルのテキストだけではなく、見出しも読み上げてくれる。
JAWS17 + IE11, FF, Chrome
  • Tキーでテーブル単位の移動が可能
  • Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。
  • 詳細はTables with JAWS and MAGic参照。
ナレーター + Edge
  • Tキーでテーブル単位の移動が可能
  • Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。
  • 矢印キーのみで移動する（この場合は、水平移動しかできない）だけでも値セルのテキストだけではなく、見出しも読み上げてくれる。
  • 上の機能は「スキャンモード」で使用する必要がある（Edgeでは自動的にオン）。
  • その他、カレントセルの見出しを読み上げるコマンドがある。操作の詳細はマニュアル「第3章: スキャン モードを使う」を参照。
VO (iOS) + Safari
  • 初期設定でテーブルの見出しを読み上げる設定担っている（見出し読み上げのオン/オフは「設定」＞「一般」＞「アクセシビリティ」＞「VoicerOver」＞「詳細度」の「表の出力」で設定可能
  • ローターで「ひょう」を選択していると、上下スワイプでテーブル単位の移動が可能。
  • テーブル内の移動は左右スワイプによる水平移動のみであるが、ローターで「縦方向のナビゲーション」を選択するとテーブル内では、上下左右のスワイプでテーブル内のセルの上下左右移動が可能。
  • ローターで「ひょう」、「縦方向のナビゲーション」を選択可能にするためには「設定」の「VoicerOver」の中で設定する必要がある。
VO (Mac) + Safari
  • テーブルにフォーカスがあったタイミングで、Ctrl+Shift+Option＋下矢印キーを押すと、セル単位にフォーカスが当てられるようになり、VOキー（初期設定ではCapLockキー又はCtrl+option）＋矢印キーでセル間を水平移動/垂直移動できる。
  • 「システム環境設定」＞「アクセシビリティ」＞「VoiceOVer」 >「VoiceOverユーティリティ」　＞「詳細度」＞「通知」で「表の行を移動したときはヘッダを読み上げる」にチェックボックスをいれると、セル移動時に見出しを読み上げてくれる
  • 見出しを読み上げるには、VO-R（最初に行見出しを読み上げる。このボタン操作を繰り返すと、次は列見出しを読み上げる）
  • 列ヘッダを読み上げるには、VO-C（このコマンドを使用するためいは、事前に「VoiceOverユーティリティ」　＞「Web」＞「ナビゲーション」＞「Webの表ナビゲート時」で「中の項目をグループ化」にチェックを入れておく必要がある）

3. 先に検証結果をまとめておく

　本エントリでの検証は、 後述の4.個別検証結果に掲載したパターン1からパターン6の検証用のサンプルテーブルを1. 検証対象であげたそれぞれの環境で読み上げてみることで、確認しました。詳細は4. 個別検証結果のとおり、まとめていますが、これらの検証結果をうけてとりあえず先にまとめをしておきます。

各要素・属性の利用の要否について

caption要素
table要素の直後に配置したcaption要素のテキストにはテーブルにフォーカスがあったタイミングで一番最初にフォーカスが当たる。Tキーなどでテーブル単位で移動する場合もキャプションからどの表であるかがわかるので、キャプションがある表にはそのキャプションにcatpion要素を必ず用いるべき。
th 要素
いずれの環境でもth 要素による見出し指定は対応している。th要素のみで複雑な表の構成を解析して、期待通りの読み上げをしてくれる環境もあった。見出しがある表ではth要素は必ず用いるべき。
scope 属性
scope属性の対応の有無は環境によって分かれたが、scope属性で見出しのスコープを指定することで、対応する環境で期待どおりの読み上げが行われるメリットはあっても、対応しない環境で期待されない挙動を招くようなデメリットはないので、th要素とともにscope属性は指定しておくことが望ましい。
headers 属性
headers は現時点で完全に対応していると思われる環境はPC-Talker10 + NetReader2の環境のみであった。また、一部でもheaders属性に対応している場合、scope属性よりheaders属性が優先されることが確認できた。そのため、th要素とscope属性 のみであれば、期待通りの見出しを読み上げた表が、headers 属性で見出しを指定されることで、headers 属性への不完全な対応にもあいまって、逆にheaders 属性がなければ読まれる見出しがそれがあることで読まれなくなる事例もあった。現時点では、headers 属性を使用することは避けたほうがよいと思われる。

各環境における各要素、属性の対応状況

以下はそれぞれの環境における各要素、属性の対応をまとめた表です。

caption要素、th要素、scope属性、headers属性の対応
組み合わせ caption 要素 th 要素 scope 属性 headers 要素 備考
PT10 + IE11 対応 対応 対応 一部のみ対応 テーブル内のセル間を任意の箇所で上下に移動できないため、行見出しの読み上げは、行末・行頭での行が変わったタイミングで確認
PT10 + NR2 対応 対応 未対応 対応 テーブルモードで「移動先セルの読み上げ」をオンにしての検証
NVDA + FF 対応 対応 対応 一部対応 　
JAWS17 + IE11, FF, Chrome 対応 対応 対応 一部対応 　
ナレーター + Edge 対応 対応 未対応 一部対応 　
VO (iOS) + Safari 対応 対応 未対応 未対応 　
VO (Mac) + Safari 対応 対応 未対応 未対応 　

※headers 属性の「一部対応」の詳細は、パターン6（caption 要素あり/ th 要素あり / scope 属性あり/ 見出しが複数列・行 / 結合あり/ headers 要素あり） の検証結果を参照。
　

複雑な表への対応方法（値セルに対応する見出しの読み上げ）

　パターン４やパターン6のサンプルあるような見出しが複数行・列に渡ったり、結合される表への対応方法についても以下のとおりまとめました。

複雑な表への対応方法
環境 複数列・複数行で構成される見出し 結合された見出しセル 結合された値セルに対応する見出し
PT10 + IE11 th 要素で対応可 th 要素で対応可 th 要素で対応可
PT10 + NR2 headers 属性で対応可 th 要素で対応可 headers 属性で対応可
NVDA + FF th要素で対応可 th要素で対応可 対応方法なし
JAWS17 + IE11,Chrome scope属性で対応可 scope属性で対応可 IE11との組み合わせであれば、th要素のみで概ね対応化。
Chromeとの組み合わせでは対応方法なし。
ナレーター + Edge th 要素で対応可 th 要素で対応 th 要素で対応可
VO (iOS) + Safari 対応方法なし 対応方法なし 対応方法なし
VO (Mac) + Safari 対応方法なし 対応方法なし 対応方法なし

4. 個別検証結果

パターン1（caption 要素あり/th等すべてなし）

検証目的

検証目的: caption 要素の対応の確認及び th 要素等の見出し情報なしでの読み上げ状況
期待される挙動: 値セルテーブルにフォーカスがあったタイミングでcaption 要素のテキストにフォーカスがあたって読み上げる。

検証サンプル


<table>
<caption style="caption-side: bottom;">パターン1（caption 要素あり/ th 要素等すべてなし） </caption>
<thead>
<tr><td>列見出し1</td><td>列見出し2</td><td>列見出し3</td><td>列見出し4</td><td>列見出し5</td></tr>
</thead>
<tbody>
<tr><td>行見出し1</td><td>値1</td><td>値2</td><td>値3</td><td>値4</td></tr>
<tr><td>行見出し2</td><td>値5</td><td>値6</td><td>値7</td><td>値8</td></tr>
</tbody>
</table>
パターン1（caption 要素あり/ th 要素等すべてなし）
列見出し1 列見出し2 列見出し3 列見出し4 列見出し5
行見出し1 値1 値2 値3 値4
行見出し2 値5 値6 値7 値8

検証結果

検証結果-パターン1（caption 要素あり/ th 要素等すべてなし）
環境 検証結果
PT10 + IE11 ・Tキーでテーブルにフォーカスがあたったタイミングでcapiton要素にフォーカスがあたり、そのテキストを読み上げる
・値セルにフォーカスがあたっても見出しは読み上げない
NVDA + FF
JAWS17 + IE11,Chrome
ナレーター + Edge
PT10 + NR2 ・Tキーでテーブルにフォーカスがあたったタイミングでは、capiton要素のその先のテーブルの冒頭のセルにフォーカスが当たるため、capitioテキストは読み上げない（フォーカスを１つ前に戻せばcaption要素のフォーカスが当たる）
・値セルにフォーカスがあたっても見出しは読み上げない
VO (iOS) + Safari ・Tキーでテーブル全体又は矢印キーでフォーカスがテーブルの冒頭にあたったタイミングでcapiton要素のテキストを読み上げる。
・行移動（セルを横に移動）時に値セルにフォーカスが当たると列見出しを読み上げる。
・列移動（セルを縦に移動）時には行見出しは読み上げない。
VO (Mac) + Safari

パターン2（caption 要素あり/ th 要素あり/ scope 属性なし）

検証目的

検証目的: th 要素の対応及び対応状況の確認
期待される挙動: 値セルにフォーカスがあったタイミングで適切な th 要素の見出しを読み上げる。

検証サンプル


<table>
<caption style="caption-side: bottom;">パターン2（caption 要素あり/ th 要素あり/ scope 属性なし） </caption>ption>
<thead>
<tr><th>列見出し1</th><th>列見出し2</th><th>列見出し3</th><th>列見出し4</th><th>列見出し5</th></tr>
</thead>
<tbody>
<tr><th>行見出し1</th><td>値1</td><td>値2</td><td>値3</td><td>値4</td></tr>
<tr><th>行見出し2</th><td>値5</td><td>値6</td><td>値7</td><td>値8</td></tr>
<tr><th>行見出し3</th><td>値9</td><td>値12</td><td>値11</td><td>値12</td></tr>
</tbody>
</table>
パターン2（caption 要素あり/ th 要素あり/ scope 属性なし）
列見出し1 列見出し2 列見出し3 列見出し4 列見出し5
行見出し1 値1 値2 値3 値4
行見出し2 値5 値6 値7 値8
行見出し3 値9 値12 値11 値12

検証結果

検証結果-パターン2（caption 要素あり/ th 要素あり/ scope 属性なし）
環境 検証結果
PT10 + IE11 ・行移動（セル間を水平異動）の場合は移動した先のセルの列見出しを読み上げる
・別の行に移動した場合（行頭から前の行の行末に移動するなど）、移動先のセルの行見出しを読み上げる
PT10 + NR2 ・行移動（セル間を水平移動）の場合は移動した先のセルの列見出しを読み上げる
・列移動（セル間を垂直移動）の場合は、移動した先のセルの行見出しを読み上げる
NVDA + FF
JAWS17 + IE11,Chrome
ナレーター + Edge
VO (iOS) + Safari
VO (Mac) + Safari

パターン3（caption 要素あり/ th 要素あり / scope 属性あり）

検証目的

検証目的: scope属性の対応及び対応状況の確認。パターン2との挙動の違いの確認。
期待される挙動: 値セルにフォーカスがあったタイミングでscope属性で指定された見出しを読み上げる。scope属性で関連付けられていない値セルで当該見出しを読み上げない。

検証サンプル


<!-- 「列見出し1」を列見出しとしてscope属性"col"で指定-->
<table>
<caption style="caption-side: bottom;">パターン3-1＜scope属性で列見出し指定＞（caption 要素あり/ th 要素あり / scope 属性あり）</caption>
<tbody>
<tr><th scope="col">列見出し1</td><td>値1</td><td>値2</td><td>値3</td></tr>
<tr><td>値4</td><td>値5</td><td>値6</td><td>値7</td></tr>
<tr><td>値8</td><td>値9</td><td>値10</td><td>値11</td></tr>
</tbody>
</table>

<!-- 「行見出し1」を行見出しとしてscope属性"row"で指定-->
<table>
<caption style="caption-side: bottom;">パターン3-2 ＜scope属性で行見出し指定＞（caption 要素あり/ th 要素あり / scope 属性あり）</caption>
<tbody>
<tr><th scope="row">行見出し1</td><td>値1</td><td>値2</td><td>値3</td></tr>
<tr><td>値4</td><td>値5</td><td>値6</td><td>値7</td></tr>
<tr><td>値8</td><td>値9</td><td>値10</td><td>値11</td></tr>
</tbody>
</table>
パターン3-1＜scope属性で列見出し指定＞（caption 要素あり/ th 要素あり / scope 属性あり）
列見出し1 値1 値2 値3
値4 値5 値6 値7
値8 値9 値10 値11
パターン3-2 ＜scope属性で行見出し指定＞（caption 要素あり/ th 要素あり / scope 属性あり）
行見出し1 値1 値2 値3
値4 値5 値6 値7
値8 値9 値10 値11

検証結果

検証結果-パターン3（caption 要素あり/ th 要素なし / scope 属性あり）
環境 検証結果
PT10 + IE11 ・パターン3-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない（これは望まれる挙動）
・パターン3-2＜scope属性で行見出し指定＞の表では、別の行に移動した場合（行頭から前の行の行末に移動するなど）、移動先のセルの行見出しを読み上げる。列見出しとして「行見出し1」を読み上げない（これは望まれる挙動）
NVDA + FF ・パターン3-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない（これは望まれる挙動）
・パターン3-2＜scope属性で行見出し指定＞の表では、列移動（セル間を垂直移動）の場合は移動した先のセルの行見出しを読み上げる。列見出しとして「行見出し1」を読み上げない（これは望まれる挙動）
JAWS17 + IE11,Chrome
ナレーター + Edge ・パターン3-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない（これは望まれる挙動）
・パターン3-2＜scope属性で行見出し指定＞の表では、列移動（セル間を垂直移動）の場合は移動した先のセルの行見出しを読み上げない。列見出しとして「行見出し1」を読み上げる。（これは望まれない挙動）
PT10 + NR2 ・パターン3-1＜scope属性で列見出し指定＞、パターン3-2＜scope属性で行見出し指定＞ともにscope属性の列/行見出し指定が効いておらず、以下の挙動が確認できた
・パターン3-1では、行見出しとして読み上げられるべきところ（「値5」から「値1」の移動時など）で、「列見出し1」（scope=”col”）が読み上げられた（この場合、該当する列見出しがないため、「値1」のみが読み上げられるべき）
・パターン3-2では、列見出しが読み上げられるべきところ（「値5」から「値4」の移動時など）で、「行見出し1」（scope=”row”）が「値4」とともに読み上げられた（この場合、該当する列見出しがないため、「値4」のみが読み上げられるべき）
VO (iOS) + Safari
VO (Mac) + Safari

パターン4（caption 要素あり/ th 要素あり/ scope 属性なし/ 見出しが複数列・行 / 結合あり ）

検証目的

検証目的: 複数列・行の見出しの場合の th 要素の対応及び対応状況の確認（ th 要素のみで複数列・行の見出しを読み上げるか）。
期待される挙動: 値セルにフォーカスがあったタイミングで適切な複数の th 要素の見出しを全て読み上げる。

検証サンプル


<table>
<caption style="caption-side: bottom;">パターン4（caption 要素あり/ th 要素あり/ scope 属性なし/ 見出しが複数列・行 /  結合あり  ）</caption>
<thead>
<tr><th rowspan="2" colspan="2">列見出し1</th><th>列見出し2</th><th>列見出し3</th><th colspan="2">列見出し4</th></tr>
<tr><th>列見出し5</th><th>列見出し6</th><th>列見出し7</th><th>列見出し8</th></tr>
</thead>
<tbody>
<tr><th rowspan="2">行見出し1</th><th>行見出し4</th><td>値1</td><td>値2</td><td>値3</td><td>値4</td></tr>
<tr><th>行見出し5</th><td>値5</td><td colspan="2">値6</td><td rowspan="2">値7</td></tr>
<tr><th>行見出し2</th><th>行見出し6</th><td>値8</td><td>値9</td><td>値10</td></tr>
<tr><th>行見出し3</th><th>行見出し7</th><td>値11</td><td>値12</td><td>値13</td><td>値14</td></tr>
</tbody>
</table>
パターン4（caption 要素あり/ th 要素あり/ scope 属性なし/ 見出しが複数列・行 / 結合あり ）
列見出し1 列見出し2 列見出し3 列見出し4
列見出し5 列見出し6 列見出し7 列見出し8
行見出し1 行見出し4 値1 値2 値3 値4
行見出し5 値5 値6 値7
行見出し2 行見出し6 値8 値9 値10
行見出し3 行見出し7 値11 値12 値13 値14

検証結果

検証結果-パターン4（caption 要素あり/ th 要素あり/ scope 属性なし/ 見出しが複数列・行 / 結合あり ）
環境 検証結果
PT10 + IE11 ・行移動（セル間を水平移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・別の行に移動した場合（行頭から前の行の行末に移動するなど）、移動した先のセルに関連する複数の行見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合もその結合した値セルの全ての見出しを読み上げる（例:値6セルの列見出しであれば、「列見出し3、列見出し6、列見出し4、列見出し7」を「値6」とともに読み上げる。）
PT10 + NR2 ・行移動（セル間を水平移動）の場合、移動したセルの複数の列見出しのうち、もっとの内側の列見出しを読み上げる（例:「値1」から「値2」への移動の場合、「列見出し6」を「値2」とともに読み上げる（「列見出し3」は読み上げない）。見出しセルの結合有無による挙動の違いはみられない。
・列移動（セル間を垂直移動）の場合、移動したセルの複数の行見出しのうち、もっとの外側の行見出しを読み上げる（例:「値8」から「値11」への移動の場合、「列見出し3」を「値11」とともに読み上げる（「列見出し7」は読み上げない）。見出しセルの結合有無による挙動の違いはみられない。
・見出しが結合しても、関係する値セルではその結合見出しを読み上げる（列見出しについては、内側の見出ししか読まないという挙動により上のサンプルではそれが検証できないで、別にサンプルを作成して検証）
・値セルが結合している場合、関係する見出しは１つしか読み上げない（「例:値5」から「値6」への移動の場合、「列見出し７」しか読まない＜列見出し3、列見出し6、列見出し4も読まれるべき＞）・行移動（セル間を水平移動）の場合、移動したセルの複数の列見出しのうち、もっとの内側の列見出しを読み上げる（例:「値1」から「値2」への移動の場合、「列見出し6」を「値2」とともに読み上げる（「列見出し3」は読み上げない）。見出しセルの結合有無による挙動の違いはみられない。
・列移動（セル間を垂直移動）の場合、移動したセルの複数の行見出しのうち、もっとの外側の行見出しを読み上げる（例:「値8」から「値11」への移動の場合、「列見出し3」を「値11」とともに読み上げる（「列見出し7」は読み上げない）。見出しセルの結合有無による挙動の違いはみられない。
NVDA + FF ・値セルが結合している場合を除き、行移動（セル間を水平移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合を除き、列移動（セル間を垂直移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合、関係する見出しは１列分もしくは、一行分の見出ししか読み上げない（「例:値5」から「値6」への移動の場合、「列見出し6、列見出し３」しか読まない＜列見出し4と列見出し7も読まれるべき＞。「値4」から「値7」の場合、「行見出し5、行見出し１」しか読まない＜行見出し2、行見出し6も読まれるべき＞）
JAWS17 + IE11,Chrome ＜IE11＞
・値セルが結合している場合も含め、行移動（セル間を水平移動）の場合は移動した先の値セルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合も含め、列移動（セル間を垂直移動）の場合は移動した先の値セルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・複数の見出しセルが横に結合している場合、値セルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・複数の行見出しセルが縦に結合している場合、その結合見出しセルは1つのセルとみなされず、1つ目のセル以外は空白の見出しセルが存在している挙動で読み上げる

＜Chrome＞
・値セルが結合している場合を除き、行移動（セル間を水平移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合を除き、列移動（セル間を垂直移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合、関係する見出しは１列分もしくは、一行分の見出ししか読み上げない（「例:値5」から「値6」への移動の場合、「列見出し3、列見出し6」しか読まない＜列見出し4と列見出し7も読まれるべき＞。「値4」から「値7」の場合、「行見出し1、行見出し5」しか読まない＜行見出し2、行見出し6も読まれるべき＞）
ナレーター + Edge ・行移動（セル間を水平移動）の場合は移動した先のセルに関連する複数の列見出し（結合している見出し含む）全て読み上げる
・列移動（セル間を垂直移動）の場合は、移動した先のセルに関連する複数の行見出し（結合している見出し含む）全て読み上げる
・値セルが結合している場合もその結合した値セルの全ての見出しを読み上げる（例:値6セルの列見出しであれば、「列見出し3、列見出し6、列見出し4、列見出し7」を「値6」とともに読み上げる。）。
VO (iOS) + Safari ・行移動（セル間を水平移動） ・列移動（セル間を垂直移動）とにみ、移動したセルの複数の列見出しのうち、もっとの外側の見出しを読み上げる（列見出しなら列見出し2、列見出し3、列見出し4のみ、行見出しなら行見出し1、行見出し2、行見出し3しか読まない）。
VO (Mac) + Safari

パターン5（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 / 結合あり ）

検証目的

検証目的: 複数列・行の見出しの場合のscope属性の対応及び対応状況の確認。パターン4との挙動の違いの確認。
期待される挙動: 値セルにフォーカスがあったタイミングでscope属性で指定された適切な複数の th 要素の見出しを全て読み上げる。scope属性で関連付けられていない値セルで当該見出しを読み上げない。

検証サンプル


<!-- 「列見出し0」を列見出しとしてscope属性"col"で指定-->
<table>
<caption style="caption-side: bottom;">パターン5-1＜列見出し指定＞（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 /  結合あり  ）</caption>
<tbody>
<tr><th rowspan="3" colspan="3" scope="col">列見出し0</th><th rowspan="2" scope="row" >行見出し1</th><th scope="row" >行見出し2</th><td>値1</td><td>値２</td></tr>
<tr><th scope="row" >行見出し3</th><td>値3</td><td>値4</td></tr>
<tr><th scope="row" >行見出し4</th><th>行見出し5</th><td>値5</td><td>値6</td></tr>
<tr><th colspan="2" scope="col">列見出し1</th><th scope="col">列見出し2</th><td>値7</td><td>値8</td><td>値9</td><td>値10</td></tr>
<tr><th scope="col">列見出し3</th><th scope="col">列見出し4</th><th scope="col">列見出し5</th><td>値11</td><td>値12</td><td>値13</td><td>値14</td></tr>
<tr><td>値15</td><td>値16</td><td>値17</td><td>値18</td><td>値19</td><td>値20</td><td>値21</td></tr>
<tr><td>値21</td><td colspan="2">値22と値23の結合</td><td>値24</td><td>値25</td><td>値26</td><td>値27</td></tr>
</tbody>
</table>

<!-- 「行見出し0」を行見出しとしてscope属性"row"で指定-->
<table>
<caption style="caption-side: bottom;">パターン5-2＜行見出し指定＞（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 /  結合あり  ）</caption>
<tbody>
<tr><th rowspan="3" colspan="3" scope="row">行見出し0</th><th rowspan="2" scope="row" >行見出し1</th><th scope="row" >行見出し2</th><td>値1</th><td>値２</td></tr>
<tr><th scope="row" >行見出し3</th><td>値3</td><td rowspan="2">値4と値6の結合</td></tr>
<tr><th scope="row" >行見出し4</th><th>行見出し5</th><td>値5</td></tr>
<tr><th colspan="2" scope="col">列見出し1</th><th scope="col">列見出し2</th><td>値7</td><td>値8</td><td>値9</td><td>値10</td></tr>
<tr><th scope="col">列見出し3</th><th scope="col">列見出し4</th><th scope="col">列見出し5</th><td>値11</td><td>値12</td><td>値13</td><td>値14</td></tr>
<tr><td>値15</td><td>値16</td><td>値17</td><td>値18</td><td>値19</td><td>値20</td><td>値21</td></tr>
<tr><td>値21</td><td>値22</td><td>値23</td><td>値24</td><td>値25</td><td>値26</td><td>値27</td></tr>
</tbody>
</table>
パターン5-1＜列見出し指定＞（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 / 結合あり ）
列見出し0 行見出し1 行見出し2 値1 値２
行見出し3 値3 値4
行見出し4 行見出し5 値5 値6
列見出し1 列見出し2 値7 値8 値9 値10
列見出し3 列見出し4 列見出し5 値11 値12 値13 値14
値15 値16 値17 値18 値19 値20 値21
値21 値22と値23の結合 値24 値25 値26 値27
パターン5-2＜行見出し指定＞（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 / 結合あり ）
行見出し0 行見出し1 行見出し2 値1 値２
行見出し3 値3 値4と値6の結合
行見出し4 行見出し5 値5
列見出し1 列見出し2 値7 値8 値9 値10
列見出し3 列見出し4 列見出し5 値11 値12 値13 値14
値15 値16 値17 値18 値19 値20 値21
値21 値22 値23 値24 値25 値26 値27

検証結果

検証結果-パターン5（caption 要素あり/ th 要素あり(一部なし) / scope 属性あり/ 見出しが複数列・行 / 結合あり ）
環境 検証結果
PT10 + IE11 ・パターン5-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し（結合している見出し含む）全て読み上げる。行見出しとして「列見出し0」を読み上げない（これは望まれる挙動）。また、横に結合した値セルの複列行に渡る列見出しもすべて読み上げる（例:「値22と値23の結合」セルについては、「列見出し0」、「列見出し1」、「列見出し4」、「行見出し2」、「列見出し5」を読み上げる）
・パターン5-2＜scope属性で行見出し指定＞の表では、別の行に移動した場合（行頭から前の行の行末に移動するなど）、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し（結合している見出し含む）全て読み上げる。列見出しとして「行見出し0」を読み上げない（これは望まれる挙動）。また、縦に結合した値セルの複数行に渡る行見出しもすべて読み上げる（例:「値4と値6の結合」セルについては、「行見出し0」、「行見出し1」、「行見出し3」、「行見出し4」、「行見出し5」を読み上げる）
NVDA + FF ・パターン5-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し（結合している見出し含む）全て読み上げる。行見出しとして「列見出し0」を読み上げない（これは望まれる挙動）。ただし、値セルが横に結合している場合、１列分の列見出ししか読み上げない。
・パターン5-2＜scope属性で行見出し指定＞の表では、列移動（セル間を垂直移動）の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し（結合している見出し含む）全て読み上げる。列見出しとして「行見出し0」を読み上げない（これは望まれる挙動）。ただし、値セルが縦に結合している場合、１行分の行見出ししか読み上げない。
JAWS17 + IE11,Chrome ・パターン5-1＜scope属性で列見出し指定＞では、行移動（セル間を水平移動）の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し（結合している見出し含む）全て読み上げる。行見出しとして「列見出し0」を読み上げない（これは望まれる挙動）。ただし、値セルが横に結合している場合、１列分の列見出ししか読み上げない。
・パターン5-2＜scope属性で行見出し指定＞の表では、列移動（セル間を垂直移動）の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し（結合している見出し含む）全て読み上げる。列見出しとして「行見出し0」を読み上げない（これは望まれる挙動）。ただし、値セルが縦に結合している場合、１行分の行見出ししか読み上げない。
・値セルが横に結合している場合、関係する見出しは１列分の見出ししか読み上げない（「例:値5」から「値6」への移動の場合、「列見出し6、列見出し３」しか読まない＜列見出し4と列見出し7も読まれるべき＞）
・複数の見出しセルが縦に結合している場合でも、1つのセルとみなされず、1つ目のセル以外は空白の見出しセルが存在している挙動で読み上げる
PT10 + NR2 パターン3でこの環境では、scope属性の対応していないことが確認できたので、詳細な挙動の記述は省略するが、パターン5-1とパターン5-2で挙動に違いはなかった。
ナレーター + Edge
VO (iOS) + Safari
VO (Mac) + Safari

パターン6（caption 要素あり/ th 要素あり/ scope 属性なし/ 見出しが複数列・行 / 結合あり / headers 要素あり）

検証目的

検証目的: headers属性の対応及び対応状況の確認。特に値セルが結合した場合の状況確認。また、header属性に対応している場合において、headers属性による見出し指定とscope属性による見出し指定に違いがある場合の優先順位の確認
期待される挙動: 値セルにフォーカスがあったタイミングでheaders属性で指定したth 要素の見出しを読み上げる。headers属性で指定した見出しとscope属性で指定された見出しが異なる場合は、headers属性が優先される。

検証サンプル


<table>
<caption style="caption-side: bottom;">パターン6　（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 /  結合あり  / headers 要素あり）</caption>
<thead>
<tr><th rowspan="2" colspan="2" id="a1">列見出し1</th><th id="a2">列見出し2</th><th id="a3">列見出し3</th><th colspan="2" id="a4">列見出し4</th></tr>
<tr><th id="a5">列見出し5</th><th id="a6">列見出し6</th><th id="a7">列見出し7</th><th id="a8">列見出し8</th></tr>
</thead>
<tbody>
<tr><th rowspan="2" id="b1">行見出し1</th><th id="b4">行見出し4</th><td>値1</td><td>値2</td><td>値3</td><td headers="a2 a6 b2 b7">値4</td></tr>
<!--「値4」セルに「列見出し2」、「列見出し６」、「行見出し2」、「行見出し7」をこの順でheaders属性で関連付け（本当は「列見出し4」、「列見出し8」「行見出し1」「行見出し4」を関連付けべきであるが、あえて間違った見出しと関連付けて、挙動を確認）-->　
<tr><th id="b5">行見出し5</th><td>値5</td><td colspan="2" headers="b1 b5 a3 a6 a4 a7">値6</td><td rowspan="2" headers="a4 a8 b1 b5 b2 b6">値7</td></tr>
<!--「値6」セルに「列見出し3」、「列見出し6」、「列見出し4」、「列見出し7」、「行見出し1」、「行見出し5」をこの順でheaders属性で関連付け-->
<!--「値7」セルに「列見出し4」、「列見出し8」、「行見出し1」、「行見出し5」、「行見出し2」、「行見出し6」をこの順でheaders属性で関連付け-->
<tr><th id="b2">行見出し2</th><th id="b6">行見出し6</th><td>値8</td><td>値9</td><td header="b2 b6">値10</td></tr>
<!--「値10」セルに「行見出し2」、「行見出し6」をこの順でheaders属性で関連付け-->

<tr><th id="b3">行見出し3</th><th id="b7">行見出し7</th><td>値11</td><td>値12</td><td>値13</td><td>値14</td></tr>
</tbody>
</table>

　


パターン6　（caption 要素あり/ th 要素あり/ scope 属性あり/ 見出しが複数列・行 / 結合あり / headers 要素あり）
列見出し1 列見出し2 列見出し3 列見出し4
列見出し5 列見出し6 列見出し7 列見出し8
行見出し1 行見出し4 値1 値2 値3 値4
行見出し5 値5 値6 値7
行見出し2 行見出し6 値8 値9 値10
行見出し3 行見出し7 値11 値12 値13 値14

検証結果

検証結果パターン6　（caption 要素あり/ th 要素あり/ scope 属性なし / 見出しが複数列・行 / 結合あり / headers 要素あり）
環境 検証結果
PT10 + IE11 ・値セルと同じ行にない見出しを指定したものを含めて、headers属性で指定した行見出しを全て読み上げる
・値セルの結合によって関連する列見出しが２列に渡る場合を除き、値セルと同じ列にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる
・列見出しは２行に渡ると、内側の１行分の列見出ししか読み上げなくなる。（「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。「値5」から「値6」への移動の場合、「列見出し6、列見出し7」とともに「値6」を読み上げる（headers属性で指定した「列見出し3」、「列見出し4」は読み上げなし）
ナレーター + Edge
PT10 + NR2 ・値セルと同列・同行にない見出しを指定したものを含めて、かつ値セルと関連する見出しが複数列・複数行の場合を含めてheaders属性で指定した見出しを全て読み上げる
NVDA + FF ・値セルと同列・同行にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる
・ただし、見出しは複数行・列に渡ると、「行見出し1」との組み合わせを除き、内側の１行分又は１列分の見出ししか読み上げなくなる（例:「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。「値5」から「値6」への移動の場合、「列見出し6、列見出し7」とともに「値6」を読み上げる（headers属性で指定したに「列見出し3」、「列見出し4」は読み上げなし）
JAWS17 + IE11,Chrome ・値セルと同じ行にない見出しを指定したものを含めて、headers属性で指定した行見出しを全て読み上げる
・値セルの横の結合によって関連する列見出しが２列に渡る場合、headers属性で指定した見出しを全て読み上げる
・値セルの縦の結合によって関連する行見出しが２行に渡る場合もheaders属性で指定した見出しでも一部読み上げないものがある（1つ目のセル以外は空白の見出しセルが存在している挙動によるものと思われる）
・見出しセルが横に結合している場合も問題なくすべて読み上げる
・見出しセルが縦に結合している場合は一部読み上げないものがある（1つ目のセル以外は空白の見出しセルが存在している挙動によるものと思われる）
VO (iOS) + Safari ・パターン4と挙動は同じ。header属性の有無による挙動の違いは確認できなかった
VO (Mac) + Safari

W3C Publishing Working Groupで軽量SMIL（次世代SMIL?）について議論始まる

kzakza

　W3CのPublishing Working Group の2017年9月18日の電話会議で、SMIL lite（軽量のSMIL）が（おそらく）始めて議論されています。先のエントリで紹介したWeb Pulications
での利用が想定されています。Web Pulications はEPUBと統合されて、EPUB4的な立ち位置になる可能性も示唆されているので、次世代SMILといえる立ち位置になりうるのかもしれません。まだ、議論は始まったばかりのようで、どこに向かうのかはわかりませんが。

　要件リストは、Essential Requirements（不可欠な要件）とAdvanced Requirements（高度な要件）にわけて整理されています。Essential Requirements はざっと見た感じ、現行のEPUB3ですでに実現できていることが並んでいるようですが、Advanced Requirements では、現行のEPUBでは実現できていない手話動画とテキストの同期も想定した動画のサポートや、音声解説を付けた動画のサポートが挙げられています。

　議事録を読むと、SMIL lite は XMLではなく、JSON で行く可能性が今のところ高そうですね。　

　なお、SMIL (Synchronized Multimedia Integration Language) は、DAISY や EPUB 3 では、テキストと音声の同期あるいは音声（録音音声またはTTSによる読み上げ）の再生の制御のために使用されています。現行の EPUB 3 におけるSMILのサポートは音声に限定されていますが、聴覚障害者のために手話動画とテキストを同期させたEPUBを作るため、動画のサポートが EPUB 3 仕様策定の段階から要望としてあがっていたようです。そういう経緯があったためか、EPUB Media Overlays 3.０の仕様では、動画をサポートしないことがわざわざ言及されています（最新の EPUB 3.1 でも同じです）。今回の SMIL lite の議論もこの経緯を受けてということだと思われます。

Although future versions of this specification might incorporate support for video media (e.g., synchronized text/sign-language books), this version supports only synchronizing audio media with the EPUB Content Document.

　

　最後に議事録からSMIL lite に関係するところを転載します（ここでも河村宏さんの名前が…）。

1. Requirement for SMIL Lite

Garth Conboy: “SMIL lite” == “grin”

Tzviya Siegman: https://github.com/w3c/publ-wg/wiki/Requirements-and-design-options-for-synchronized-multimedia
Marisa DeMeglio: link in GotoChat
… we’ve been looking at design reqs for syncronized multimedia

Rachel Comerford: https://github.com/w3c/publ-wg/wiki/Requirements-and-design-options-for-synchronized-multimedia

Marisa DeMeglio: allowing talking books to talk

Tzviya Siegman: can you give a quick overview?

Marisa DeMeglio: EPUB3 didn’t have a lot of problems with media overlays
… we can look at something lighter than SMIL
… we used a slim subset in EPUB3
… but SMIL adoption in the world at large hasn’t been huge
… so we can look at other formats
… we do need to link chunks of text with chunks of audio
… you still need structural semantics for navigation etc
… making video + text transcripts more accessible is a requirement
… and there are some things not included in media overlays
… I’ve been emailing with dweck
… like having multiple granularities of navigation–from para by para to word by word
… text + sign language
… video + descriptive audio
… all those are not covered by media overlays
… our next step is deciding what format to do

Garth Conboy: That multi-resolution MO approach was discussed some years ago, and I think prototyped in Readium, I think. It’s a cool idea.

Marisa DeMeglio: first question is about formats–XML or not XML

Dave Cramer: what’s the status of audio sync on the web at large?

Marisa DeMeglio: I don’t know of anything

Ivan Herman: I don’t know much more
… I love your understatement… SMIL adoption is terrible
… we will have to define a SMIL-lite which has any hope for implementation

Bill Kasdorf: is there an active SMIL WG?

Ivan Herman: we will also have to ensure there will be several implementations on top of browsers

Laurent Le Meur: I agree with Ivan when he says we’ll have to create polyfills
… if this is the case, if JS is the language that will use SMIL, then XML is not the best structure for that
… JSON has the lead, a structure JS loves
… SMIL is so complex, there are too many features
… we can track as JSON structure

Garth Conboy: Marisa is also correct, when saying MO/SMIL(lite) adoption in EPUB Reading Systems is pretty good.

Laurent Le Meur: as for the requirements, we should make sure the structure we define doesn’t prevent us from adding advanced features later

Ric Wright: one other area is where there is a SMIL implemenation is for animation of SVG
… this has been implemented by browsers

Avneesh Singh: the main objective of this work was lack of support of SMIL on the web
… and then additional things came up
… that were not covered in EPUB3 MO
… media fragments is the one thing in the web which is used
… if we can find out groups in web who are trying to solve similar problems
… we can try to do it together

Charles LaPierre: ETS and Mark Hakkinen has done lots of work with SMIL
… they might have some insight
… they use this for assessments

Tzviya Siegman: the larger group should comment about requirements
… this is not part of our charter… so what should we do with these requirements? What are next steps?

Ivan Herman: as usual, this was the topic I wanted to put on the queue
… that’s an admin problem
… this whole issue of SMIL lite is not in our charter, but is a necessary thing
… this would be rec-track work
… the traditional way to do something like this would be to form a separate CG
… that would look at an initial spec plus one or two polyfills, showing it is possible
… once the CG says we have this, it solves these requirements, it’s polyfilled, it has users
… the most obvious way would be to then form a new WG

Garth Conboy: From charter: “This specification should generally be a functional superset of EPUB 3.1. Functional round-tripping to/from EPUB 3.1 considered highly desirable.” So, would could argue it’s kinda in our charter, as it’s in EPUB 3.1.

Ivan Herman: I still believe something like SMIL is still necessary for the web, and not only for WP
… even if WP is driving this here
… the web in general would benefit
… we then could get experts from other places for a CG
… I have some colleagues in Amsterdam who worked on original SMIL
… some of them are still around; I can approach them
… but a WG would be too much for them

Tzviya Siegman: the next steps are to clean up requirements and share them
… we should pass this on to APA, and share with Janina

Ivan Herman: there are some other media-related groups, like a video group
… they might have feedback
… and outside w3c there are other groups

Marisa DeMeglio: to comment on SMIL
… DAISY was in smil WG
… we used SMIL more than anyone else, but used less of it
… our use case was really different from everyone else’s
… they used it for short presos, annotations, etc.
… we used for entire books
… I’m not sure that reawakening the SMIL group would be good
… we might look elsewhere for overlap

Ivan Herman: it’s going to be very light, very concentrated

Tzviya Siegman: it might come down to how you position it
… I can help with that

Avneesh Singh: that’s a valid point from marisa_demeglio
… we need more strength to make it an implementable standard
… we need to strike a balance for something useful for our requirements as well as for others
… that IPTV was looking for something like SMIL
… Hiroshi can be a liason
… and Mark H can also help

Tzviya Siegman: we have people volunteering to be liasons
… joanie might know who to talk about at the browsers

Avneesh Singh: I will contact Mark Hakkinen and Hiroshi Kawamura

Bill Kasdorf: I was going to ask Marisa if there is a link she can share that documents the subset of SMIL that is actually used by DAISY

Marisa DeMeglio: bill_kasdorf: http://www.idpf.org/epub/31/spec/epub-mediaoverlays.html#sec-overlays-def

Bill Kasdorf: marisa: thanks, I didn’t realize that the MO spec in EPUB 3.1 was the subset you were talking about. That’s great to know because that is what folks are actually using in the publishing world.