カテゴリー: 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.

HTML5 Conference の個人的なふりかえり #html5j

kzakza

　先のエントリで書いたようにHTML5 Conferenceに参加してきました。

　HTML5 Conferenceは最初？の2012年のときから、すごい盛り上がりで「僕も混ぜてよ」という気持ちを持ちつつも、なかなか参加するに至らず（東京遠い）、今回が初参加でした。 Vivliostyleの村上真雄さんよりお声かけいただいて、html5j 電子出版部セッションのパネリストの1人として登壇する機会もいただいたので、一参加者として参加するだけではなく、スピーカーとして参加するという貴重な経験をさせていただきました。
hmtl5カンファレンスのスピーカー用の名札の写真
　今年のこのカンファレンス、セッションプログラムが公開される前に参加申込み者が定員の1600人を超えてしまうという勢いで、日本のIT系のイベントでは最も勢いがあるかもしれない。
　
　当日は朝早く京都を出て、11時すぎに会場となる東京電機大学のある最寄り駅の北千住着。カンファレンスのスピーカーには、お弁当がでることは聞いていたけど、その時点で猛烈にお腹がすいていたので、駅近くで海鮮丼を食べて会場入りした（なお、その後、会場で出たお弁当はお弁当でおいしくいただきました）。登壇して、気になるセッションを聞いて17時に会場を出て、そのまま京都に戻るという感じだった。京都駅に20時着。新幹線は待ち時間がほぼないので、京都につくのは意外と早い。

「Webフォント最新事情2017～導入事例も一挙紹介～」セッション

http://events.html5j.org/conference/2017/9/session/#e1
　関口 浩之さんによるウェブフォントのセッション。関口さん劇場。到着時間の関係もあって、このセッションは途中から参加だったので、最初の「FONTPLUS」とは何かという説明を聞き逃してしまった。そのため、流れが最初はつかめずにいたのだけど、それを差し置いても、関口さんの話は具体的で面白く、フォントがどう使われているという話や、フォントをどう表示させたいかという話は、フォントを普段はあまり意識したことがなかったので（エッ）、結構目から鱗だった（フォントの間の空白を調整して全体を美しく見せたいというニーズがあることからして、始めて知った。自分が○○ときに○○しても垢抜けないのはその差かー。みたいな）。

Webと出版が融合する新しい標準 Web Publications〈ウェブ出版物〉ができることで、Webと本の未来はどうなる？

http://events.html5j.org/conference/2017/9/session/#e2
　
このセッションはパネリストとして登壇。
　Vivliostyleの村上真雄さんによる10分のWeb Publicationsの概要説明があり（スライドは以下）、

イーストの下川和男さんによる5分のどのAdvanced Publishing Labの活動紹介があり（スライドは以下）、

　残り25分ほどがパネルディスカッションとなった。Web Pulicationsで話せるテーマがかなり広範であること、時間が短かったこと、パネリストの背景や関心も様々なので、議論が集約しきれなかったところが正直あったと思うけど、後で記録を読み返すと、ここを時間かけて膨らませればよかったんじゃないかという箇所が結構あったので、Web Pulicationsに関する論点は提示できていたのではないかとも思う。
　今にして思えば、パネリストのあの人数にあの時間なら、机を置かず、パネリストが全員立って、マイク持ちながら、村上さんのスライドにツッコミいれなが、立ち話しているかのように話をしたほうが盛り上がったかもしれない。
　私について言えば、パネルディスカッションというスタイルで、いきなり話を振られての適切なコメントを短く言うということが難しくて、ほとんど適切なコメントを言えていなかったような気がする。自分のペースで話せるスライドを使った発表でも、正直あまり得意ではないという自覚はあるけど、パネルディスカッションはそれとは全く別の難しさがあるなぁと感じた。Web Pulicationsについては、事前にいろいろとドキュメントを読んで考えをでまとめておいたのですよ。いいたかったことはここのどこかには書いてあるはずなんだけど・・・・。

　私は、図書館の立場、というよりも、アクセシビリティに関わる業務をしているという立場で、意見を期待されたのだと理解していたけど、Web Publicationsについて事前にいろいろとドキュメントを読み進めていくうちに、（無論アクセシビリティはもちろん無関係ではないけど）「ああぁ、これはいろいろな大前提となるコンテンツの器の話だ」と感じるようになっていたので、どういうスタンスでどのような発言をするべきかというのは、登壇しても迷っていた（それなりに学識のある方が発言されるならともかく、僕が器について発言してもあまり説得力ないぞ的な）。
　とはいえ、後で記録を確認すると、「コンテンツは器のUIが規定する」という考えを軸に、私は発言をしていたようだけど、上で述べたパネリストとして適切な発言をするということの難しさもあって、出だしの「コンテンツは器のUIが規定する」のところがそもそもうまく伝えられなかったかもしれず、全体的に何を言っているんだ感があったかもしれない。
　セッションでの僕の発言は、（だいぶ）補足し、誤解を招きそうなところを整理（削除）すると以下のようになる。

  • コンテンツは器のUIがその性格を規定する。紙の書籍についても、目次やページ、そして、紙の複数の固まりという物理的なあり方というか、触った時のページの厚みであと何ページ残っているか直感的にわかるUIに規定されている。Webについても、ブラウザやナビゲーションとしての検索エンジンなどに規定されている。電子書籍も本当はそのはずで独自の性格を持っているはず。
  • しかし、EPUBは現在は、紙と同時で出るものが多いので、紙のコンテンツに規定されてしまっており、本来の電子書籍という器本来のあり方がまだ発揮できていない。Web出版物は、たぶんEPUBのように紙版と同時に出る事例が多くないと思うので、紙版のあり方に規定されるようなことがないのではないか。今後どのようなコンテンツが出てくるか楽しみにしている。
  • Web側からすると、Web Pulicationの登場により、これまでのWebでは出来なかった表現ができるようになる。長いコンテンツがより読みやすくなる。EPUB側からすると、従来のEPUBよりWebのように簡単に作れるたり、公開できるようになる。
  • 現在は、WebとEPUBの間に大きな隙間が空いている状態だと思うが、Web出版物の登場で、みんながおもしろがって、その間を埋めてくれると良いと思っている。
  • 電子出版では、アマゾンなどのプラットフォームが公開、コンテンツへのリーチ、課金、DRMなど全てをそれぞれで囲い込む状況となっている。Webでは、このようではなく、公開、コンテンツへのリーチや課金などが水平分業型になっていると思うが、よりWeb寄りのWeb出版物もそうなっていくと思う。EPUBのそばにそういうコンテンツ群が登場することで、電子出版のビジネスモデルも変わっていけば面白い。
  • 出版物というと、出版社が出すコンテンツが想起されやすいが、実は官公庁のような公的機関や大学、個人が無償で公開しているようなものも大量にある。
    こういった無償で出しているコンテンツは、DRMフリーのものが多いので、適当な器があれば柔軟に移行できるのではないのか。これまではWeb出版物という器がなかったからだせなかったコンテンツがこういうところから出しやすくなるのではないか。

