明確なフォーカス

Silktide は、ページ上のコントロール（リンク、ボタン、フォームフィールド）が、キーボードで選択されたときに、十分に明確に外観を変えるかどうかをテストします。変化が単に存在するだけでは不十分です。実際に見えるよう、変化は十分に大きく、コントラストが高くなければなりません。

これは表示されるフォーカスよりも厳しいバージョンです。このチェックではフォーカスインジケーターが存在するかどうかを確認しますが、こちらではインジケーターが十分に目立つかどうかを測定します。

自分で試すこともできます。ページを読み込み、Tab キーを繰り返し押してください。フォーカスした各コントロールは、たとえばはっきりしたアウトラインが表示されたり、背景色が変わったりするなど、目に見える形で変化するはずです。

これが重要な理由

キーボードで操作する人（運動障害のある人やスイッチデバイスの利用者を含む）は、がどこにあるかを確認する必要があります。フォーカスインジケーターが技術的には表示されていても、薄い、細い、またはコントラストが低い場合、インジケーターがまったくないのと同じくらい役に立ちません。ユーザーはページ上の位置を見失い、Enter キーを押すとどのコントロールが作動するのか判断できなくなります。

修正方法

最も簡単で確実な修正方法は、フォーカスしたコントロールの周囲に、少なくとも 2 ピクセルの太さがあり、コントロールとその周囲の両方に対してコントラストのある色を使用した実線のアウトラインを付けることです。

2 色のインジケーターを使うと、背景に関係なく確実に視認できます。

\/* 透明なアウトラインにより、強制カラーモードでもインジケーターが維持されます *\/
:focus {
  outline: 2px solid transparent;
  \/* 明るいハロー + 暗いリング：2 色のうち一方は必ずコントラストを確保します *\/
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

この方法は WCAG のテクニック C40 に基づいています。

下側の境界線のように、単一の辺に沿ったインジケーターは避けてください。テキストリンクでは辺の長さが変わるため、十分な大きさかどうかがその長さに左右されるからです。

Silktide によるテスト方法

ページ上のすべてのフォーカス可能な要素を、キーボードユーザーが Tab キーで移動するようにシミュレートします。ただし、チェック対象から除外した要素、視覚的に表示されるユーザーから隠されている要素、tabindex が -1 の要素は除外します。
各要素について、フォーカス時とフォーカスしていない状態のスタイルを比較します。
ブラウザーのデフォルトのフォーカスアウトラインを維持している要素、または 2 つの状態の間で背景色が変化し、そのコントラストが少なくとも 3:1 である要素を合格とします。
それ以外の場合は、両方の状態のアウトライン、境界線、影を測定し、十分なコントラストで変化する領域を数えます。合格するには、 2.4.13 の要件に従い、その領域が要素の周囲にある 2 ピクセルの太さの外周以上の大きさでなければなりません。

トラブルシューティング

フォーカススタイルの表示に JavaScript が必要

フォーカススタイルはだけで定義してください。でフォーカスを適用している場合（たとえば、スクリプトでクラスを追加する場合）、Silktide がそれを検出できない可能性があります。また、物理キーボードのない支援技術では機能しない可能性があります。JavaScript を無効にしてページを Tab キーで移動し、確認してみてください。

測定できないフォーカススタイル

フォーカスを実装する方法によっては、自動的に検出または測定できません。

::before や ::after などの疑似要素で描画されるフォーカス。
コンテナーで :focus-within を使用して適用されるフォーカス。
リンク内の <span> など、子要素に継承されるフォーカススタイル。一部のケースは検出されますが、すべてのバリエーションが検出されるわけではありません。

これらの手法を使用する要素は、問題として報告するのではなくスキップされます。

画像上にある要素、または背景が予測できない要素

コントラストは、既知の背景色に対して計算されます。要素が画像の上にある場合や、親要素の外側に配置されていて背景を特定できない場合、Silktide は推測せずにその要素をスキップします。

予期しない要素がフォーカス可能になっている

<div> や <span> などのタグは、tabindex に 0 以上の値を指定するとフォーカス可能になります。これは、カスタムコントロールでキーボード操作を可能にする方法です。結果にそのような要素が表示された場合、その要素は実際にキーボードで到達可能であり、フォーカススタイルが必要です。MDN の tabindex を参照してください。