フォーカスインジケーター
キーボード操作時に現在フォーカスされている要素を視覚的に示す表示。アウトラインやハイライトで表現される。
フォーカスインジケーターは、キーボード操作時に現在フォーカスされている UI 要素を視覚的に示す表示です。通常はアウトライン (枠線) やハイライト (背景色変更) で表現されます。
WCAG 2.2 では、フォーカスインジケーターの最小コントラスト比や最小サイズに関する基準が強化されました。outline: none でフォーカスインジケーターを完全に消すことは、キーボードユーザーのアクセシビリティを著しく損ないます。アクセシビリティ CSS の書籍で実装方法を学べます。
CSS の :focus-visible 疑似クラスを使えば、キーボード操作時のみフォーカスインジケーターを表示し、マウスクリック時は非表示にする制御が可能です。
文字数カウントとの関連では、フォーカスインジケーターはテキスト入力フィールドで特に重要であり、ユーザーがどのフィールドに入力中かを明確に示します。UI デザイン実践の書籍も参考になります。