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

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

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

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

目次

  1. 検証対象
  2. 各環境のテーブルまわりの基本操作と機能
  3. 先に検証結果をまとめておく
  4. 個別検証結果

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キーなどでテーブル単位で移動する場合もキャプションからどの表であるかがわかるので、caption要素を入れて損はない。catpion要素があることが望ましい。
th 要素
いずれの環境でもth 要素による見出し指定は対応している。th要素のみで複雑な表の構成を解析して、期待通りの読み上げをしてくれる環境もあった。見出しがある表ではth要素は必ず用いるべき。
scope 属性
scope属性の対応の有無は環境によって分かれたが、scope属性で見出しのスコープを指定することで、対応する環境で期待どおりの読み上げが行われるメリットはあっても、対応しない環境で期待されない挙動を招くようなデメリットはないので、th要素とともにscope属性は指定しておくことが望ましい。
headers 属性
headers は現時点で完全に対応していると思われる環境はPC-Talker10 + NetReader2の環境のみであった。また、一部でもheaders属性に対応している場合、scope属性よりheaders属性が優先されることが確認できた。そのため、th要素とscope属性 のみであれば、期待通りの見出しを読み上げた表が、headers 属性で見出しを指定されることで、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 要素あり) の検証結果を参照。
 

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

 パターン4パターン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テキストは読み上げない(フォーカスを1つ前に戻せば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」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。
・見出しが結合しても、関係する値セルではその結合見出しを読み上げる(列見出しについては、内側の見出ししか読まないという挙動により上のサンプルではそれが検証できないで、別にサンプルを作成して検証)
・値セルが結合している場合、関係する見出しは1つしか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し7」しか読まない<列見出し3、列見出し6、列見出し4も読まれるべき>)・行移動(セル間を水平移動)の場合、移動したセルの複数の列見出しのうち、もっとの内側の列見出しを読み上げる(例:「値1」から「値2」への移動の場合、「列見出し6」を「値2」とともに読み上げる(「列見出し3」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。
・列移動(セル間を垂直移動)の場合、移動したセルの複数の行見出しのうち、もっとの外側の行見出しを読み上げる(例:「値8」から「値11」への移動の場合、「列見出し3」を「値11」とともに読み上げる(「列見出し7」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。
NVDA + FF ・値セルが結合している場合を除き、行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・値セルが結合している場合を除き、列移動(セル間を垂直移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・値セルが結合している場合、関係する見出しは1列分もしくは、一行分の見出ししか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し6、列見出し3」しか読まない<列見出し4と列見出し7も読まれるべき>。「値4」から「値7」の場合、「行見出し5、行見出し1」しか読まない<行見出し2、行見出し6も読まれるべき>)
JAWS17 + IE11,Chrome <IE11>
・値セルが結合している場合も含め、行移動(セル間を水平移動)の場合は移動した先の値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・値セルが結合している場合も含め、列移動(セル間を垂直移動)の場合は移動した先の値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・複数の見出しセルが横に結合している場合、値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・複数の行見出しセルが縦に結合している場合、その結合見出しセルは1つのセルとみなされず、1つ目のセル以外は空白の見出しセルが存在している挙動で読み上げる

<Chrome>
・値セルが結合している場合を除き、行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・値セルが結合している場合を除き、列移動(セル間を垂直移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる
・値セルが結合している場合、関係する見出しは1列分もしくは、一行分の見出ししか読み上げない(「例:値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>値2</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>値2</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 値2
行見出し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 値2
行見出し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」を読み上げない(これは望まれる挙動)。ただし、値セルが横に結合している場合、1列分の列見出ししか読み上げない。
・パターン5-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し(結合している見出し含む)全て読み上げる。列見出しとして「行見出し0」を読み上げない(これは望まれる挙動)。ただし、値セルが縦に結合している場合、1行分の行見出ししか読み上げない。
JAWS17 + IE11,Chrome ・パターン5-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し(結合している見出し含む)全て読み上げる。行見出しとして「列見出し0」を読み上げない(これは望まれる挙動)。ただし、値セルが横に結合している場合、1列分の列見出ししか読み上げない。
・パターン5-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し(結合している見出し含む)全て読み上げる。列見出しとして「行見出し0」を読み上げない(これは望まれる挙動)。ただし、値セルが縦に結合している場合、1行分の行見出ししか読み上げない。
・値セルが横に結合している場合、関係する見出しは1列分の見出ししか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し6、列見出し3」しか読まない<列見出し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」、「列見出し6」、「行見出し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 headers="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属性で指定した行見出しを全て読み上げる
・値セルの結合によって関連する列見出しが2列に渡る場合を除き、値セルと同じ列にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる
・列見出しは2行に渡ると、内側の1行分の列見出ししか読み上げなくなる。(「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。「値5」から「値6」への移動の場合、「列見出し6、列見出し7」とともに「値6」を読み上げる(headers属性で指定した「列見出し3」、「列見出し4」は読み上げなし)
ナレーター + Edge
PT10 + NR2 ・値セルと同列・同行にない見出しを指定したものを含めて、かつ値セルと関連する見出しが複数列・複数行の場合を含めてheaders属性で指定した見出しを全て読み上げる
NVDA + FF ・値セルと同列・同行にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる
・ただし、見出しは複数行・列に渡ると、「行見出し1」との組み合わせを除き、内側の1行分又は1列分の見出ししか読み上げなくなる事象が生じるケースがある(例:「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。「値5」から「値6」への移動の場合、「列見出し6、列見出し7」とともに「値6」を読み上げる(headers属性で指定したに「列見出し3」、「列見出し4」は読み上げなし)
JAWS17 + IE11,Chrome ・値セルと同じ行にない見出しを指定したものを含めて、headers属性で指定した行見出しを全て読み上げる
・値セルの横の結合によって関連する列見出しが2列に渡る場合、headers属性で指定した見出しを全て読み上げる
・値セルの縦の結合によって関連する行見出しが2行に渡る場合もheaders属性で指定した見出しでも一部読み上げないものがある(1つ目のセル以外は空白の見出しセルが存在している挙動によるものと思われる)
・見出しセルが横に結合している場合も問題なくすべて読み上げる
・見出しセルが縦に結合している場合は一部読み上げないものがある(1つ目のセル以外は空白の見出しセルが存在している挙動によるものと思われる)
VO (iOS) + Safari ・パターン4と挙動は同じ。header属性の有無による挙動の違いは確認できなかった
VO (Mac) + Safari

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください