2010年7月2日金曜日

アクセシビリティ・チェックポイント(2)- ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

(2)ポップアップや別ウィンドウが開かれる場合は、その旨をユーザーに通知する

ポップアップ等、新規ウィンドウが開かれる時、またはアクティブ・ウィンドウが変更される時にはユーザーにその旨を通知する必要があります。

現象

商品の詳細を見せる時などに、ページをクリックするとポップアップ画面が表れて商品が表示され、xボタンで画面をクローズするといったページを良く見ます。これらは読み上げツールなどを利用しているユーザーには非常に使いづらいシステムです。アクティブ・ウィンドウが変更されたのに気付かずに前のページへ戻ろうと back ボタンを押しても戻れません。前のページへも戻れず、先のページへも進めずといった状態で、また最初からと思わせてしまうことも多くあるという事を認識してください。

対処方法

新規ウィンドウが開かれることをユーザーに通知しないまま、target="_blank" または target= "_new" 等を使用することはなるべく避けてください。
新規ウィンドウを開く事自体あまりお勧めいたしません。必要な場合はその旨をユーザーに通知することで、上記のような混乱を防ぐことができます。

(ここ重要)よくある間違った対処 - 誰の為の対策か?

ここでよくある間違った対処方法を紹介します。

新規ウィンドウを開く場合に、その旨を知らせるアイコンを表示させるのですが、これを CSS で定義して、"_blank" があった場合にそのアイコンを表示させるといった記述をしている企業サイトがたくさんあります。
ルール上はそれで対応したことになります。

でも、良く考えてみてください。それが無いと誰が困るのか?

上でも記述したように、読み上げツールのユーザーは特にこの問題には悩まされます。また、読み上げツールのユーザーは目の見えない方が多く、そういった方々は CSS を必要としません。つまり CSS は読み込まない設定となっています。CSS を読み込まないということはアイコンが表示されません。本当に必要なユーザーにはその旨を伝えていない事になります。

新規ウィンドウが開く場合はその旨を「CSSで記述しないで」必ずHTML文中に記述するようにしてください。