この記事は、Web Accessibility Advent Calendar 2017　2日目の記事です。

私が疑問に思った事をA11YJ Slackでご教示いただいた内容になるのですが、こちらを見ていないかたにもぜひ読んでもらいたいと思い記事にしました。

タイトルにあるようにA Responsive Accessible Tableの記事を読んでの感想なのですが、「Going Responsive > Adjusting to Viewport Size > Column Headers と Some Sort of Cell Label」の内容はアクセシブルではないと思いました。

Column Headers

まず、table要素をCSSでdisplay: blockにするとスクリーンリーダーがテーブルと認識しなくなる件についてですが、実際にWindows7/NVDA2017.3jp/Firefox57.0, Windows7/PC-Talker7/Internet Explorer11, iOS10.3.3/VoiceOver/Safari, Android7.1.1/TalkBack5.2.1/Google Chrome62.0.3202.84で検証してみたところ、VoiceOverだけですが「表の開始位置です」と読み上げました。(display: table時に読み上げられる「何行何列」までは読み上げず、tabindex="0"が記述されていない時はテーブル内をタップすればテーブル内の情報を読み上げますが、フリック操作ではdisplay: table時しかテーブル内を読み上げません。)
残念ながら他の3つは「テーブル」とは読み上げませんでした。(PC-Talkerはdisplay: table時も「テーブル」とは読み上げません。)
また、tabindex="0"が記述されていると、VoiceOverとTalkBackではテーブル内をタップしてもキャプション以外の情報(テーブル内の情報)を読み上げないので(display: table時はtabindex="0"の記述があってもテーブル内の情報を読み上げます)tabindex="0"は記述すべきではないと思いました。(上に記載したようにVoiceOverは、キャプションの後に「表の開始位置です」と読み上げます。)
追記：tabindex="0"が記述されている時、VoiceOverで(タップで)テーブル内の情報を読み上げさせるには全てのtd要素にtabindex="0"を追記しなければいけません。TalkBackは、一番上のtd要素にtabindex="0"入れるとテーブル内の情報をタップやフリックで読み上げるようになりますが、テーブル部分を続けて読み上げさせるとtabindex="0"が付いていないtd要素のみ読み上げます。テーブル部分を続けて読み上げさせた時、すべてのtd要素にtabindex="0"を入れてもテーブルの内容は読み上げませんが、フリックとタップでテーブル内の情報を読み上げます。

検証結果から「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という疑問が湧き、NVDA開発者の@nishimotz さんにお聞きしたところ、私が読み上げ検証した環境に加え、NVDA/Internet Explorer11, NVDA/Edge, NVDA/Google Chromeでの検証もしていただき、IE11とEdgeでは「テーブル」と読み上げるという事を教えていただ上で、NVDA はブラウザの解釈を受け取っているだけなので、挙動はブラウザ依存だという事を教えていただきました。なので、これはスクリーンリーダー側の問題ではなくブラウザ側の問題だという事がわかりました。

また、上記と同じ私の疑問に@kazuhito さんがCSS が適用された結果としてアクセシビリティオブジェクトのセマンティクスがそう変わってしまったからでは？との意見に加え参考情報としてアクセシビリティオブジェクトについてとSOTB5 - What even is a table? A quick look at Accessibility APIs - Edd Sowden on Vimeoを教えていただきました。この参考情報を読んで(聞いて)「なるほど。頭の中にはこの考えは薄っすらあったけどしっかり認識できていなかった。ご教示いただいて疑問に思ってた事がしっかり理解できた。」と疑問は解消されました。
追記：table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件でより詳しくアクセシビリティオブジェクトについて説明していただいているのでぜひ読んでください

逆にdiv要素にCSSでdisplay: tableにして読み上げ確認したところ、どのスクリーンリーダーも「テーブル」とは読み上げませんでした。

もう1つ、記事にはWAI-ARIAを使用しrole="table"を記述しても役割は変わらずスクリーンリーダーはテーブルと認識しないと記載してありますが、こちらも@nishimotz さんがNVDAで実際検証されたところ(table要素にはrole="table"、tr要素にはrole=row 、 td要素にはrole=cell)ちゃんと「テーブル」と読み上げる事を確認していただきました。が、レイアウト目的のCSSの為にrole属性わざわざを付けるのは違うと考えます。ここで仕様書の翻訳をされている@momdo_ さんがtable要素に対してdisplay: none以外の何かに変えようとも、ネイティヴロールを変更するような挙動にすべきではない、みたいなことは言えそうですね。と意見してくださったので私も強く共感しました。

ここまでで言えることは、VoiceOverはテーブル内を認識していないので微妙ですが、NVDA/IE11とEdgeでは「テーブル(表)」と読み上げてくれる事から、table要素をCSSでdisplay: blockにするとスクリーンリーダーはテーブルと認識してくれないとは言い切れないという事になります。(「テーブル」と読み上げない環境下のブラウザの解釈が変更される事を強く望みます)

Some Sort of Cell Label

次に、テーブルの見出しを非表示且つ 読み上げないようCSSでdisplay:none;にし、contentの値にその見出しの情報を記述すれば、スクリーンリーダーがcontentの値を読み上げるから大丈夫と記事に記載してありましたが、この方法はアクセシブルではないので使うべきではないと思ってます。

念のためこちらも読み上げ検証したところ、PC-Talker以外3つのスクリーンリーダーではcontentの値を読み上げました。

それでもこの実装方法がアクセシブルでないと考える理由は以下になります。

1. CSSは装飾目的で使用し、情報はHTMLで記述するべき。(関連情報：WCAG2.0 達成方法 G115)
2. WCAG2.0達成基準 1.3.1の失敗例F87に該当するためこの実装方法は使うべきではない。(達成基準 1.3.1に適合できない)(関連情報：WCAG2.0 達成方法 G140)
3. 日本ではシェア率の高いPC-Talkerの環境では情報が伝わらない。(PCの環境下でスマホサイズで閲覧されている環境は少ないと思うがないとは言い切れない)
4. VoiceOver/Safariはテーブル内まで認識していませんが、NVDA/IE11とEdgeが「テーブル(表)」と読み上げることから、少なくともテーブルと認識してくれる環境がある。

結論

「Column Headers」と「Some Sort of Cell Label」の実装方法はアクセシブルではないから使わないとすると、テーブルをスマホサイズでアクセシブルなレイアウトするにはどうすれば良いか考えると、この記事でも紹介されているPCサイズと同じレイアウトではみ出た部分は左右スクロールして情報を得てもらうか、可能な限り文字とテーブルサイズ小さくしてスマホの幅にフィットさせ、文字が小さくて見えない人にはビンチアウト(拡大)して情報を得てもらう方法が妥当だと考えます。他にもっと良いアクセシブルな実装方法があれば教えてもらえると嬉しいです。

最後に

最近、アクセシビリティを意識するかたやJIS X 8341-3:2016レベルA又はAAに準拠する事が要件に入っている案件が増えてきている事や無料で使えるスクリーンリーダーがある事からスクリーンリーダーで検証される機会も増えてきてると思います。

それは非常に大事で良い事なのですが、スクリーンリーダーが読み上げるからアクセシブルだと簡単に判断せず、まず@SawadaStdDesign さんのセマンティック・ブギ～ 浮かれたオイラは空回り ～を聞きいてください！そして、セマンティックなマークアップが出来ているかどうかを今一度確認してからアクセシブルかどうか判断してください。

明日 3日目は、私に「頑張って記事書きましょ」と励ましの言葉をくれた@sukoyakarizumu さんの記事です。お楽しみに。