この記事でわかること

  • 選んだり入力したりしただけで画面を切り替えないことを求める、WCAGの達成基準3.2.2
  • 画面の切り替わり(コンテキストの変化)にあたるもの、あたらないもの
  • ラジオボタンと送信ボタンで、利用者が決めてから切り替える書き方
  • 選んだだけで送信する作りを、キーボードで操作したときに起きること

店舗の検索などで、地域のラジオボタンやセレクトボックスを選んだとたんに、ページが移ってしまう作りがあります。マウスで選ぶ人には便利に見えても、キーボードで選択肢を順に見ていく人には、最初の1つ目を通っただけで別のページへ連れていかれる作りになります。この記事では、利用者が選び終えてから、自分の操作でページを移る作りを、アクセシビリティの基準に沿って整理します。

基準・技法・失敗例の説明は、W3CのWCAG 2.2の本文、Understanding、技法G80・H32・H84、失敗例F36・F37を、2026年10月27日に原文で読んで書いています。HTMLの例は作業PCのブラウザで開き、キーボードを使って動きを確かめました。

先に結論: 選ぶのと、移るのを分ける

先に結論を書くと、ラジオボタンやセレクトボックスは選ぶだけにして、ページを移るのは送信ボタンを押したときにします。 選んだだけで移る作りにするなら、使う前にそうなることを知らせます。資料にある動きの扱いは、次のとおりです。

利用者の動き 扱い
ラジオボタンを選ぶ 設定を変える
入力欄に文字を入れる 設定を変える
選択肢を変える 設定を変える
リンクを押す 部品を動かす
送信ボタンを押す 部品を動かす

選んだだけで画面を切り替えないアクセシビリティの基準

WCAGの達成基準3.2.2(On Input)は、レベルAの基準です。どの部品でも、設定を変えただけで自動で画面の切り替わり(コンテキストの変化)が起きないことを求めています。ただし、利用者が部品を使う前に、その動きを知らされている場合は除かれます。

W3Cの解説では、この基準のねらいを、データを入れたり部品を選んだりしたときの結果を、予想できるものにすることだとしています。目の見えない人や見えにくい人は、新しいウィンドウが開いたことなどに気づきにくく、認知に障害のある人は、思わぬ切り替わりで操作を続けられなくなることもあるとしています。

画面の切り替わりにあたるもの

WCAGの用語の定義では、画面の切り替わり(コンテキストの変化)は、利用者が気づかないまま起きると、ページ全体を一度に見られない人を混乱させる大きな変化だとしています。新しいウィンドウを開く、別の部品へフォーカスを移す、新しいページへ移る、ページの内容を大きく並べ替える、が例に挙げられています。

一方で、内容の変化がいつも切り替わりになるわけではありません。資料では、開いたり閉じたりする見出しの一覧や、タブの切り替えのような変化は、フォーカスなどが変わらなければ切り替わりにはあたらないとしています。Understandingの例でも、予定の種類を選ぶと入力欄が増えるだけのフォームは、全体の作りが同じなので問題ないとしています。

設定を変えることと、部品を動かすこと

この基準が扱うのは、部品の「設定を変える」ときです。W3Cの解説では、チェックボックスにチェックを入れる、テキストの欄に文字を入れる、リストの選択肢を変える、は設定を変えることで、リンクやボタンを押すことは設定を変えることではないとしています。

送信のボタンを押して新しいページへ移るのは、部品を動かすことにあたります。技法G80では、送信ボタンはフォームの内容を送るためのもので、画面の切り替わりを始めるのにふさわしく、利用者を混乱させない部品だとしています。

書き方の例: ラジオボタンと送信ボタン

次のHTMLは、技法H32・H84の考え方に沿って、店舗の一覧を地域で絞る形で書いたものです。地域はラジオボタンで選び、「店舗を表示」のボタンを押したときに初めてページを移ります。

<form action="/stores" method="get">
  <fieldset>
    <legend>表示する地域</legend>
    <input type="radio" id="kanto" name="area" value="kanto" checked>
    <label for="kanto">関東</label>
    <input type="radio" id="kansai" name="area" value="kansai">
    <label for="kansai">関西</label>
    <input type="radio" id="kyushu" name="area" value="kyushu">
    <label for="kyushu">九州</label>
  </fieldset>
  <p><button type="submit">店舗を表示</button></p>
</form>

