Skip to content

テクニック F36:達成基準 3.2.2 の失敗例 － フォームの最後のフィールドに値を与えたときに、自動的にフォームを送信し、事前の予告なしに新しいコンテンツを提示している

このテクニックについて

このテクニックは 3.2.2: 入力時 (失敗) に関連する。

この失敗例は、HTML に適用される。

解説

利用者がすべてのフィールドに入力し終わるか、最後のフィールドからフォーカスが外れると、自動的に送信されるように設計されたフォームが多くある。この方法には二つの問題がある。まず、障害のある利用者で前後関係の情報を必要としている人が、フォームの記入方法や、他のテキストに移動するためにフィールドからフォーカスをはずしてしまい、意図せずに送信してしまう場合がある。もう一つは、いくつかのフォームの要素において、それぞれの項目の値がキーボードで移動している間に変化してしまい、誤って送信してしまうことである。送信ボタン及び Enter キーによる標準的なフォームのふるまいに依存している方がよい。

事例

事例 1

この失敗例では、利用者が三つのフィールドで構成される電話番号のフォームの最後のフィールドから離れたときにフォームを送信する。フォームは、利用者が編集を終えてフィールドから離れたときに、たとえタブ順序で前に戻ったとしても送信される。開発者はフォームを送信するためにこのテクニックを使用すべきではなく、送信ボタンやフォームのデフォルトのふるまいである、利用者がテキストフィールドで Enter キーを押したときに送信されるようにすべきである。

<form method="get" id="form1">
   <input type="text" name="text1" size="3" maxlength="3"> - 
   <input type="text" name="text2" size="3" maxlength="3"> - 
   <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
 </form>

事例 2

この失敗例は、利用者がメニューから項目を選択すると、事前の警告なくフォームを送信する。メニューから項目が選択されると、直ちにフォームが送信される。キーボード利用者は、最初のメニュー項目を超えて移動することができない。全盲の利用者や手の震えがある利用者は、ドロップダウンメニューから項目を選ぶときに間違いを起こしやすく、修正する前に間違った行き先に連れて行かれてしまう。

<form method="get" id="form2">
   <input type="text" name="text1">
    <select name="select1" onchange="form2.submit();">
      <option>one</option>
      <option>two</option>
      <option>three</option>
      <option>four</option>
    </select>
  </form>

検証

手順

  1. ページ上のすべてのフィールドに、上から順にデータを入力する。
  2. 最後のフィールドにデータを入力して抜け出す (タブで抜ける)。
  3. 最後のフィールドから離れることで、コンテキストの変化が起こるかどうかをチェックする。

期待される結果

  • チェック 3 が真である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。
Back to Top