この記事でわかること

  • 時間制限について定めた、WCAGの達成基準2.2.1の内容
  • 止める・長くする・延長する、の3つの満たし方と、例外になる場合
  • 時間切れの前に知らせて、ボタン1つで延長できる画面の書き方と、ブラウザで試した結果
  • 自分のサイトの時間制限を見直す手順

入力フォームを書いている途中で時間切れになり、入れた内容が消えてしまう。そんな作りは、入力に時間のかかる人にとって大きな壁になります。この記事では、サイトが設けた時間制限を、利用者が止めたり、長くしたり、延長したりできるようにする作り方を、WCAGの達成基準2.2.1に沿って見ていきます。

読んだ資料は、達成基準2.2.1の解説(Understanding)と、技法G198・G133、失敗例F40で、どれもW3Cの公式のものです。2026年10月31日に原文を読んで確かめました。記事の中の画面の例は、作業PCのChromeで、時間を短くして動きを試しました。ツールやスクールを選んで勧めることはしません。

まず結論: 時間制限は「止める・長くする・延長する」のどれかに

サイトが決めた時間制限には、利用者が止める・長くする・延長する、のどれかの手段を用意します。 解説では、この並びの順に利用者の助けになるとしています。

満たし方 中身
止める 時間切れの前に、時間制限をなくせる
長くする 時間切れの前に、既定の10倍以上まで延ばせる
延長する 前に知らせ、20秒以上の余裕と簡単な操作で延長できる。10回以上
例外 リアルタイムの催し・欠かせない場合・20時間より長い場合

時間制限に関わる基準(2.2.1)

WCAG 2.2の達成基準2.2.1(レベルA)は、コンテンツが決めた時間制限のそれぞれについて、止める・調整する・延長する、のどれかができるようにすることを求めています。解説では、障害のある人が、入力フォームを埋めたり内容を読んだりするのに、より長い時間を必要とすることがあるためだと説明しています。

ここでいう時間制限には、入力の待ち時間だけでなく、決まった時間がたつとページが自動で更新されたり、内容が変わったりする仕組みも含まれます。動いたり流れたりする内容も、読むための時間に制限をかけるものとして扱われます。

止める・長くする・延長するの3つ

  • 止める: 時間制限にぶつかる前に、利用者がそれをなくせるようにします。技法G198では、ニュースの見出しが1分ごとに自動で入れ替わるページの先頭に、更新を止めるリンクを置く例を挙げています
  • 長くする: 時間制限にぶつかる前に、利用者が既定の10倍以上まで延ばせるようにします。技法G133では、何ページもある入力フォームの最初のページに、時間を延ばすチェックボックスを置く方法を示しています
  • 延長する: 時間切れの前に知らせ、少なくとも20秒の余裕を持たせて、簡単な操作で延長できるようにします。延長は少なくとも10回できるようにします

例外になる場合と、時間制限に当たらない場合

基準は、次の3つを例外としています。オークションのように、時間制限がリアルタイムの催しに欠かせず代わりがない場合、時間制限が欠かせず延ばすと活動そのものが成り立たない場合、20時間より長い場合です。

また解説では、新しいメールのお知らせが数秒で消えても、受信箱で同じことを確かめられるなら、時間制限にはならないとしています。失敗例F40は、metaタグのrefreshで、何秒か後に別のページへ自動で移る作りです。秒数を0にしてすぐ移す場合は、問題にならないとしています。

書き方の例: 時間切れの前に知らせて延長できるようにする

次のHTMLは、操作がないまま20分たつと時間切れになる画面で、その2分前に知らせを出し、ボタン1つで延長できるようにした例です。知らせには、ほかの操作を止めて応答を求めるダイアログの役割(alertdialog)を付け、出たときにボタンへフォーカスを移しています。

<p id="timer-note">操作がないまま20分たつと、入力した内容は消えます。</p>
<div id="timeout-warning" role="alertdialog" aria-labelledby="tw-text" hidden>
  <p id="tw-text">あと2分で時間切れになります。続けますか?</p>
  <button type="button" id="extend">時間を延長する</button>
</div>
<script>
  const LIMIT = 20 * 60 * 1000;  // 時間切れまで(20分)
  const WARN = 2 * 60 * 1000;    // 何分前に知らせるか(2分)
  const box = document.getElementById("timeout-warning");
  const note = document.getElementById("timer-note");
  let timers = [];
  function start() {
    timers.forEach(clearTimeout);
    timers = [
      setTimeout(() => { box.hidden = false; document.getElementById("extend").focus(); }, LIMIT - WARN),
      setTimeout(() => { note.textContent = "時間切れになりました。"; }, LIMIT),
    ];
  }
  document.getElementById("extend").addEventListener("click", () => {
    box.hidden = true;
    start();
  });
  start();
</script>

延長の回数に上限は設けていないので、10回以上延長できます。知らせを出してから時間切れまで2分あり、基準の20秒より長くしています。

手順: 自分のサイトの時間制限を見直す

技法と失敗例の確かめ方をもとに、見直しの順番を整理しました。

  1. 時間制限を洗い出す: 入力の時間切れ・ログインの時間切れ・自動で切り替わる画面・自動の更新や移動を書き出します
  2. 例外かどうかを分ける: リアルタイムの催しか、欠かせない時間制限か、20時間より長いかを確かめます
  3. 満たし方を選ぶ: できれば止める、次に長くする、それも難しければ延長する、の順に考えます
  4. 知らせの余裕を確かめる: 延長するなら、知らせてから時間切れまで20秒以上あり、10回以上延長できるかを試します
  5. 自動の移動を探す: metaタグのrefreshで秒数を指定した移動がないかを、ソースで確かめます

試した結果

例のHTMLは、外からはつながらない手元の小さなWebサーバーに載せて、ヘッドレスのChromeで動かしました。待ち時間が長いため、試すときだけ、時間切れまでを4秒、知らせを時間切れの2秒前に縮めました。

  • 開いた直後は、知らせは隠れたままでした
  • 2秒たつと知らせが出て、フォーカスは「時間を延長する」ボタンに移りました。ブラウザのアクセシビリティの情報でも、役割はalertdialog、ボタンの名前は「時間を延長する」でした
  • ボタンを押すと知らせは消え、最初の4秒を過ぎても時間切れにはなりませんでした。延長は12回続けて試し、どれも同じように動きました
  • ボタンを押さずに待つと、4秒で「時間切れになりました。」に変わりました

試したのは作業PC(Mac)のGoogle Chrome 156の1種類で、画面は出していません。読み上げソフトでの聞こえ方と、ほかのブラウザでの動きは確かめていません。

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

目安は、「その時間制限を、画面の作りだけで変えられるか」です。自動で切り替わる画面や、知らせのダイアログは、ページのHTMLとJavaScriptで直せます。

ログインの時間切れのように、サーバー側の設定や、安全の決まりで時間が決まっている場合は、画面だけでは変えられません。どこまで延ばしてよいかは、サイトの安全を担当する人やシステムを作った人と相談して決めます。知らせのダイアログを自分で組むのが不安なら、Webデザインを学べる講座で、作った画面を講師に確かめてもらう方法もあります。

つまずきやすいところ

まとめ

  • サイトが決めた時間制限には、止める・長くする・延長する、のどれかを用意します
  • 延長するなら、時間切れの前に知らせ、20秒以上の余裕と簡単な操作で、10回以上延長できるようにします
  • リアルタイムの催し・欠かせない場合・20時間より長い場合は例外です
  • 知らせを出したら、延長のボタンへフォーカスを移します