アクセシブルなフォーカス状態: 表示されるキーボード フォーカスの設計

フォーカス状態が重要な理由

キーボード、スイッチデバイス、または画面拡大鏡を使用する人は、一度に 1 要素ずつページ内を移動します。フォーカスインジケーターは、自分がどこにいるかを知る唯一の方法です。ブラウザーのアウトラインを置き換えずに削除することは、最も一般的なアクセシビリティ障害の 1 つです。

WCAG 2.2 に必要なもの

達成基準 2.4.7 フォーカス表示 (レベル AA) では、キーボード操作可能なインターフェースにフォーカス インジケーターが表示されるモードがあることが必要です。 WCAG 2.2 では、2.4.13 フォーカスの外観 (レベル AAA) を追加しました。これは、強力な指標を説明します。つまり、コンポーネントの 2 CSS ピクセルの厚さの周囲の面積と少なくとも同じ大きさで、フォーカスされた状態とフォーカスされていない状態の間のコントラスト比が少なくとも 3:1 であることを示します。

:フォーカス可視

MDN では、:focus-visible は、要素にフォーカスがあり、ブラウザがヒューリスティックを使用して、通常はキーボードで使用する場合にフォーカスを表示する必要があると判断した場合に適用されると説明しています。これにより、誰かがマウスでボタンをクリックするたびにフォーカス リングを表示することなく、キーボード ユーザーに強力なフォーカス リングを表示できます。輪郭を削除する代わりに使用します。

リングのデザイン

実践的なガイダンス:

• 要素に溶け込まないように、オフセットのあるアウトラインまたはリングを使用します。
• 要素が表示されるすべての背景に対するコントラストを確認します。 2色のリングが役立ちます。
• 設計システムでトークンとして定義され、コンポーネント間で一貫性を保ちます。
• 微妙な色の変化だけに依存しないでください。
• フォーカスされた要素がスティッキーヘッダーの後ろに隠れていないことを確認してください。

フォーカスとモーション

フォーカス リングは非常に短い遷移で表示されることがありますが、それは瞬時に感じられるはずです。呼び出し音を遅らせたり、要素を移動させるアニメーションは避けてください。また、カスタム キャンバス描画コンポーネントの場合は、キーボード ユーザーがアクセスできるように、実際にフォーカス可能な要素がページ内にまだ存在することを確認してください。