セレクトボックスを使う場合も同じで、技法H84では、select要素の横にボタンを置き、ボタンを押したときに選んだ値で動くようにしています。利用者は選択肢を見比べたり、選びまちがえたりしても、ボタンを押すまでは何も起きません。

手順: キーボードで選んで、何も起きないかを確かめる

技法G80・H32・H84と失敗例F37の確かめ方に沿った手順です。

  1. フォームを探す: ページの中のフォームを書き出します
  2. 送信ボタンを確かめる: それぞれのフォームに、送信のボタンがあるかを見ます
  3. キーボードで選ぶ: Tabキーでラジオボタンやセレクトボックスへ移り、矢印キーなどで選択肢を変えて、ページが移ったり新しいウィンドウが開いたりしないかを見ます
  4. ボタンで動くか: 送信ボタンを押すと、そのとき選んでいた値で動くかを確かめます
  5. 最後の欄を出る: 入力欄をすべて埋めて最後の欄からTabキーで出たときに、自動で送信されないかを確かめます

試した結果

上のHTMLの例を、送信先だけを作業PCの中のページに替えて、作業PCのChrome(ヘッドレス)で開き、キーボードの操作を送って、ページの移り方を読み取りました。

  • 「関東」にフォーカスを置いて下矢印キーを押すと、「関西」が選ばれ、ページは移りませんでした
  • もう一度下矢印キーを押すと「九州」が選ばれ、このときもページはそのままでした
  • Tabキーで「店舗を表示」のボタンへ移り、Enterキーを押すと、そこで初めて「area=kyushu」を付けたページへ移りました

あわせて、ボタンを外し、ラジオボタンを選んだとたんに送信する書き方(onchangeでフォームを送る形)も試しました。「関東」から下矢印キーを1回押しただけで、「area=kansai」を付けたページへ移ってしまい、「九州」までたどり着けませんでした。

確かめた環境は、Mac の作業PCの Google Chrome 156 で、ウィンドウを開かずに動かしています。画面読み上げソフトや、ほかのブラウザでは試していません。Macのこのブラウザでは、閉じたセレクトボックスで下矢印キーを押しても選択肢は変わらなかったため、選択肢を順に見ていく動きはラジオボタンで確かめています。

自分で直すか、相談するかの判断

判断の目安は、「選んだときに、ページの外側まで変わるか」です。選んだ結果がページの一部の表示だけで、フォーカスもそのままなら、切り替わりにはあたりません。ページが移る・ウィンドウが開く作りなら、送信ボタンを足すことを考えます。

選んだだけで動くのが、サイトの使い方の前提になっている場合(絞り込みの仕組みなど)は、送信ボタンを足すと画面の作りや動きが変わります。サイトを作った人や、Webデザインを教わっている講師と相談して決めます。

つまずきやすいところ

  • ラジオボタンで選んだだけで移る: 失敗例F37では、ラジオボタンなどの選択を変えたとたんに、知らせずに新しいウィンドウを開く作りを、満たさない例にしています。知らせを付けても、キーボードで選択肢を順に移るだけで動いてしまうため、キーボードの操作の基準も満たさない可能性が高いとしています
  • セレクトボックスで選んだだけで送信する: 失敗例F36の例では、キーボードで操作する人は、1つ目の選択肢から先へ進めないとしています
  • 最後の欄を出たら送信する: F36では、フォームの説明を読みに戻ろうとしてフォーカスを外しただけで、送信されてしまうことを問題にしています
  • 選択肢のまとまりに名前を付けない: ラジオボタンのまとまりには、fieldset要素とlegend要素で見出しを付けます。ラベルの付け方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法で紹介しています
  • キーボードで最後まで操作できるかを見ていない: Tabキーと矢印キーだけで、選んで送るところまで進めるかを確かめます。確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法にまとめています
  • 送信した後の知らせ: 送信ボタンを押した後に入力のまちがいが見つかったときの伝え方は、Webデザインで入力エラーを分かりやすく伝える方法が参考になります

まとめ

  • WCAGの達成基準3.2.2は、選ぶ・入力するなど設定を変えただけで、知らせのないまま画面を切り替えないことを求めています
  • ページを移る・ウィンドウを開くなどの切り替わりは、送信ボタンを押したときに起こします
  • ページの一部の表示が変わるだけなら、切り替わりにはあたりません
  • キーボードで選択肢を順に変えて、何も起きないかを確かめます