アクセシビリティのためのスムーズなフォーカスリングトランジション

アニメーションフォーカスインジケータ

デフォルトのブラウザフォーカスアウトラインは機能的ですが視覚的に唐突です。CSSトランジションにより、アクセシビリティを維持しながらスムーズでブランド化されたフォーカスインジケータを作成できます。

box-shadowアプローチ

.input {
  outline: none;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: box-shadow 0.2s ease;
}

.input:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

なぜfocusではなくfocus-visibleなのか？

:focus-visibleはキーボードナビゲーションでのみアクティブになり、マウスクリックでは作動しません。これにより、マウスでクリックするユーザー（通常フォーカスリングは不要）にはフォーカスリングが表示されず、キーボードユーザーには常にインジケータが表示されます。

outlineアプローチ（モダンブラウザ）

モダンブラウザはoutline-offsetトランジションをサポートしています：

.button {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s ease,
              outline-offset 0.2s ease;
}

.button:focus-visible {
  outline-color: #3b82f6;
  outline-offset: 4px;
}

組み合わせパターン

最も堅牢なアプローチは、一貫したクロスブラウザ動作のために両方を組み合わせます：

.interactive {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: outline-color 0.2s ease,
              outline-offset 0.2s ease,
              box-shadow 0.2s ease;
}

.interactive:focus-visible {
  outline-color: #3b82f6;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

アクセシビリティ要件

WCAG 2.4.7は、キーボードフォーカスインジケータが可視であることを要求しています。代替を提供せずにフォーカススタイルを削除しないでください。トランジションはフォーカスリングの外観をインジケータを削除することなく洗練されたものにします。