CSS の `:focus` と `:focus-visible` の違いを理解する

CSS の :focus と :focus-visible の違いを理解する

私はキーボードのアクセシビリティの重要性についてかなり学んできたので、フォーカスされている要素を視覚的に示すことが非常に重要であることを知っています。しかし、よく知られている :focus 疑似クラスが常にこのジョブに最適であるとは限りません。そこで :focus-visible の出番です。これら 2 つの疑似クラスの違いを見て、それらを効果的に使用するためのベスト プラクティスを探ってみましょう。

:focus 疑似クラスとは何ですか?

:focus 疑似クラスは、フォーカスがどのようにトリガーされたかに関係なく、フォーカスを受け取る要素にスタイルを適用する CSS セレクターです。これには、キーボード ナビゲーション、マウス クリック、タッチ操作によるフォーカス イベントが含まれます。

:focus の使用例

button:focus {
  outline: 2px solid blue;
}

この例では、ユーザーがマウスでボタンをクリックするか、タッチスクリーンでタップするか、キーボードを使用してボタンに移動するかに関係なく、ボタンにフォーカスがあるたびに、ボタンに青い輪郭が表示されます。

:focus-visible 擬似クラスとは何ですか?

:focus-visible 疑似クラスは、より特殊化されています。ブラウザーがフォーカスを表示する必要があると判断した場合にのみ、要素にスタイルを適用します。これは通常、ユーザーがマウスやタッチ入力ではなく、キーボードまたは支援技術を介して移動するときに発生します。

:focus-visible の使用例

button:focus-visible {
  outline: 2px solid blue;
}

ここでは、キーボード ナビゲーションまたは通常は目に見えるフォーカス インジケーターを必要とする別の入力方法でフォーカスされた場合、ボタンには青い輪郭が表示されます。

:focus と :focus-visible の主な違い

：集中

• 動作: 入力メソッドに関係なく、フォーカスを受け取るすべての要素に適用されます。
• 使用例: マウス、キーボード、タッチなど、要素とのすべての対話が視覚的に示されるようにします。

:フォーカス可視

• 動作: キーボードや支援技術の使用など、フォーカスを表示する必要がある場合にのみスタイルを適用します。
• ユースケース: 通常は設計で必要となる、マウスやタッチ ユーザーには不要なアウトラインを避けながら、キーボードや支援技術のユーザーにのみフォーカス インジケーターを提供したいシナリオに最適です。

アクセシビリティへの影響

：集中

• 長所:
• 要素がいつフォーカスされているかをすべてのユーザーが確認できることを保証します。これはアクセシビリティにとって重要です。
• 短所:
• マウス操作中にフォーカス スタイルが不必要に表示される可能性があるため、マウス ユーザーにとって次善のエクスペリエンスが生じる可能性があります。

:フォーカス可視

• 長所:
• 必要な場合にのみフォーカス インジケーターを表示することでユーザー エクスペリエンスを向上させ、マウスとタッチ ユーザーにとってインターフェイスをクリーンに保ちます。
• キーボードや支援技術のユーザーに合わせてエクスペリエンスを調整し、明確な視覚的な手がかりを提供します。
• 短所:
• 特に :focus-visible をサポートしていない古いブラウザでは、フォーカス インジケーターが誤って省略されないように、追加の考慮事項が必要になる場合があります。
  • 入力方法に関係なく、すべてのユーザーにフォーカス インジケーターを表示したい場合があります。

:focus および :focus-visible の使用に関するベスト プラクティス

最高のアクセシビリティとユーザー エクスペリエンスを実現するには、CSS で :focus と :focus-visible の両方を組み合わせることが良いアイデアとなります。

:focus と :focus-visible の組み合わせ

button:focus {
  outline: 2px solid blue;
}

ここでは、そのようなスタイリングがどのようなものかを示す Stackblitz の例を示します。

追加のヒント

• キーボードと支援技術を使用したテスト: Web アプリケーションがキーボード (Tab、Shift Tab など) を使用して操作できること、およびキーボードを使用するユーザーにフォーカス インジケーターが表示されることを確認します。 e2e テスト スイートにアクセシビリティ テストを含めることは決して悪い考えではありません。
• 明確なフォーカス インジケーターを提供する: フォーカス インジケーターが目立つようにして、見やすくしてください。微妙な、または見つけにくいフォーカス インジケーターは、キーボード ナビゲーションに依存しているユーザーのアクセシビリティに重大な影響を与える可能性があります。

結論

:focus-visible 疑似クラスは、フォーカス インジケーターを管理するためのより洗練された方法を提供し、特にキーボードや支援技術のユーザーにとってのアクセシビリティとユーザー エクスペリエンスを向上させます。 :focus と :focus-visible の違いを理解し、CSS にベスト プラクティスを適用することで、よりアクセスしやすくユーザー フレンドリーな Web アプリケーションを作成できます。

アクセシビリティは決して後回しにすべきではないことを忘れないでください。フォーカス スタイルを慎重に適用することで、サイトとの対話方法に関係なく、すべてのユーザーが簡単に移動して対話できるようになります。

以上がCSS の `:focus` と `:focus-visible` の違いを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。