フォーカスの可視化

Silktide は、ページ上のコントロール（リンク、ボタン、フォームフィールド）が、キーボードで選択されたときに視覚的に変化するかをテストします。視覚的な変化がなければ、キーボードユーザーはページ上のどこにいるのかを確認できません。

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

標準的なブラウザーコントロールはすべて、デフォルトでフォーカスを表示します。そのため、ここで失敗する場合は、ほぼ必ずスタイルシートによってデフォルトのインジケーターが無効にされているか、カスタムコントロールにインジケーターが実装されていないことが原因です。

重要な理由

マウスを使えない人は Tab キーで移動するため、フォーカスインジケーターが、どのコントロールにフォーカスしているのかを知る唯一の手段です。デザイナーがフォーカスインジケーターを削除すると（多くの場合、デフォルトの輪郭線が見た目に好ましくないと考えられるためです）、キーボードユーザーは、Enter キーを押すと何が実行されるのかも分からないまま、手探りでキーを押すことになります。

修正方法

でフォーカスを無効にしている箇所を探し、削除します。通常は outline: none や outline: 0 のようなルールです。
デフォルトの輪郭線を置き換える場合は、:focus 状態で明確な代替表示を指定します。

\/* フォーカスしたフィールドに視認可能なインジケーターを復元 *\/
input:focus {
  outline: 2px solid #396196;
}

独自のドロップダウンメニューやスライダーなどのカスタムコントロールには、明示的なフォーカススタイルを設定します。これらにはデフォルトのスタイルがないためです。

インジケーターをどの程度目立たせるべきかについては、このチェックより厳しい関連チェックである明確なフォーカスを参照してください。

Silktide によるテスト方法

ページ上のすべてのフォーカス可能な要素を、キーボードユーザーが Tab キーで移動するようにシミュレーションします。チェック対象から除外した要素、晴眼者から見えない要素、tabindex が -1 の要素は除外します。
各要素について、フォーカス時とフォーカスしていない状態のスタイルを比較します。
を受け取ったときに、晴眼者が判別できる方法で外観が変化しない要素にフラグを付けます。

トラブルシューティング

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

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

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

フォーカスを実装する方法によっては、自動的に検出できないものがあります。

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

これらの手法を使用している要素は、フラグを付けずにスキップされます。

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

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