トピックを検索
時間がたつと自動で再読み込みや転送をするページ
注文完了ページにmeta refreshがあり、注文番号を読み終えたかどうかに関係なく、開いてから10秒でショップのトップへ移動させます。
<meta http-equiv="refresh" content="10; url=/"> 問題
スクリーンリーダーの利用者、画面拡大ソフトの利用者、読むのがゆっくりな人は、注文番号を読む前に、注文完了ページから移動させられます。
文具店の購入手続きは、注文完了ページで終わります。「ご注文ありがとうございます。注文番号は4821です。10月23日（金）にお届けします」。最後の行には「10秒後にショップへ戻ります」とあり、実際に10秒たつと、ブラウザーは自動でショップのトップページへ移ります。利用者が行き止まりのページに取り残されないようにと、ページのheadに1行入れてあるためです。
ちらっと見て満足する人には、10秒で十分です。しかし、スクリーンリーダーの利用者は、ページのタイトルと見出しを聞いたあと、注文番号の読み上げにたどり着く前にトップページの読み上げが始まってしまうことがあります。注文番号もお届け日も聞けないまま、ページが移ります。画面拡大ソフトで拡大している人は、まだ注文番号を探しています。ヘッドポインターで番号をコピーしている人は、選択している途中です。タイマーを止める方法も、時間を延ばす方法もページにはありません。
達成基準2.2.1「タイミング調整可能」は、コンテンツが設定するすべての時間制限を対象にしています。一定時間でページが自動で移動するのも時間制限の一つです。ページで知りたいことは、タイマーが切れる前に読み取るしかありません。時間制限には、利用者が解除できるか、既定の10倍以上に調整できるか、警告を受けてから20秒以上の猶予のうちに簡単な操作で延長でき、それを10回以上繰り返せるか、のどれかが求められます。20時間より長い制限、オークションのようなリアルタイムのイベント、その活動に欠かせない制限は例外です。注文完了ページはどれにも当たりません。「10秒後にショップへ戻ります」は警告にはなっていますが、延長する手段はありません。
W3Cは、こうした作り方を2.2.1の失敗例として挙げています。F40は、この例のように、遅延の後に別のページへ転送するmeta refreshです。F41は、1分ごとに再読み込みする試合速報のページのように、同じページを再読み込みするmeta refreshです。F58は、同じ指示をサーバーが Refresh HTTPヘッダーとして送るもので、ブラウザーはmeta要素と同じように従います。タイマーから location.href を設定するスクリプトも、F40が述べる転送と同じ結果になります。遅延が0のmeta refreshは、誰かが読み始める前にすぐ転送するため、基準を満たします。
注文の確認がいちばん必要な人ほど、タイマーに間に合いません。注文確認のメールは後で届くかもしれませんが、注文番号やお届け日を読むつもりだったのはこのページで、ショップはそこから利用者を移してしまいます。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダーはページを先頭から読むため、10秒では注文番号にたどり着かないうちに、ショップのトップページの読み上げが始まることがあります。
- 視覚が限られる 画面拡大ソフトの利用者はページを一部分ずつ見ていくため、ページが残っている間に注文番号を見つけきれません。
- 言語・認知・学習の能力が限られる 読むのがゆっくりな人や、念のため読み返す人は、注文番号やお届け日を把握する前に、ページが移ってしまいます。
- 手の操作が限られる スイッチやヘッドポインターで注文番号を選んでコピーするには10秒以上かかることがあり、その途中でページが移ってしまいます。
axeの meta-refresh は、遅延が0秒より長く20時間以下のmeta refreshを報告するため、このページは見つかります。ほかの二つの方法は検出できません。Refresh ヘッダーはページの中にないため、この診断ではレスポンスのヘッダーを読み、ew:refresh-header として報告します。スクリプトのタイマーは動いたときにしか現れず、ページを読み込んで離れるスキャンは、その前に終わっていることがあります。そこで、この診断ではページが自動で始めるタイマーを見張り、ページを再読み込みしたり別のページへ移したりするものを確認に回します（ew:timed-reload-manual-check）。実際にページが移るかどうかは、人が確かめるしかないためです。AIアシスタントに「ショップに戻すお礼のページ」を頼むと、このmeta要素を書くことがあり、meta要素は不適合だと伝えると、setTimeout(() => { location.href = '/'; }, 10000) に書き換えることがあります。これでスキャンの警告は消えますが、問題は残ります。
試してみる
注文を確定したら、ページが移動する前に注文完了ページを読み、注文番号を書き留めてみてください。
注文完了ページは、開いてから実際に10秒たつと、何をしていてもショップへ戻ります。そのあと、スクリーンリーダーが何を読んでいるかも確かめてください。
問題あり 修正できますか？
ご注文内容の確認
ドット方眼ノート × 1、£14
お届け日：10月23日（金）
スクリーンリーダーの読み上げ：
（注文を確定する）
修正方法
利用者が準備できたときにリンクでページを離れられるようにし、移転したページはサーバーですぐに転送します。
- 1meta refresh、Refreshヘッダー、スクリプトのどれでも、タイマーでページを再読み込みしたり転送したりしない。
- 2注文完了ページは、次に進むリンクで終える。
- 3移転したページは、何かを表示する前に、サーバーですぐに転送する。
<head> <title>Order placed – Northfold</title> <meta http-equiv="refresh" content="10; url=/"></head><body> <main> <h1>Thank you for your order</h1> <p>Your order number is 4821.</p> <p>Your parcel will arrive on Friday 23 October.</p> <p>You will be taken back to the shop in 10 seconds.</p> </main></body><head> <title>Order placed – Northfold</title></head><body> <main> <h1>Thank you for your order</h1> <p>Your order number is 4821.</p> <p>Your parcel will arrive on Friday 23 October.</p> <p> <a href="/">Continue shopping</a> </p> </main></body>ブラウザーは、利用者が何をしていても、注文完了ページを開いてから10秒でトップページへ移動します。ページにはそう書かれていますが、止めることも、時間を延ばすこともできません。
meta要素をなくせば、ページは利用者が自分で離れるまで残り、準備ができたらリンクでショップへ戻れます。行き止まりのページに利用者を残さないという、タイマーの目的も果たせます。変更は最小限で、1行を消し、最後の文をリンクにするだけです。
タイマーで再読み込みするページ。 試合速報、発車案内、配送状況の追跡のように <meta http-equiv="refresh" content="60"> を持つページは、1分ごとに再読み込みし、そのたびにスクリーンリーダーは先頭から読み直します。新しい内容は、利用者が求めたときに読み込めるリンクやボタンで提供します。ページが自動で最新の状態を保つ必要があるなら、変わる部分だけを取得してその場に書き込み、その前に一時停止ボタンを置きます。ほかの内容と並んで自動で更新される部分は、2.2.2「一時停止、停止、非表示」の対象にもなるためです。
移転したページ。 「このページは移転しました。5秒後に新しいページへ移動します」も同じ失敗です。代わりに、サーバーで301か308のステータスを返して転送します。これなら何かが表示される前に済みます。
Refreshヘッダー。 レスポンスの Refresh: 10; url=/ は、サーバーから送るmeta要素にあたり、フレームワークのレスポンス処理やWebサーバーの設定で付けられます。これも同じように削除します。ページのソースには何も現れないため、ヘッダーはブラウザーのネットワークパネルで確認してください。
カウントダウンでは解決しません。 残りの秒数を数えて表示したり、残り時間を書いたりしても、ページが移動することは伝わりますが、止める手段がないことは変わりません。タイマーに表示を足すのではなく、タイマーそのものをなくしてください。
セッション。 一定時間でログアウトさせたり、「セッションの有効期限が切れました」のページへ移したりするのは時間制限で、別のガイドで扱います：警告も延長もないセッションタイムアウト。AAAの3.2.5「要求による変化」はさらに踏み込み、コンテキストの変化は利用者が求めたときにだけ起こるか、そうした変化を利用者が無効にできることを求めています。これは別のトピックで扱います。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ページのテンプレート、購入手続き、サーバーのヘッダーを変更した際は、再度確認します。
制限
このガイドが扱うのは、一定時間の後にページが自動で再読み込みや転送をする場合です。自動で動いたり流れたりする内容は一時停止できない、流れる文字、カルーセル、アニメーションで、利用者をログアウトさせるセッションは警告も延長もないセッションタイムアウトで扱います。注文完了ページの前に表示される、ほかの事業者の決済や予約のページも同じ購入手続きの一部なので、時間で戻る仕組みがないか確認してください。ページを読み込んだときに何を読み上げるかはスクリーンリーダーによって違うため、利用者が使っているスクリーンリーダーで確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。