フォーカス時

たとえば Tab キーを押して要素に移動するだけで、新しいページの読み込み、フォームの送信、ポップアップの表示などの大きな変更が引き起こされることは、決してあってはなりません。

これはレビューが必要な項目です。縮小された JavaScript やフレームワークの JavaScript から、フォーカスハンドラーがコンテキストを変更するかどうかを自動化によって確実に判定することはできません。そのため、Silktide は各ページでプロンプトを表示し、担当者が Tab キーで操作して確認します。

重要な理由

キーボードユーザーは、マウスユーザーがポインターを動かすように、ページ内でフォーカスを移動させながらページを探索します。コントロールに到達することは、それを使うことを選択することと同じではありません。検索ボックスに Tab キーで移動しただけでページが再読み込みされたり、ボタンに到達しただけでダイアログが開いたりすると、キーボードユーザーやスクリーンリーダーユーザーは、望んでいない場所へ突然移動させられ、多くの場合、元の位置や作業内容を失います。動作に障害があり、要素ごとにゆっくり移動する人は、このような落とし穴に常に遭遇します。

これはWCAGの達成基準 3.2.1（フォーカス時）です。レベル Aの要件であり、最も基本的な適合レベルの一部です。

チェックする内容

1. ページ上のすべてのフォーカス可能なコントロールを Tab キーで順に操作します。
2. フォーカスだけで、ナビゲーション、フォームの送信、ダイアログや新しいウィンドウの表示が行われないことを確認します。
3. フィールドの強調表示、ヒントの表示、バックグラウンドでのデータ準備だけを行うフォーカスハンドラーは問題ありません。

フォーカスによってコンテキストが変わらない場合は、この検出結果を承認します。

修正方法

1. フォーカスハンドラーからアクションを移動します。ナビゲーション、送信、ダイアログの表示は、click、Enter キー、または訪問者が確認した変更など、明示的なアクションによって実行する必要があります。
2. フォーカスハンドラーは、操作を妨げない効果にのみ使用します。

// 問題: フィールドに到達するとすぐにナビゲーションする
searchBox.addEventListener('focus', () => {
  window.location.href = '/search';
});

// 修正: ユーザーが操作を選択した場合にのみナビゲーションする
searchBox.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    window.location.href = '/search';
  }
});

Silktide によるテスト方法

Silktide は、リスナーのソースコードを調べても、フォーカスによって引き起こされるコンテキストの変更を確実に検出できません。フレームワークやコードの縮小によって判定が不安定になるためです。そのため、このチェックでは、Tab キーで操作して確認すべき内容を説明するレビュー用プロンプトをページごとに 1 件表示します。

詳細情報

• フォーカス時について（WCAG 3.2.1）
• Element: focus event（MDN）