フォーカス・インジケータは不可欠です!‐第8回‐

イラスト:カメラのフォーカスレンズを除いている男性の目

今回は、これまで勉強したことを参考に、見習い君が実際にウェブサイトのアクセシビリティチェックをしているところを師匠が指導しています。見習い君が「フォーカス・インジケータ」が表示されるかチェックしているようです。

ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある方たちがウェブ利用時にどの様な障壁にぶつかり、どの様な工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。

フォーカス・インジケータってなに?

イラスト:師匠

師匠:「フォーカス・インジケータ」チェックはどこまで進んだかな?

見習い君:このページのフォーカス・インジケータ表示を残り1か所チェックすれば終わりです。・・・・あれ?

師匠:何か問題があったのかね?

イラスト:悩んだ表情の見習い君

見習い君:はい、最後のリンクボタンだけフォーカス・インジケータが表示されていないようです。

師匠:どれどれ、そうだな。たしかに表示されていない。
これではキーボードでパソコンを操作する利用者には厳しいな。

見習い君:どうして厳しいのですか?

師匠:じゃあ、そのフォーカス・インジケータが表示されていないリンクに、キーボード操作でアクセスしてみなさい。

見習い君:あっ、フォーカス・インジケータが当たっているのが分からないからアクセスできません!

イラスト:顎に手をあてながら説明する師匠

師匠:そうだろ。この作業はマウス操作ができればポインタを移動させてクリックするだけだから簡単だが、マウス操作ができない利用者はキーボードで操作しなければならない。そのような時のためにフォーカス・インジケータが必要になるのじゃ。

イラスト:フォーカス・インジケータが表示されているリンク画像の画面  吹き出しでこの黒枠がフォーカスインジケーターですと解説

見習い君:確かにそうですね、今回も勉強になりました。

師匠:おっ今日はやけに素直じゃな!
今回はフォーカス・インジケータの不具合を良く見つけたの。

イラスト:納得した表情の見習い君

見習い君:師匠、ぼく成長したでしょ!

師匠:自分で言うな(笑)

イラスト:秘書

秘書:フォーカス・インジケータは、マウスが使用できない利用者にとって、無くてはならない重要な機能です。
マウスを使用せずキーボード操作でTabキーを押して、キーボード・フォーカスを移動した際、どこにフォーカスが当たっているか、このフォーカス・インジケータで確認することになります。
キーボードでパソコンを操作しているときは、このフォーカス・インジケータが表示されていなければパソコンの操作はできないのです。

もっと知りたいと思った方は、こちらに詳しく書かれていますのでぜひ読んでみてくださいね。

【フォーカス・インジケータに関する基準】
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html(新しいウィンドウが開きます)

特別協賛企業の製品・サービスのご紹介

  • NTT ExCパートナーの公式サイトへ
  • 特別協賛企業の製品・サービスのご紹介_日本電信電話
  • NTTファイナンス株式会社の公式サイトへ
  • 株式会社NTTロジスコの公式サイトへ
  • NTTアドバンステクノロジ株式会社の公式サイトへ
  • 株式会社NTTアドの公式サイトへ

お知らせ

編集部のおすすめ記事

  • ゆうゆうゆう便り(メルマガ読者募集中)
  • ゆうゆうゆうのfacebook
  • 広告バナー募集中
ページの先頭へ