ユーザーフォーカスの管理：フォーカス可視

これは、アクセス可能なフォームデザインのシリーズの2番目です。 最初の記事を逃した場合は、「Pseudo Classesのアクセス可能なフォーム」をチェックしてください。この投稿では、:focus-visible擬似クラスとWeb開発におけるその効果的な使用に焦点を当てています。

フォーカスを理解する

に飛び込む前に、CSSの:focus-visiblepseudoクラスを確認しましょう。 :focus要素を使用したユーザーインタラクション（キーボード、マウス、トラックパッド、または支援技術）を視覚的に示します。 リンク、ボタン、フォームフィールドなどの自然にインタラクティブな要素には、ユーザーの認知度を維持するために明確なフォーカスインジケーターが必要です。 focus

このcss！

を避けてください

デフォルトの削除

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

アウトラインは、すべての

すべてのユーザーの重要な視覚的フィードバックを削除します。 常にフォーカスインジケーターを保存します。 削除が絶対に必要な場合は、視覚的に同等のアクセス可能な代替品が提供されていることを確認してください。 デザインの懸念が発生した場合は、アクセス可能なソリューションを見つけるために協力してください。 :focus紹介：Focus-Visible

pseudo-classは、と同様のフォーカスインジケーターを提供しますが、ユーザーエクスペリエンスが向上しています。 その構文は簡単です：

特定の要素の場合：:focus-visible :focus

<code>:focus-visible {
  /* ...styles... */
}</code>

マウスのクリック/タップで不必要な視覚的な混乱なしに、視覚的に印象的なフォーカスインジケーターを可能にします。 実装されていない場合、デフォルトのブラウザフォーカスリング（しばしば望ましくないと見なされる）が残ります。

の歴史：フォーカス可視

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

focus-visible

の前に、デフォルトのブラウザスタイルが広く適用され、多くの場合、魅力のない「フォーカスリング」になります。 多くの開発者がこのリングを削除し、キーボードユーザーのアクセシビリティの問題を誤って作成しました。

最新のブラウザは、ユーザー入力方法（キーボード、マウスなど）に基づいて、ヒューリスティック（良い選択肢を見つけるためにアルゴリズムを見つけるためのアルゴリズム）を使用してフォーカスリングが有益であるかを判断します。 これは、ブラウザがフォーカスリングをインテリジェントに適用または省略することを意味します。 初期の実装は、公式の仕様の前にポリフィル（アリスボックスホールやブライアンカーデル、モジラのによる）に依存していました。 ロブ・ドドソンのA11yキャストは、この進化に関するさらなる洞察を提供します。

なぜフォーカスが重要なのか:focus-visible:focus

アクセシビリティには、明確なフォーカスインジケーターを提供することが最重要です。 ユーザー、特に障害のあるユーザーは、ウェブページ内の位置と相互作用を理解する必要があります。 2人のブラインドブラザーズのWebサイト（）は、視覚的キューがナビゲーションに本質的に本質的な方法の強力な例として役立ちます。

demoとcode

次のコードは、:focus-visibleアクションを示しています。 フォーカスリングは、キーボードでナビゲートするときにのみ表示され、ブラウザのインテリジェントヒューリスティックを示します。

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

ブラウザのサポートとフォールバック

ブラウザのサポートは異なります。 サポートされていないブラウザでのフォールバックスタイルに

（機能クエリ）を使用してください：@supports

<code>:focus-visible {
  /* ...styles... */
}</code>

追加のアクセシビリティの考慮事項

フォーカスインジケーターの色を確実に、WCAG 2.2非テキストコントラスト（レベルAA）ガイドラインを満たしています。
• インタラクティブな要素全体で一貫したスタイルを維持することにより、認知的過負荷を避けてください。
• ブラウザサポート（caniuse.comから）：

（テーブルは、更新されたカニューズデータを使用してここで再作成されます）

さらなる読み取り：

https://www.php.cn/link/fdac69c3eee7bd0427535354eae235a4

• https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

以上がユーザーフォーカスの管理：フォーカス可視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。