Focus Visible2.4.7 フォーカスの可視化（レベルAA）

ユーザエージェントによるフォーカス強調

ユーザエージェント（ブラウザなど）は、デフォルトでフォーカスを受け取った要素を視覚的に強調します。例えば、HTMLのaタグはフォーカスを受け取るとデフォルトで青色のアウトラインが表示されます。このデフォルトの機能を活用することで、追加のコーディングなしにフォーカスの可視化を実現できます。

CSSを使用したフォーカスの強調

CSSを使用して、フォーカスを受け取ったユーザインタフェースコンポーネントの外観をカスタマイズします。CSSの:focus擬似クラスを使用して、フォーカス時のボーダーや背景色、テキストの色などを変更することができます。

:focus {
  outline: 2px solid blue;
}

プラットフォームデフォルトのフォーカスインジケータの使用

プラットフォームやブラウザが提供するデフォルトのフォーカスインジケータをそのまま使用します。視認性が高く、ユーザーが慣れ親しんだフォーカスインジケータを使用することで、ユーザー体験を向上させます。

高視認性フォーカスインジケータの提供

コンテンツ制作者が独自に視認性に優れたフォーカスインジケータを提供します。例えば、フォーカス時に要素の背景色やボーダーの色を変更し、ユーザーが現在のフォーカス位置を明確に確認できるようにします。

スクリプトによるフォーカスインジケータの協調

JavaScript を使用して、フォーカスのある要素の背景色やボーダーを動的に変更することで、フォーカスの視認性を高めます。例えば、次のようなスクリプトを使用して、フォーカスのある要素にスタイルを適用できます。

document.addEventListener('focus', function(event) {
  event.target.style.backgroundColor = 'yellow';
}, true);