置き換えるときの注意点

• テキスト入力は、マウスでクリックしても:focus-visibleが当たります。 入力欄の枠もoutline: noneで消していた場合は、置き換えるとクリックしたときにも枠が出るようになります。
• ブラウザ既定の枠は、すでに:focus-visibleと同じ基準で出ています。 独自の枠が要らなければ、outline: noneを消すだけで済みます。
• 独自の枠は、背景と3:1以上のコントラストにします（WCAG 2.1の達成基準1.4.11）。
• Safariでは、設定の「詳細」にある「Tabキーを押したときにウェブページ上の各項目を強調表示」を入れないと、Tabキーでボタンやリンクに移動しません。 Safariでボタンの枠を確かめるときは、この設定を入れます。

フォールバック

対象の5ブラウザはすべて対応済みなので、通常は:focus-visibleだけで足ります。 古いブラウザも支える必要がある場合は、:focusに枠を付け、:focus:not(:focus-visible)で消します。 :focus-visibleを知らないブラウザでは2つ目のルールごと無視されるため、枠が出る側に倒れます。

button:focus {
  outline: 2px solid #06c;
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}