Skip to content

テクニック C45:CSS の :focus-visible を用いてキーボードフォーカス表示を提供する

このテクニックについて

このテクニックは 2.4.7: フォーカスの可視化 (十分なテクニック) に関連する。

このテクニックは、CSS をサポートするすべての技術に適用される。

解説

このテクニックの目的は、インタラクティブな要素がキーボードフォーカスを受け取ったときに、カスタムスタイルを提供することである。この例では、CSS の :focus-visible 疑似クラスを用いてこれを実現している。

通常の :focus 疑似クラスで定義されたスタイルは、要素がフォーカスを受け取った方法に関わらず、フォーカスを受け取るたびに適用される。対照的に、ユーザエージェントは、:focus-visible スタイルを表示するタイミングを決定するために、追加のヒューリスティック及びロジックを適用する ― 特に、ブラウザは利用者がキーボードでナビゲートしている場合は常にこれらのスタイルを表示するが、マウス又はポインタによる操作の場合は通常表示しない (<input> 要素など、キーボード入力もサポートする要素を除く)。これにより、コンテンツ制作者は、必ずしもフォーカス表示を必要としないかもしれない (例えば、視覚的に邪魔だと感じるなど) マウス又はポインタを使用する利用者にフォーカス表示を強制することなく、キーボード利用者に対して、強力な可視のフォーカス表示を提供できる。

これは、キーボードによるフォーカスインジケータが見える操作モードを提供するという要件を満たしている。

注記

このテクニックは、可視フォーカスインジケータを提供するスタイルを使用している場合にのみ十分である。

注記

マウス又はポインタを使用する利用者が、たとえキーボードを使用して要素にフォーカスを設定していなくても、可視フォーカスインジケータがあることでメリットを得られる場合がある。ベストプラクティスとして、このような場合でも、明示的に :focus スタイルを提供することを検討されたい。

事例

事例1：CSS :focus-visible を用いてキーボードフォーカスを提供する

この例では、HTML に標準的な <button> コントロールがある。

デフォルトでは、全てのモダンなブラウザで、このボタンは、マウス又はポインタを用いてアクティブにしたときにフォーカス表示を示さない。利用者が Tab キーを使用してボタンにフォーカスを設定すると、ブラウザはデフォルトのフォーカスアウトライン又は表示を示す。

このフォーカス表示をさらに目立たせるために、:focus-visible 疑似クラスセレクタを使用して、より意図的で目立つフォーカススタイルを定義する。

動作例: Using CSS :focus-visible to provide keyboard focus indication.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
              initial-scale=1, shrink-to-fit=no">
  <title>Using CSS :focus-visible to
         provide keyboard focus indication</title>
  <style>
    /* Specific :focus-visible styles */

    :focus-visible {
      outline: 5px solid red;
    }
    …
  </style>
</head>
<body>
  …
  <button>Example button</button>
  …
</body>
</html>

関連リソース

推奨を意味するものではない。

  1. CSS Selectors Level 4 - :focus-visible pseudo-class.
  2. MDN - :focus-visible pseudo-class.

検証

手順

キーボードフォーカスを取得できる各ユーザーインターフェースコンポーネントについて:

  1. キーボードを使用してインタフェースコンポーネントにフォーカスを設定する (一般的には、Tab 及び Shift+Tab キーを使用してコンポーネントに移動する)。
  2. コンポーネントがフォーカスを取得したら、フォーカスインジケータが可視であることを検証する。

期待される結果

  • チェック 2 が真である。
Back to Top