フォーカス時のアウトラインの役割をご存知ですか？
- 2011/12/06 14:00 JST
アウトラインの役割
リンクなどにフォーカスした時、アウトライン(外郭線)が表示されるのですが、このアウトラインにはどんな役割があるかご存知ですか？
アウトラインの役割を知らずに「何？この点線！じゃま」とCSSでoutline: none;と設定しアウトラインを消されているかたがいらっしゃると思うのですが、アウトラインが表示されないとキーボードのみで操作しているかたが自分が今どの位置にいるのかわからなくなってしまうんです。
リンクフォーカス時アウトラインが表示されないサイト
リンクフォーカス時にアウトラインが表示されないサイトがありましたので(ボタンフォーカス時にはアウトラインが表示されます)、アウトラインが表示されない状態で目的のページに辿り着けるか、また辿り着くのにどれだけ時間がかかり大変か体験してみましょう。私達はこのサイトの商品を購入したいとします。無事、目的の商品詳細ページまで辿り着く事ができるでしょうか？
サイトは、プレミアムバンダイ｜こどもから大人まで楽しめるバンダイ公式ショッピングサイトです。このページ内にある商品名「ふわふわでかチョッパー 新世界だぞコノヤロー！」の詳細ページ(予約ボタンのあるページ)を表示するのが目的になります。チョッパーは、アニメワンピースに出てくるキャラクターです。では、みなさんも私と同じようにキーボード操作のみで目的のページまで辿り着けるか試してみましょう。(FirefoxTabキーで移動していきます)
みなさん目的のページまで辿り着けましたか？迷子になったりしなかったでしょうか？このサイトは、上部で検索出来るようになっているので検索部分のテキストボックスにフォーカスしている事がわかれば結構早く(2分程度)目的のページにたどり着けると思います。私は、アクセシビリティチェックのために普段からキーボードのみで操作する事があるので、途中で迷子になる事はなかったのですが目的のページに辿り着いて「予約」のボタンを押すまで10分かかりました。目的のページを表示するまで10分かかるとなると途中で買う気が失せてしまい離脱する人もいると思います。
ちなみに、同じ商品が売っているサイトTOEI ANIMATION オンラインショップは、リンクフォーカス時アウトラインが表示されるので目的の商品「ふわふわでかチョッパー 新世界だぞコノヤロー！」の詳細ページ(予約ボタンのあるページ)まで59.6秒で辿り着く事ができました。このように同じ商品が売っているサイトがあればこちらにユーザーが流れていく事も予想できるでしょう。
WCAG2.0とJIS X 8341-3:2010では
ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0では、2.4.7 フォーカスの可視化: キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。 (レベル AA) これは、JIS X 8341-3:2010の7.2.4.7視覚的に認識可能なフォーカスに関する達成基準にあたります。
達成基準 2.4.7 を理解するには、実装方法や不適合事例などが記載されており、具体的で非常にわかりやすいので読んでみてください。
フォーカス時各ブラウザでのアウトラインの表示
では、実際フォーカス時各ブラウザでどのようにアウトラインが表示されるか見比べてみましょう。OSは、Windows XPでこのサイトのGeeklogテーマ「Lovely(ベーステーマprofessional_css)」のサイトロゴにフォーカスした時どのように表示されるか見てみたいと思います。 (Opera11.52の場合、キーボードでページ移動するには Shift + 矢印キー を押して移動します。)
GoogleChrome 15.0.874.121は、オレンジ色の実線。
Firefox 7.0.1は、黒色の点線。
Internet Explorer7は、黒色の点線。
Opera 11.52は、青色の実線。
Safari 5.1.1は、青色の実線。
ご覧のように各ブラウザで違いがあり、GoogleChromeのオレンジ色の実線とOperaとSafariの青色の実線は、目立つように思いました。CSSで何も設定しないとこのような違いがあるという事がわかりました。
GoogleChromeだとアウトラインがかなり目立つのでCSSでa:focus { outline: thin dotted invert;}のように設定するとアウトラインが目立たなくなると@witch_doktorさんから教えていただいたので、上記と同じように各ブラウザを確認してみました。
GoogleChrome 15.0.874.121は、黒色の点線。
Firefox 7.0.1も黒色の点線。
Internet Explorer7も黒色の点線。
Opera 11.52も黒色の点線。
Safari 5.1.1も黒色の点線。
と、ご覧の様に各ブラウザで同じように表示されるようになりました。この事を教えていただいた@witch_doktorさんに感謝するとともに、@Phizeさん作成のProfessionalCSSでは、default.cssでこの設定がされていた事にまた@Phizeさんのすごさを実感しました。ProfessionalCSSは本当にすばらしいテーマです！
GeeglogテーマWAIproCSSでは
そして、私が作成したGeeklogのテーマ「WAIproCSS」では、アウトラインがどのように表示されるかというと、C15: CSSを用いて、ユーザーインタフェースコンポーネントがフォーカスを受けとったときの表示を変更するを実装しています。
サイトロゴにフォーカスした際、黄色の背景色に黒色の点線で表示されます。
右ブロック検索のテキストボックスにフォーカスした際、黄色の背景色で表示されるのでどこにフォーカスしているかわかりやすくなっています。
先ほどと同じテーマWAIproCSSにoutline: none; background-colr: transparent;と指定し、アウトラインと背景色を表示させないようにしました。 グローバルナビゲーションの箇所にフォーカスしている時のキャプチャ画像です。 さて、4つのリンクの内どこにフォーカスしているでしょうか？
サイトに訪問したかたが、こんな風にどこにフォーカスしているかわからないまま リンクを憶測で選択してエンターキーを押されると想定してみてください。 意図しないページが表示されたらユーザーは迷子になってしまいます。 このような状態では求めている情報にアクセス出来きません。 求めている情報にアクセス出来ないサイトにまた訪れるでしょうか？ 残念ながらこのサイトでは情報が得られないという認識になってしまうでしょう。
キーボードのみで操作されているかたは、なにかの障害をお持ちのかただけに限りません。私もログイン画面などのフォームはキーボードのみで操作します。ですから、そういうかたも含め自分がフォーカスしている位置がわからないサイトだと判断した時、ユーザーはそのページから離脱し、よほどの事がなければ再度訪問する事はないと思います。
アウトラインを表示するようにされたかたがたとまとめ
ユージックの運営者u-ziqさんは、「画像置換によるアクセシビリティーの低下」でoutline: none;を使用するとアクセシブルじゃなくなってしまうという事に気づかれ他の方法を紹介されています。
先ほどの各ブラウザでアウトラインがどのように表示されるかという話でお世話になった@witch_doktorさんもoutline: none;を使用するのを止めてアウトラインを表示するようサイト構築されています。
小さな事だと思うかたもいらっしゃるかもしれませんが、このように一人でも多くのかたがアウトラインの役割を知りアクセシブルなサイト構築をしていただけると非常に嬉しいです。