ウェブをあらゆる人にとって使いやすいようにするためのウェブアクセシビリティ（a11yと略します）に関するガイドラインであるWeb Content Accessibility Guidelines（ウェブコンテンツ・アクセシビリティ・ガイドライン、略称：WCAG）は2022年9月6日に新しいCandidate Recommendation（勧告候補）を発表しました。

そこでは9つの達成基準が新規追加される予定ですが、その中で個人的に興味深いものがあったので紹介します。

ガイドライン 2.4 Navigable / ナビゲーション可能の中の2.4.11 Focus Appearance / フォーカスの外観 （Level. AA）という項目です。

  • When the keyboard focus indicator is visible, one or both of the following are true:
    キーボードのフォーカスインジケーターが視覚的に表示される場合、以下のいずれか、または両方を満たす。
    • The entire focus indicator meets all the following:
      フォーカスインジケーター全体が、以下のすべてを満たす。
      • encloses the user interface component or sub-component that is focused, and
        フォーカスされているユーザーインターフェースコンポーネントまたはサブコンポーネントを囲んでいる。かつ、
      • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
        同一ピクセルのフォーカス状態と非フォーカス状態との間で少なくとも 3:1 のコントラスト比がある。かつ、
      • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.
        隣接する非フォーカスインジケーターの色に対して少なくとも 3:1 のコントラスト比があ る。
    • An area of the focus indicator meets all the following:
      フォーカスインジケーターの面積が、以下のすべてを満たす。
      • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
        フォーカスされていないコンポーネントまたはサブコンポーネントの厚さ1 CSS ピクセルの外周と少なくとも同じ大きさか、フォーカスされていないコンポーネントまたはサブコンポーネントの最小境界ボックスの最短辺に沿った厚さ4CSSピクセルの線と少なくとも同じ大きさである。かつ、
      • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
        同一ピクセルのフォーカス状態と非フォーカス状態との間で少なくとも 3:1 のコントラスト比がある。かつ、
      • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
        隣接する非フォーカスインジケーターの色に対して少なくとも 3:1 のコントラスト比があるか、2 CSS ピクセル以上の厚さがある。

（以上 WCAG 2.2 Candidate Recommendation (勧告候補) | Accessible & Usableより引用）

インタラクティブ要素の:focus 時の外観を outline: none; などで消すのは今までももちろん非推奨でしたが、この新しい達成基準に倣うと、場合によってはブラウザのデフォルトのフォーカスリング機能をそのまま使うだけでは十分なコントラスト比が担保できないケースが出てくるかもしれません（背景色が青の場合など）。
また、:focus 時の外観を :hover時と全く同じにするだけではやはりこの基準を達成できないケースがあるでしょう（フォーカスリングなどでサブコンポーネントを囲うことなく、ボタンの背景色のみを微妙に変化させる場合など）。

ではどうすればいいかという話になるわけですが、理想的には下記に示したようなアクセシビリティ担保と美しさを兼ね備えたウェブデザインがその回答となるでしょう。
（マウスではなくtabキーで移動してみてください）

See the Pen
Accessible Form by Jonathan Speek (@JonathanSpeek)
on CodePen.

意外ですが、この場合のボタンも基準達成ですね。
（マウスではなくtabキーで移動してみてください）

See the Pen
Snake highlight by Mikael Ainalem (@ainalem)
on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js

その他の新しいCandidate Recommendation（勧告候補）は WCAG 2.2 Candidate Recommendation (勧告候補) | Accessible & Usable をご覧いただければより理解が深まるでしょう。

Webにおいてデザイン性とアクセシビリティを両立させることは難しいと考えられがちですが、事実として両立することは可能です。
新しいweb勧告（候補）を知り、それを満たすwebデザインのパターンを事前にインプットしておくことで誰もが使いやすい理想のwebを実現していきましょう！