カテゴリー: ウェブアクセシビリティ

tableにoverflowプロパティ使いたさでtableに display:blockしてはいけない

kzakza

　タイトルが全てですが、RWD対応でtable要素にoverflowプロパティ使いたさで table要素に直接display:blockをしてしまうこと、結構されがち（な気がします）。これをしてしまうと、スクリーンリーダーがtable要素をテーブルを認識できないというアクセシビリティ上の問題が発生します。
　ブラウザが支援技術にテーブルとしてアクセシビリティオブジェクトを渡さないことが原因で、詳しくは以下の @kazuhito さんとみるくさんのブログに詳しいです。

例えば、スクリーンリーダーには、表に特化した機能を備えていますが、display:blockされることで利用できなくなる可能性が高いです。
overflowプロパティはサイズの確定されたブロック要素に効くようです。display:blockを使用せずにtableにoverflowプロパティ使う場合は

  1. table要素にきっちり高さと幅を指定する(tableもブロック要素なのでこれで効くみたい。なお、サイズ指定はmax-widthなどでは不可らしい)
  2. table要素の上にdiv要素などの別のブロック要素でラップしてそのdiv要素などにoverflowプロパティを指定する(div要素は幅は横にめい一杯などサイズを指定しなくてもサイズをデフォルトで備えている、のか？)
  3. （2018/12/30　@mondo_ さんのツィートを受けての追記）table要素にtableの属性値をrole属性を追加する（Chromeはそれでdisplay:blockなtableでもテーブルとしてアクセシビリティオブジェクトを生成するようです）。 　　

のいずれかでしょうか。サイズを固定する1はRWD対応の中ではなかなかしんどいので、現実的には2なのでしょうか。3も選択肢になりますが、role属性に対応していないUAも視覚障害者の利用する環境にはあるようですので、そのUAの対応次第かなと。
　なお、いわゆる「レスポンシブテーブル」というものも、少なくとも現時点では、tableにdisplay:blockにする必要があるようですので、同じ理由でアクセシビリティ的にはやらない方がよいようです。モバイル端末などの小さいスペースの画面では、「レスポンシブテーブル」は、わかりやすい表のUIの１つであるような気がしますので、それが利用できないのは、惜しいですね。

第3回 京都でウェブアクセシビリティたいらげ会 参加記録 #a11y_tairage

kzakza

　10月12日 (金) に時代工房さんで行われた第3回 京都でウェブアクセシビリティたいらげ会 – connpassに参加してきました。たいらげ会は、今回が初参加。5月のアクセシビリティの祭典 2018への参加に引き続き、ウェブアクセシビリティ関係のイベントには今年２回目。

アクセシビリティの祭典 2018 個人的なふりかえり


　alt で悩んでいたところに、alt がテーマで@mondo_ さんがしゃべる、alt 、alt、altと、繰り返し口に出しても怪訝な顔をされそうにない勉強会が京都にある、ということで、家内調整を丁寧に行った（？）上で参加してきました。
　ところで、余談ながら、図書館関係のイベントに参加するノリで、時代工房に到着して早々に関係者や参加者に「○○図書館の○○です」と業務な感じで所属機関込みで自己紹介してしまって、気分的にやらかした感があり、冒頭若干気落ちしながら、最初のもんどさんの話を伺っていたりとかもしていた。（「そうだよー、図書館関係のイベントではないのだから、ハンドルネームか、名前だけ名乗ればよかったー」とかもんもんと）。
　今回は、もんど（@mondo_） さんがalt（代替テキスト）で、時代工房の柴田（ @sbtnbfm ） さんがよいリンクの話で、お二人ともそれぞれスライドはすでに公開されているので、話の内容の詳細はそれを。


　柴田さんが使用されているツールは、HTML Slidyなのかな。そのままHTMLを公開すればスクリーンリーダーユーザーが使いやすいものを公開できるし、かっこよい。自分も使ってみたくある。
　もんどさんと、柴田さんのお話は、尾内でべ（ @onouchidebe ）さんが図で一枚にまとめてくださっています。要所要所に絵心が光る。そんな心を持ち合わせていない私にとって嫉妬しかない（絶賛している）。