　パネルディスカッションで言えなかったことを補足しようとするときりがないけど、少しだけ追記すると、コンテンツを規定する器のUIには以下で触れるようなコンテンツと目の距離やコンテンツが読む｛見る｝ものに強いる姿勢も含まれると考えている。Webのように縦置き画面で少し離れたところからでも読みやすい文章と、本のように横に倒して30cmほどコンテンツから離れた状態で読みやすい文章は異なるはずなので、それで文体や作法もかわるはず。ケータイ小説も、今でいうガラケーの小さな画面で読むことを前提に書かれ、また、書く側もほとんど携帯で書いているので、紙で印刷された状態で読んでもそのおもしろさは伝わらない気がする（読んだことはないけど）。

　
　EPUB3の仕様が2011年に固まった当時、「この仕様の利用が順調に伸びるとしても、当面は紙版の書籍と同じものが刊行されるのだろう、しかし、いずれは、EPUB版オリジナルのコンテンツが増えてくるに違いない、そうなったときこそ、電子書籍の本来のUIやコンテンツのあり方が発揮されるだ！」とちょっと青臭く考えていた。2017年になってそれがEPUBではなく、Web Publicationsという形で出てくるのかーという感慨が個人的にある。2011年から2013年に電子書籍の登場で読書はこう変わるという議論がいろいろとされていたと記憶しているけど、Web Pulicationsにあてはあるものも多いかもしれない。

ECMAScript and Babel’s role

http://events.html5j.org/conference/2017/9/session/#a3
　ECMAScriptについては、標準化されたJavaScriptである、ということ以上のことは本当に何も知らずに参加したのだけど、さすがにそれだけの理解では、話について行くのは厳しかった（以上・・・・・・汗）。

多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より

http://events.html5j.org/conference/2017/9/session/#d4
　11月発売予定の書籍『インクルーシブHTML+CSS & JavaScript』をベースに訳者である太田良典さんと伊原力也さんによる実装例の紹介。
スライドは以下。


　まず、太田良典さんと伊原力也さんがスライドめくりながら対話形式で話を進行していくというのが面白かった。お二人の話力もあると思うけど、対話形式のほうが一人が一方的に話すよりも、一般的にはテンポもよくて、わかりやすいのではないか。
　内容について。アクセシビリティ系の本や記事は、こうやるとアクセシブルでないからちゃっちゃだめと否定的なことが書いてあることが多いが、この本は、HTMLとJS、cssでこう実装するとアクセシブルという実装例を示しているそうで、「すいませんすいません」と思いながら話を伺っていた。原著者がHeydon Pickering氏ということで、同氏が意識しているスクリーンリーダーはJAWSかNVDAなのかな、日本の視覚障害者が多くしているスクリーンリーダーPC-Talkerだとどうなのかな、日本の視覚障害者によく利用されている音声ブラウザNetReader（ICTスキルが高い特に全盲の視覚障害者ほど使用しているという印象）で対応できるだろうかというところを気にしながら。例えば、ここで紹介されていたaria-live属性のようにたぶんPC-Talkerではまだ対応していない実装例もあるのだけど、しかし、どこまで特定のソフトにあわせる必要があるのか、悩ましい。とか、とはいえ、視覚障害者の間でPC-Talkerのシェアが圧倒的なので悩ましい。とか、いろいろとぐるぐるとぐるぐると。
ちなみにセッション中にこの本をアマゾンで予約した。

ウェブのための次世代決済法

http://events.html5j.org/conference/2017/9/session/#b5
GoogleのえーじさんによるWebPaymentsの話。Webpaymentsについては、このブログでも以下のエントリなどでよく分からないまま書いたこともあり（今、読み返すとたぶん間違ってるところある）、関心は持っていたけど、その後全然動向を追っていなかったので、その後どうなったのかという関心を持って参加した。
Webでの課金の仕様を検討するW3CのWeb Payments Community Group
　
　上のブログで書いた当時、肝心の課金部分をどのようにW3C標準にするか、いまいち想像ができなかったけど、なるほどこのように標準化するのか、頭いい人が考えることが違うと若干あほっぽいけど、素朴にそんなことを思っていたり、 仕様が固まるどころか、思っていた以上に一部とはいえ、実装がかなり進んでいたことに驚いた（仕様の数が多いことも）。
スライドは以下。