この記事は、Web Accessibility Advent Calendar 2016　1日目の記事です。

A11YJ Slackで「タブ型 UI についてどうマークアップすればベストなのか？」という話題について色々と議論がなされており、私もかなり気になったのでWAI-ARIA対応のタブ型 UI をスクリーンリーダーがどのように読み上げるか検証してみました。

検証結果は、WAI-ARIA対応のタブメニューを4種スクリーンリーダーで読み上げた検証結果1とWAI-ARIA対応のタブメニューを4種スクリーンリーダーで読み上げた検証結果2をご覧ください。

検証結果から考察すると当たり前のことかもしれませんが、WAI-ARIAのどの記述をどこに入れるか又どの組み合わせで入れるかそしてどのスクリーンリーダーを使われている環境なのかによって提供できる情報が違ってくるだけでなく情報が正確に伝わらなくなるという事がわかりました。WAI-ARIAの記述を入れるとタブ型UIの役割や状態等をスクリーンリーダーに伝えられますが、検証結果を見ておわかりのようにWAI-ARIAの記述の組み合わせやスクリーンリーダーとブラウザの組み合わせは何通りもあるので、仕様を確認して実装した後 スクリーンリーダーで確認するかアクセシビリティ・サポーテッド（AS）情報 | 公開資料＆リンク集 | ウェブアクセシビリティ基盤委員会（WAIC）で情報を確認する等しないとせっかくWAI-ARIA対応のUIを実装しても情報が正しく伝わらなければWAI-ARIAの記述を付けない状態と同じになるか付けない方が良かったなんて事になってしまう可能性があります。今回の検証で使用したスクリーンリーダーは、PC-Talkerを除いてすべて無料で使用できるので、実装後ざっとでも良いので実際に意図したように読み上げるのか一度確認をしてみてください。

さて結論なのですが、これからまだWAI-ARIAの仕様が変化したりスクリーンリーダーのバージョンアップによって伝わる情報に変化があると思いますが、現状WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2に記載したように Tabs | jQuery UIの記述からa要素に記述されている role="presentation" を削除した検証結果2の検証3-1を採用するのがベストだと思いました。

関連情報として、昨年の第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成！で、「label要素とinput要素にaria-labelledby属性とaria-describedby属性を記述したものをどのように読み上げるか？」という話題が出た事からこちらの検証もしてます。合わせてご覧ください。aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果

検証でのスクリーンリーダーの操作について

AndroidのTalkBackで上から続けて読み上げるのにシェイクを使うのですが、ゆっくり振ると画面表示が縦から横になりその度表示が切り替わった事を読み上げられ、それを聞き終えるまで次の動作に移れなかったり、片手で力を入れて早く振るとスマートフォンをどこかに飛ばしそうに(投げそうに)なり両手でスマートフォンを持ってシェイクしたり、何度振ってもシェイクだとスマートフォンに認識されず何回も降り続けたりで、正確にシェイクだと伝わるよう絶妙なタイミングでスマートフォンを振るのが結構難しく感じました。(私が不器用なだけかもしれませんが…)

自分がちゃんとシェイク出来たと思っても、スマートフォンがシェイクだと認識しているかどうかが音声だけでは分かりずらいと思っていたのですが、それを補う為にスマートフォンがシェイクだと認識した時には振動(バイブ)するようになっていたので、ちゃんと動作しているかどうか判断する事が出来ました。違う操作でも音声だけでは分かりずらいものには振動と組み合わせて動作するようになっているので、私は音声より振動で意図した動作をしてくれているのかを判断してました。この経験を通し、ユーザーが情報を得る時には2つの手法を提供するの方が確実性が上がり、1つの動作では分かりずらい時には2つの動作を提供した方が良いと実感しました。

これはスマートフォンの動作に限らずWebサイトでの情報提供にも言えることだと思います。環境や状況によって1つの手法では確実に情報が伝わらない時には2つの手段を用いた方がよりアクセシブルになるので、サイト設計の段階でそのような事も考慮していかないといけないと感じました。

まとめ

ちょっと話が飛躍しているかもしれませんが、デバイスの概念はいずれなくなる？　Googleが「モバイルファーストからAIファーストへ」とシフトする理由(新野淳一氏 寄稿)やGoogle初の純正スマホの、「音声検索」がすごいそしてGoogleは「モバイルファーストからAIファーストへ」。その理由は、いずれデバイスという概念は消え去り、インテリジェントなアシスタントになるからにも書いてあるように、これからはスマートフォンだけでなく家電等もしゃべり出し人間が機械と会話するのが当たり前の日常が来るのだと思います。そうなると特定の人じゃなく誰もが便利な世の中になるでしょう。しかしその時、マシーンリーダブルに実装されていないと慌てて対応しなきゃいけなくなり時間もお金もかかり大変な思いをしなきゃいけなくなる可能性が高いです。今からちゃんとマシーンリーダーブルでアクセシブルな情報提供をしておけばその時が来ても慌てることなく今のままでいち早く誰もが情報を得られるものが提供出来ると思います。

今だけじゃなく未来のためにも、よりアクセシブルにするにはどうすれば良いかを試行錯誤しながら考え続け「前回作ったものより少しでもアクセシブルなものを作っていきたい」と思いました。