2.4.7 の良い実装例がフォーカス時のスタイルではない

[masuP9]

##良い実装例 2.4.7 フォーカスを見えるようにする - Ameba Accessibility Guidelines

スタイルがフォーカス時ではなく、通常時のスタイルなので次のコードが良さそう。

<style>
  .button1:focus-visible {
    outline: 1;
  }
  .button2:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2d8c3c;
  }
</style>

<form>
  <label>ブラウザ標準の枠線を表示</label>
  <button class="button1">送信</button>

  <label>独自スタイルの枠線を表示</label>
  <button class="button2">送信</button>
</form>

[itsminadesu]

ご指摘いただきありがとうございます！
実装例を更新いたしました！ 🎉