日本語スクリーンリーダーと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 未対応（？） 未対応 対応済み
日本語スクリーンリーダーのWAI-ARIA対応状況（2014年1月時点）。 なお、「対応済み」は「概ね対応」という意味で、一部対応のみの実装だったりバグらしきものなどがあったりする場合もある。

検証したテストケースや結果の詳細は別項にまとめてあるのでご参照を。

スクリーンリーダーに対応したベスト（じゃないかもしれない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のdisplay: none; + aria-hidden="true"
    あるいは、HTML5なら、hidden属性の指定 + aria-hidden="true"
  • display: none;のみやhidden属性のみだと、FocusTalkで読み上げられてしまうことに注意

"日本語スクリーンリーダーとWAI-ARIA"へのTwitter上でのコメントやRT

24件のツイートがあります。

ツイート 1

  • February 2, 2014 04:25:13
  • Kazz

ツイート 2

  • February 2, 2014 05:05:44
  • Mitsugu

ツイート 3

ツイート 4

ツイート 5

  • February 13, 2014 19:32:43
  • Kazz

ツイート 6

  • February 27, 2014 11:09:27
  • Kazz

ツイート 7

ツイート 8

ツイート 9

ツイート 10

ツイート 11

ツイート 12

ツイート 13

ツイート 14

ツイート 15

  • February 28, 2014 08:11:45
  • Sei Ken

ツイート 16

ツイート 17

ツイート 18

  • March 2, 2014 16:35:30
  • 明

ツイート 19

ツイート 20

  • March 3, 2014 12:28:14
  • Kazz

ツイート 21

  • March 6, 2014 10:37:25
  • Kazz

ツイート 22

  • March 31, 2014 18:31:51
  • Kazz

ツイート 23

  • February 22, 2016 02:09:04
  • Kazz

ツイート 24

  • February 22, 2016 02:09:56
  • Kazz