Widely available YES。全ブラウザで対応済み。アクセシブルなフォーカス表示の基本として必須。
レイアウト Widely available

outline

outline は border と異なりレイアウトに影響を与えず、要素の外側に描画される。:focus-visible と組み合わせることで、マウスクリック時にはフォーカスリングを非表示にし、キーボード操作時のみ表示するという、デザインとアクセシビリティを両立するパターンが実現できる。outline-offset で要素との距離も制御可能。

アクセシビリティ装飾

概要

outline は border と異なりレイアウトに影響を与えず、要素の外側に描画される。:focus-visible と組み合わせることで、マウスクリック時にはフォーカスリングを非表示にし、キーボード操作時のみ表示するという、デザインとアクセシビリティを両立するパターンが実現できる。outline-offset で要素との距離も制御可能。

対応ブラウザ

デスクトップ

Chrome 94+
Edge 94+
Safari 16.4+
Firefox 88+

モバイル

Chrome Android 94+
Safari iOS 16.4+
Firefox Android 88+

基本構文

CSS 
/* キーボードフォーカス時のみ表示 */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* マウスクリック時のフォーカスリングを抑制 */
:focus:not(:focus-visible) {
  outline: none;
}

/* カスタムフォーカスリング */
.button:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 4px;
}

実務での使いどころ

  • キーボードフォーカスインジケーター

    :focus-visible で表示制御し、キーボード操作時のみ視覚的なフォーカスリングを表示する。

  • カスタムフォーカスリング

    outline-offset と色のカスタマイズで、ブランドカラーに合わせたアクセシブルなフォーカスリングを作成する。

注意点

  • outline: none を安易に使うとキーボードユーザーがフォーカス位置を把握できなくなる。必ず代替のフォーカス表示を用意する。
  • outline は border-radius に必ずしも追従しない（ブラウザにより異なる。最新ブラウザでは追従する傾向）。

アクセシビリティ

  • フォーカスインジケーターは WCAG 2.4.7 の要件。outline を削除する場合は必ず代替の視覚表示（box-shadow 等）を提供すること。
  • コントラスト比は WCAG 2.4.11（非テキストコンテンツ）で少なくとも 3:1 を確保する。

参考リンク