操作するだけでページが変わるドロップダウンと入力欄

文房具店のペンの一覧に「並べ替え」のメニューがあります。キーボードの利用者がTabキーでメニューへ移動し、ほかの並べ方を確かめようと下矢印キーを押します。Windowsでは、閉じたselectの値が矢印キーですぐに変わり、多くのブラウザーがその場で change を発生させます。そのため、ページは二つ目の並べ方で読み込み直され、フォーカスはページの先頭に戻ります。三つ目の並べ方を試すには、もう一度Tabキーでメニューまで移動する必要があり、矢印キーを押すたびに先頭へ戻されます。

同じ店の購入手続きには、カレンダー付きの配達日の入力欄があります。この欄にフォーカスが移ると、すぐにカレンダーが開き、スクリプトが最初の日付へフォーカスを移します。日付を入力することはできず、Shift + Tabキーで戻ると再びこの欄に着き、またカレンダーへ送られます。

WCAGでは、新しいページ、新しいウィンドウ、別の場所へのフォーカスの移動、ページの意味が変わるほどの内容の入れ替えを「コンテキストの変化」と呼びます。達成基準3.2.2「入力時」は、事前に知らせていない限り、値の変更でコンテキストの変化を起こしてはならないとしています。達成基準3.2.1「フォーカス時」はさらに厳しく、フォーカスを受けただけでコンテキストの変化を起こすことを、例外なく禁じています。並べ替えのメニューは入力時にページを読み込み直し、日付の入力欄はフォーカス時にフォーカスを移しています。

マウスではリストを開いて一度のクリックで選ぶため、マウスの利用者はほとんど気づきません。ページを一歩ずつ移動して使うすべての人に起きる問題です。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 届く範囲・力 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 手の操作が限られる キーボードやスイッチの利用者は選択肢を一つずつたどって選ぶため、最初の一歩でページが読み込み直されます。フォーカスを先へ飛ばす入力欄には、Shift + Tabキーで戻れません。
• 視覚を使わない スクリーンリーダーの利用者は矢印キーでselectの選択肢を確認しますが、その途中で新しいページが先頭から読み上げられ、理由は何も伝わりません。
• 視覚が限られる selectを拡大して見ている画面拡大ソフトの利用者は、読み込み直しでページの先頭に戻され、元の場所を探し直す必要があります。
• 言語・認知・学習の能力が限られる 何も押していないのにページが変わると、何が起きたか分かりにくく、選択が適用されたことや元に戻す方法に気づけないことがあります。

マークアップは正しく、どの要素にもラベルがあるため、axeなどの自動チェックは何も報告しません。問題は focus や change で動くスクリプトの中にあり、実際にキーを押したときにだけ現れます。マウスでselectをクリックするチェックでは、一つを選んだ結果の読み込み直しが、意図どおりの動作に見えます。「selectでページを更新して」とAIに頼むと、下のような onchange のハンドラーがそのまま書かれがちです。