GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準

7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準

キーボード操作が可能なユーザインタフェースには、キーボードフォーカスの状態が視覚的に認識できる操作モードがなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

「キーボード操作が可能なユーザインタフェース」としては、次のようなものが挙げられます。

  • リンク
  • イメージマップのホットスポット
  • フォーム・コントロール
  • ボタン

ユーザーがキーボード操作でこれらにフォーカスを移動させた際には、「キーボードフォーカス」がそこにあることを視覚的に認識できるようにしなければなりません。

「キーボードフォーカス」は、HTMLで標準的なリンクやフォーム・コントロールを使用している限り、何もしなければ標準のフォーカスインジケーター(ドットの矩形)が表示されるため、ユーザーは視覚的に認識することが可能です。しかし、例えばCSSで:focus {outline: none}などを用いると、このフォーカスインジケーターが表示されなくなるため、本達成基準を満たすことができなくなります。

また、CSSやJavaScriptを用いて、「キーボードフォーカス」を受け取った際に背景色を変更するなどして、このフォーカスインジケーターをより見やすくすることも可能です。ただし、ブラウザによるサポート状況を確認する必要があります。例えば、一部のブラウザでは意図した表示にならなかった場合、少なくとも標準のフォーカスインジケーターが表示されなければ、「キーボードフォーカスの状態が視覚的に認識」できないため、本達成基準を満たすことはできません。

事例と実装

良い例 1:リンク

スクリーンショット:キーボードフォーカスを受け取ったリンクのフォーカスインジケーター

キーボードフォーカスを受け取ったテキストリンクに、標準のフォーカスインジケーターがドットの矩形で表示されている。

良い例 2:ボタン

スクリーンショット:キーボードフォーカスを受け取ったボタンのフォーカスインジケーター

キーボードフォーカスを受け取った[検索]ボタンに、標準のフォーカスインジケーターがドットの矩形と水色のアウトラインで表示されている。

参考情報

関連する達成基準

関連する達成基準はありません。