　ということで、以下は感想を。
　
　もんどさんのalt のお話について。
　プリントディスアビリティのある方のためにEPUB形式でテキストデータを作ることについて考えているところで、特にその中でEPUBに含まれる画像の代替テキストのあり方について頭を悩ませています。もう超絶といってよい。EPUBは、Web技術をベースとしているけど、一方で、DAISYの後継規格という位置づけでもある（参考: DAISYの種類とバージョン）ので、Webと音訳のコンテキストが重なるところにEPUBはあるのだと理解しているけど、そう考えると、Webにおける非テキストコンテンツにおける代替テキストの要件と、音訳における図等の処理の違いはあるのであろうか、あるのであればEPUBはどちらに寄せるべきなのだろうか、と。
　前提となる認識として、音訳側の代替テキストのほうが代替テキストが長くなる傾向にあると感じているところがある。ターゲットが（たぶん）同じである以上、究極的には目指すところは同じはずですが、日本で録音図書が製作されるようになって、そのノウハウも60年以上蓄積があるので、重ならないところもあるのかもしれないと。このあたりの悩み、以下のツィートから始まるスレッドでも @ma10 さんと前々日に議論させていただいたりしていた。


　Webにおける非テキストコンテンツの代替テキストの要件を詳しく知りたくて、もんどさんのお話を伺ったのですが、

  • 元の非テキストコンテンツと同じ目的<及び情報を伝える
  • 代替テキストを非テキストコンテンツと置き換えてもそのページが持つ情報が失われない

という基本要件は音訳もWebの代替テキストもやはり全く同じではないかと改めて感じた（むしろ同じすぎるくらいで、Web側の基本要件がこのように至った経緯を知りたい）。簡潔さを求められる点がWebのほうが強いかなという感じもしましたが、簡潔さは無論、音訳でも求められるわけで音訳者によるという感じもする。
　
　とすると、音訳とWebの代替テキストの長さに違いがあるとするならば、フォーマット（入れ物）の違いが大きいのかもしれない（テキストベースか、音声ベースか、又はDAISY形式とHTMLの違いとか）。制作者側のコンテキストの違いも大きいだろうか。音訳の場合、制作のリクエストを利用者から受けて行われることが多く、制作される個々のタイトルについて実際のニーズを制作者が感じているということ、ボランティアベースで作られている、つまり、熱意があるので、長くなることを厭わないところはあるのではないか、とか。もう少し考えたい。
　柴田さんのリンクのお話。
target="_blank"の安易な利用はアクセシビリティ的にどうなのかという議論はずいぶん前に内部でもしたことがあるなぁと思い出しながら、柴田さんのお話、伺っていましたが、ユーザーを戸惑わせない、しかし、ユーザー側が自分の望む形でリンクを活用できる形を選択肢として提供することを制作者側が常に意識して作らないといけないということ、改めて突きつけられた感じ。常に自分がやれているかというと、疑問符がつくかもしれない　汗。反省。
　柴田さんの発表については、その後。柴田さんと @robert_KIMATA さんがその後していたやりとりも、おもしろかった。リンクの考え方とか、XHTML2.0にまで話が及んだりとか。


　
　たいらげ会の懇親会の話。
　
　懇親会を場所を変えてやりましょうとなった場合、一度落ち着いてしまうと、帰る時間がかなり遅くなってしまうため、懇親会の前のタイミングで帰るつもりだったのだけど、懇親会もたいらげ会の会場となった時代工房さんで引き続き行われて、テーブルにどんと置かれるビール缶に惹かれて結局、参加してしまった。勉強会と同じ会場で懇親会というの、参加しやすさは、参加者の立場で見て実感した。これが参加しやすい。勉強会の雰囲気がそのまま残っていることもよくて、リラックスした雰囲気で話せるのがとても良かった。これは自分が関係するイベントでも取り入れたい。
　全体を通して楽しい時間で、いろいろと刺激を受けて考えさせられるところがありました。ありがとうございました。次回も・・きっと開催されるのですよね！

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

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