日本語スクリーンリーダーとWAI-ARIA
スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス
ウェブサイトやウェブアプリを、スクリーンリーダーなどの支援技術を利用している人にも使いやすくする、というWAI-ARIA。 2011年にすでに勧告候補(CR)になっているが(3/20付で勧告になりました)、日本のスクリーンリーダーがどれだけWAI-ARIAに対応しているのか、調べてみた。
検証に使用したのは、国産スクリーンリーダーの二大巨頭(?)、PC-TalkerとFocusTalk。 そして、比較用に、オープンソースで開発されているNVDA日本語版も使用。
WAI-ARIAはかなり広範な仕様となっているが、今回、テストして検証した内容は、「ランドマーク(Landmark Roles)」、コンテンツの動的変化などを通知する「aria-live」プロパティ、そして、読み上げなどを制御する「aria-hidden」ステートへの対応状況の3つ(だけ)。
その結論を先に書くと、国産スクリーンリーダーの対応状況は、なんとも残念感が漂うものだった…。 国産スクリーンリーダーはMS製ソフトの読み上げに特化してそれを売りにしているようだけど、そのMS製のIEは、IE8の時点からすでにWAI-ARIAには対応済み。 もっとWeb標準の導入に積極的になってほしい、と切に願う次第ですよ。 これじゃあ、日本独自進化のガラパゴスですらなくて、単に腰が重いだけだもん。 Web標準対応に関するドキュメントが公式サイトに全く見当たらない、ということにも、その姿勢が現れているような気がするけど…orz
スクリーンリーダー | Landmark | aria-live | aria-hidden |
---|---|---|---|
NVDA | 対応済み | 対応済み | 対応済み |
PC-Talker | 対応済み | 未対応 | 全文読み上げ時は未対応 仮想カーソル読み上げ時は対応 |
FocusTalk | 未対応(?) | 未対応 | 対応済み |
検証したテストケースや結果の詳細は別項にまとめてあるのでご参照を。
スクリーンリーダーに対応したベスト(じゃないかもしれないw)プラクティス
実は、今回、このような検証を行った主な目的は、aria-hiddenの対応状況を知りたかったから。
aria-hiddenというのはスクリーンリーダーなど支援技術における表示・非表示(スクリーンリーダーの場合は「読み上げ」「読み飛ばし」)を制御するもので、aria-hidden="true"を指定すると、読み上げなくなる。
今回比較用に使用したNVDAはもとより、JAWS、MacやiOSのVoiceOver、AndroidのTalkbackなどはすでにaria-hiddenには対応している。
国産スクリーンリーダーの場合は、FocusTalkはaria-hiddenに対応済みだが、バグらしき挙動がある。 一方、PC-Talkerは、全文読み上げ時と仮想カーソルによる読み上げ時でほとんどのケースで振る舞いが逆になる、というなんとも困った実装。
サイトを作る上で、画面上の表示・非表示と読み上げ・読み飛ばしを分けたい、というのは、よくあることで、具体的には…
- 画面上は表示されているが、スクリーンリーダーでは読ませたくない
- 画面上は非表示だが、スクリーンリーダーには読ませたい
- 画面上は非表示で、スクリーンリーダーにも読ませたくない
そこで、それぞれのケースについてどのような方法が最適なのか(ベストとは言えないまでもセカンドベストなのか)、まとめてみた。
- 画面上は表示されているが、スクリーンリーダーでは読ませたくない
- 現状ではベストな方法は…ない
PC-Talkerの全文読み上げモードではどんな指定をしていようが全て読んでしまうorz - 次善策としては、読み上げさせたくないものにはとにかくaria-hidden="true"を指定
- ただし、role="presentation"とは併用しないこと
- 現状ではベストな方法は…ない
- 画面上は非表示だが、スクリーンリーダーには読ませたい
- CSS off screenで画面外に飛ばす手法(position: absolute; left: -9999px;など)の一択
これで問題なし - なお、画面外に飛ばす場合は、width: 0; height: 0; overflow: hidden;も明示しておいた方が吉
でないと、余分なスクロールが発生する可能性がある テストケース
- CSS off screenで画面外に飛ばす手法(position: absolute; left: -9999px;など)の一択
- 画面上は非表示で、スクリーンリーダーにも読ませたくない
- 意外なことに、問題なく使えるベストな方法は…ない
- 次善策としては、CSSのdisplay: none; + aria-hidden="true"
あるいは、HTML5なら、hidden属性の指定 + aria-hidden="true" - display: none;のみやhidden属性のみだと、FocusTalkで読み上げられてしまうことに注意
"日本語スクリーンリーダーとWAI-ARIA"へのTwitter上でのコメントやRT
24件のツイートがあります。
ツイート 1
asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/kSiogSNMg2
ツイート 2
RT @asamuzakjp: asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/kSiogSNMg2
ツイート 3
ぐぬぬ……。 / asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/AFDEuksoEg
ツイート 4
RT @ub_pnr: ぐぬぬ……。 / asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/AFDEuksoEg
ツイート 5
RT @ub_pnr: ぐぬぬ……。 / asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/AFDEuksoEg
ツイート 6
おぉ、WAI-ARIAってばこの記事の公開直後(2/6)にPR(勧告案)になっていたのね http://t.co/1p70sGohCh asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/kSiogT5Vua
ツイート 7
PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #nvdajp
ツイート 8
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 9
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 10
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 11
"これじゃあ、日本独自進化のガラパゴスですらなくて、単に腰が重いだけだもん。" asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/StOyQH0sET
ツイート 12
RT @kazuhito: "これじゃあ、日本独自進化のガラパゴスですらなくて、単に腰が重いだけだもん。" asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/StOyQH0sET
ツイート 13
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 14
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 15
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 16
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 17
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 18
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 19
RT @24motz: PC-TalkerとFocusTalkとNVDAの比較。日本語スクリーンリーダーとWAI-ARIA / スクリーンリーダー対応へのベスト(じゃないかもしれないけどw)プラクティス http://t.co/tLlq13l5kf @asamuzakjp #n…
ツイート 20
うちのサイトの記事を取り上げてくれてます WAI-ARIA と NVDA http://t.co/UwiNHvNJGN / http://t.co/kSiogT5Vua
ツイート 21
CSSオフスクリーンでスクロールが発生する件、既定の所作だったのねorz Firefoxでも確認できた テストケース → http://t.co/Iq9xv3ZkgV あわせて、スクリーンリーダー対応の記事にも付記しておいた http://t.co/kSiogT5Vua
ツイート 22
WAI-ARIAが勧告になったことにあわせて追記を修正 / asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA http://t.co/kSiogT5Vua
ツイート 23
この検証をしていたときも、CSSオフスクリーンでwidthやheightをゼロにして、スクリーンリーダーが読まなかったという記憶もない… asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA https://t.co/kSiogSNMg2
ツイート 24
つーか、これもう2年前になるのか… asamuzaK.jp : 日本語スクリーンリーダーとWAI-ARIA https://t.co/kSiogSNMg2