キーボードの使用 (または Tab キーの押し) のみで :focus を有効にする方法は?

キーボード使用時 (または Tab キー押し) でのみ :focus を有効にする

概要

不要な場合に :focus を無効にすると、ユーザー エクスペリエンスを向上させることができます。紛らわしい視覚的な手がかり。ただし、キーボード ユーザーにとってフォーカス機能を維持することは不可欠です。

元のソリューション: キーボードのみのフォーカス スタイル

Roman Kumarov のソリューションは、CSS と HTML を利用してキーボードのみのフォーカス スタイルを実現します。フォーカス可能な要素をコンテナ要素内にカプセル化し、内部要素のみをスタイル設定して、フォーカス状態をキーボード ユーザーが視覚的にアクセスできるようにします。

改善された解決策: :focus-visible Pseudo Class

更新: :focus-visible 疑似クラスは、キーボードのみのフォーカス スタイルを実現するための、よりエレガントで効果的な方法を提供します。 ブラウザは、キーボード操作中など、ユーザー エクスペリエンスが向上する場合にのみフォーカスを示すようになりました。

:focus-visible を使用するには、CSS ルールで :focus を :focus-visible に置き換えます。これにより、キーボードまたは非ポインティング デバイスでアクティブ化された場合にのみフォーカス スタイルが表示されるようになります。

下位互換性

:focus-visible をサポートしていないブラウザでは、デフォルトのフォーカス リングが表示されます。一貫したユーザー エクスペリエンスを提供するために、Šime Vidas は、:focus でフォーカス スタイルを定義し、:focus:not(:focus-visible) でそれを元に戻すことを提案しています。

CSS の例:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

HTML の例:

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

注:

• フォーカス不可能な要素をフォーカス可能にするには、tabindex 属性を使用します。
• デフォルトのフォーカス スタイルをオーバーライドするには、CSS が十分に具体的であることを確認してください。 .
• 子がフォーカスされているときに親要素のスタイルを設定するには、:focus-within を使用することを検討してください。

結論

:focus-visible 疑似クラスを利用するか、元のソリューションを実装することで、開発者はキーボードとマウスの両方のユーザーのユーザー エクスペリエンスを損なうことなく、キーボードのみのフォーカス スタイルを提供できます。

以上がキーボードの使用 (または Tab キーの押し) のみで :focus を有効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。