WCAG 2.2.1: タイミング調整可能

このルールの意味

WCAG 2.2.1「時間制限の調整」は、原則2「操作可能」のレベルA達成基準です。これは、コンテンツによって設定された各時間制限について、少なくとも次のいずれかが真でなければならないと定めています。ユーザーが時間制限に直面する前に、その時間制限をオフにできること。ユーザーが時間制限を広い範囲（デフォルト設定の少なくとも10倍）で調整できること。あるいは、時間が切れる前に、キーを押す、ボタンをクリックするなどの簡単な操作によって時間制限を延長でき、少なくとも20秒前には警告が表示され、延長操作を少なくとも10回行えること。

実務的には、この達成基準は、セッションタイムアウトを課すあらゆるウェブインターフェイス、自動でスライドが進むタイミング付きカルーセル、自動的にクリアまたは送信されるフォーム、チェックアウトページのカウントダウンタイマー、一時停止できないタイミング付き字幕を持つメディアプレーヤー、その他ユーザーがタスクを完了するための時間を制限するあらゆる仕組みに適用されます。ページやアプリケーションがタイマーを設定し、そのタイマーが切れるとコンテンツを削除したり、ユーザーをログアウトさせたり、ユーザーの同意なしに新しい状態へ進めたりする場合は、その制限を調整または延長する手段を提供しなければなりません。

この達成基準はまた、上記の調整メカニズムなしに時間制限を残すことを認めうる3つの重要な例外を定義しています。1つ目はリアルタイムの例外です。時間制限がリアルタイムイベント（ライブオークションや同期型オンライン試験など）の必須の一部であり、時間を調整すると活動自体が成り立たなくなり、代替手段が現実的でない場合です。2つ目は本質的な例外です。時間制限が本質的であり、それを延長すると活動が成り立たなくなる場合です。たとえば、反応速度の測定が目的であるタイムドスキルテストなどです。3つ目は20時間の例外です。時間制限が20時間を超える場合、ユーザーへの負担は最小限と見なされ、調整用のコントロールは不要とされます。

適合（パス）となるのは、時間制限のあるインタラクションが、ユーザーに時間制限を無効化、延長、または調整させる明確なメカニズムを提供している場合です。理想的には、そのメカニズムは時間制限に直面する前に提示されます。不適合（フェイル）となるのは、コンテンツが自動的に期限切れになったり、リダイレクトしたり、ユーザーをログアウトさせたり、上記3つの調整オプションのいずれも提供せずに先へ進めたりし、かつ3つの例外のいずれも適用されない場合です。

なぜ重要か

時間制限は、障害のある人々に不均衡な影響を与えます。スクリーンリーダーに依存するユーザーは、コンテンツを線形に聞き、慣れないインターフェイスを順番に探索しなければならないため、視覚的に閲覧するユーザーよりもページの操作が遅くなることがよくあります。スイッチアクセスデバイス、視線入力ソフトウェア、マウススティック、音声コントロールソフトウェアなどを使用する運動障害のあるユーザーは、フォームフィールドの入力、購入の確定、次のステップへの移動に、通常よりも大幅に長い時間を要する場合があります。ディスレクシア、注意欠如の状態、記憶障害などを含む認知障害や学習障害のあるユーザーは、指示を読む、理解する、応答するために追加の時間を必要とすることがあります。高齢者も同じタスクにより多くの時間を必要とすることが一般的であり、彼らは世界のインターネット人口の中で急速に増加しているセグメントです。

具体的な現実のシナリオを考えてみましょう。脳性まひのある人が、トルコの航空会社のウェブサイトで航空券の予約を完了しようとしています。チェックアウトセッションは、5分間操作がないと自動的に期限切れになります。ユーザーはヘッドポインターデバイスを使ってゆっくりと入力し、氏名、パスポート番号、支払い情報を入力しましたが、その後ページがリロードされ、すべてのデータが消去されてホームページに戻されてしまいます。努力が無駄になるだけでなく、そのサイトへの信頼も損なわれ、購入を最後まで完了できない可能性もあります。これは、デジタル商取引への平等な参加に対する直接的な障壁です。

影響は個々のユーザーにとどまりません。世界保健機関によると、世界で約1.3 billion人が何らかの重大な障害を抱えて生活しています。トルコだけでも、TÜİKの公式統計によれば、日常生活に影響を及ぼす障害のある人は8.5 million人を超えます。時間制限のあるインターフェイスは、あらゆるウェブアプリケーションの潜在的ユーザーベースの、測定可能な一部を排除していることになります。

アクセシビリティの観点を超えて、恣意的な時間制限を取り除いたり、調整可能にしたりすることは、低帯域幅環境のユーザー、一時的に運動機能が損なわれているユーザー（腕を骨折しているなど）、タスクの途中で単に中断されるユーザーにも有益です。ユーザビリティの改善は広範に及び、フォームの離脱率の低下、ECサイトのコンバージョン率の向上、カスタマーサポートへの問い合わせ件数の減少につながり得ます。

関連する axe-core のルール

WCAG 2.2.1には手動テストが必要です。axe-core、Lighthouse、その他類似のエンジンを含む自動化ツールは、タイムリミットがしばしばサーバー側のセッションロジック、非同期で動作するJavaScript、またはサードパーティの統合によって実装されるため、タイミング違反を確実に検出することができません。ツールは、DOMを検査したり静的解析を行ったりするだけでは、ページが5分で期限切れになることや、カルーセルがユーザー入力なしに進むことを観察する手段を持ちません。以下の考慮事項は、テスターが手動で評価しなければならない内容を説明するものです。

• セッションタイムアウト（手動）: テスターは、セッションタイムアウトを待つかシミュレートして、ページが事前警告を表示するか、延長オプションを提供するか、ユーザーに応答のため少なくとも20秒を与えているかを判断しなければなりません。自動ルールでは、実際にタイムアウトを待たずにセッションの長さや警告ダイアログが適切なタイミングで表示されるかどうかを判断することはできません。
• 自動進行するカルーセルやスライダー（手動）: テスターは、カルーセルが自動的に進行するかどうか、そうである場合に一時停止または停止のコントロールが存在し、キーボードで到達可能かどうかを観察しなければなりません。axe-coreはカルーセルコンポーネントの一部のARIA属性の欠如を検出できますが、タイミング付きの進行自体が調整可能かどうかを判断することはできません。
• 自動送信または自動クリアされるフォーム（手動）: フォームが一定時間の非操作後に送信されたり内容がクリアされたりする場合、テスターは観察またはコードレビューによってこの挙動を特定しなければなりません。DOMだけでは、この挙動は自動スキャナーに明らかになりません。
• トランザクションフローにおけるカウントダウンタイマー（手動）: チェックアウトページ、チケット予約フロー、試験環境には、カウントダウンタイマーが含まれることがよくあります。これらのタイマーが本質的（したがって例外）なのか、それとも延長メカニズムを必要とするのかは、実装とビジネスコンテキストの両方に対する人間の判断を要します。

テスト方法

1. 自動スキャンによるベースライン: ページに対して axe DevTools または Lighthouse を実行し、タイミングの問題を悪化させる可能性のある既知のARIAやインタラクティブ要素の違反を特定します。これらのツールは時間制限自体にはフラグを立てませんが、他のアクセシビリティ問題のベースラインを確立するのに役立ちます。Chrome DevToolsでは、Lighthouseパネルを開き、Accessibilityを選択して監査を実行します。axe DevToolsでは、ブラウザ拡張機能を有効にし、Analyzeをクリックして結果を確認します。タイミング特有のルールは表示されず、手動テストが必要であることが確認できます。
2. すべての時間制限を特定する: ページのJavaScriptソース、ネットワークリクエスト、サーバー側のセッション設定を確認し、すべての時間制限を特定します。一般的な場所には、JavaScriptのsetTimeoutやsetInterval呼び出し、バックエンドフレームワークのセッション有効期限設定、Cookieの有効期限値、決済サービスやチャットウィジェットなどのサードパーティウィジェットの設定が含まれます。
3. NVDA + Firefox でのセッションタイムアウト警告のテスト: Firefoxでサイトを開き、NVDAを起動した状態で操作します。複数ステップのフォームや認証が必要なセクションをナビゲートします。セッション警告ダイアログ（または警告が表示されない場合はタイムアウトそのもの）が表示されるまで待ちます。NVDAが警告を自動的にアナウンスすること（理想的にはライブリージョン経由）と、フォーカスされたボタンでEnterまたはSpaceを押すことでフォームデータを失うことなくセッションを延長できることを確認します。
4. VoiceOver + Safari（macOS/iOS）でのセッションタイムアウト警告のテスト: 上記のテストを、VoiceOverを有効にしたSafariで繰り返します。ローターを使ってインタラクティブ要素をナビゲートし、タイムアウト警告がアナウンスされること、および延長用コントロールに20秒の猶予時間内に到達できることを確認します。
5. JAWS + Chrome でのセッションタイムアウト警告のテスト: JAWSを使用してChromeで同様のテストを行います。フォーカスが警告ダイアログに移動すること、JAWSが残り時間と延長オプションを読み上げること、「延長」ボタンをアクティブにするとページのリロードを必要とせずにセッションが維持されることを確認します。
6. キーボードのみ（スクリーンリーダーなし）でのテスト: マウスを無効にし、Tab、Shift+Tab、Enter、Spaceだけでナビゲートします。警告ダイアログにキーボードで到達できること、延長ボタンにフォーカスできること、セッション延長後にフォーカスがフォーム内の適切な位置に戻ることを確認します。
7. カルーセルとメディアのタイミングのテスト: 自動進行するカルーセルを特定します。Tabでカルーセルに移動します。一時停止または停止ボタンが存在し、マウスなしで到達可能であることを確認します。それをアクティブにし、進行が停止することを確認します。カルーセルがユーザー操作後に再開する場合、自動的には再開しないことを確認します。
8. 例外適用性の検証: 見つかった各時間制限について、リアルタイム、本質的、20時間のいずれかの例外が適用されるかどうかを判断します。その理由を文書化します。いずれの例外も適用されず、調整メカニズムも存在しない場合は、これをWCAG 2.2.1の不適合として記録します。

修正方法

警告なしのセッションタイムアウト — 不適切な例

<!-- セッションは5分後に静かに期限切れとなり、警告なしでページがリロードされる -->
<script>
  setTimeout(function() {
    window.location.href = '/session-expired';
  }, 300000);
</script>

警告と延長機能付きセッションタイムアウト — 適切な例

<!-- 期限切れの60秒前に警告し、延長を提供し、ライブリージョン経由でアナウンスする -->
<div
  id='session-warning'
  role='alertdialog'
  aria-modal='true'
  aria-labelledby='warning-title'
  aria-describedby='warning-desc'
  hidden
>
  <h2 id='warning-title'>Your session is about to expire</h2>
  <p id='warning-desc'>
    Your session will expire in <span id='countdown'>60</span> seconds.
    Select "Stay logged in" to continue your session.
  </p>
  <button id='extend-btn' type='button'>Stay logged in</button>
  <button id='logout-btn' type='button'>Log out now</button>
</div>

<script>
  var SESSION_DURATION = 300000; // 5 minutes
  var WARNING_BEFORE   = 60000;  // warn 60 seconds before
  var sessionTimer, warningTimer, countdownInterval;

  function startSessionTimer() {
    warningTimer = setTimeout(showWarning, SESSION_DURATION - WARNING_BEFORE);
    sessionTimer = setTimeout(expireSession, SESSION_DURATION);
  }

  function showWarning() {
    var dialog = document.getElementById('session-warning');
    dialog.hidden = false;
    document.getElementById('extend-btn').focus(); // move focus to dialog
    var seconds = 60;
    countdownInterval = setInterval(function() {
      seconds--;
      document.getElementById('countdown').textContent = seconds;
      if (seconds <= 0) clearInterval(countdownInterval);
    }, 1000);
  }

  function extendSession() {
    clearTimeout(sessionTimer);
    clearTimeout(warningTimer);
    clearInterval(countdownInterval);
    document.getElementById('session-warning').hidden = true;
    startSessionTimer();
    // Return focus to last active element
  }

  function expireSession() {
    window.location.href = '/session-expired';
  }

  document.getElementById('extend-btn').addEventListener('click', extendSession);
  document.getElementById('logout-btn').addEventListener('click', expireSession);
  startSessionTimer();
</script>

コントロールのない自動進行カルーセル — 不適切な例

<!-- スライドは4秒ごとに進行し、一時停止コントロールもキーボードアクセスもない -->
<div class='carousel'>
  <div class='slide active'>Slide 1 content</div>
  <div class='slide'>Slide 2 content</div>
  <div class='slide'>Slide 3 content</div>
</div>

一時停止コントロール付き自動進行カルーセル — 適切な例

<!-- 一時停止ボタンが自動進行を停止し、ボタンラベルは状態を反映して更新される -->
<section aria-roledescription='carousel' aria-label='Featured announcements'>
  <div aria-live='off' aria-atomic='true'>
    <div class='slide active' role='group' aria-roledescription='slide' aria-label='Slide 1 of 3'>
      Slide 1 content
    </div>
    <div class='slide' role='group' aria-roledescription='slide' aria-label='Slide 2 of 3'>
      Slide 2 content
    </div>
    <div class='slide' role='group' aria-roledescription='slide' aria-label='Slide 3 of 3'>
      Slide 3 content
    </div>
  </div>
  <button id='carousel-pause' type='button' aria-pressed='false'>
    Pause slideshow
  </button>
</section>

<script>
  var paused = false;
  var btn = document.getElementById('carousel-pause');
  btn.addEventListener('click', function() {
    paused = !paused;
    btn.setAttribute('aria-pressed', paused.toString());
    btn.textContent = paused ? 'Play slideshow' : 'Pause slideshow';
    // toggle the carousel's auto-advance logic accordingly
  });
</script>

延長オプションのないタイミング付きチェックアウトカウントダウン — 不適切な例

<!-- 10分間のチェックアウトロック。延長は提供されず、本質的な例外にも該当しない -->
<p>Your items are reserved for: <span id='timer'>10:00</span></p>
<!-- タイマーが切れると、カートは静かにクリアされる -->

延長オプション付きタイミングチェックアウトカウントダウン — 適切な例

<!-- 期限切れ前に警告し、ワンクリックで延長を提供する -->
<p>
  Your items are reserved for:
  <span id='timer' aria-live='polite' aria-atomic='true'>10:00</span>
</p>
<div id='extend-notice' hidden role='alert'>
  <p>Your reservation expires in 2 minutes.</p>
  <button type='button' id='extend-checkout'>Give me more time</button>
</div>
<!--
  When timer reaches 2:00, reveal #extend-notice.
  Clicking the button resets the reservation timer via an API call.
  aria-live='alert' ensures screen readers announce the warning immediately.
-->

よくある間違い

• キーボードフォーカス管理のないタイムアウト警告の表示: 警告ダイアログは視覚的には表示されるものの、フォーカスがそこに移動しないため、キーボードのみやスクリーンリーダーのユーザーは、セッションが切れる前に延長できることに気づきません。
• タイムアウト警告への応答時間を20秒未満にする: ログアウトの10秒前に「セッションが期限切れになります」という警告を表示しても、この達成基準は満たされません。延長操作のために少なくとも20秒が利用可能である必要があります。
• 操作が必要なタイムアウトダイアログにrole='alert'を使用する: alertロールは読み上げ専用の通知用です。ユーザー入力を必要とするダイアログには、スクリーンリーダーが応答を要するモーダルとして扱えるよう、role='alertdialog'とaria-modal='true'、aria-labelledbyを使用すべきです。
• 標準的なECカートタイマーに本質的な例外を主張する: ショッピングカート内の商品を10分間だけ確保するのはビジネス上の便宜であり、速度の測定が目的である真の本質的活動ではありません。ここで本質的な例外を適用するのは誤りであり、延長メカニズムが必要です。
• 可視でキーボード到達可能な一時停止ボタンなしでカルーセルを自動進行させる: ホバー時にのみ表示される一時停止ボタンや、Tab順に含まれていないボタンを追加しても、この達成基準は満たされません。コントロールはポインティングデバイスなしで到達可能でなければなりません。
• マウスの動きではタイムアウトカウンターをリセットするが、キーボードイベントではリセットしない: mousemoveイベントで非操作タイマーを延長しながら、keydownやfocusイベントを無視するJavaScriptは、ページ上で積極的に作業しているキーボードのみのユーザーのセッションを、気づかれないうちに期限切れにしてしまいます。
• セッション延長をフルページリロードで行う: ユーザーが「ログイン状態を維持」をクリックした際にページをリロードすると、フォームに入力されていたデータがすべて消えてしまいます。延長は、DOMの状態を保持したまま、バックグラウンドでのAPI呼び出しやCookie更新によって行うべきです。
• ユーザーに設定や公開を行わないsetTimeout値の使用: セッション長を5分にハードコードし、ユーザーがより長い時間を選択できるUIコントロールを提供しないことは、3つの調整メカニズム（オフ、調整、延長）のいずれかが利用可能でない限り、この達成基準に違反します。
• リリース前に実際の支援技術でタイムアウトフローをテストしない: マウスだけでテストする開発者は、警告ダイアログがスクリーンリーダーユーザーにとってアクセス不能であることに気づかないかもしれません。視覚的なテストではフォーカス管理の不備が明らかにならないためです。
• サードパーティ埋め込みウィジェットが自動的に準拠していると想定する: iframeやスクリプトを通じて埋め込まれた決済サービス、ライブチャットウィジェット、予約エンジンは、しばしば独自の時間制限を課します。ページ全体のWCAG準拠の責任は、あなたが制御する埋め込みコンテンツを含め、ページ所有者にあります。

トルコのアクセシビリティ規制との関係

トルコの大統領通達2025/10は、2025年6月21日付官報第32933号で公布され、トルコでデジタルサービスを提供する幅広い公的・民間主体に対し、WCAG 2.2レベルAAに整合したウェブアクセシビリティ要件を義務付けています。WCAG 2.2.1「時間制限の調整」はレベルAの達成基準であり、適合の基礎層に位置します。つまり、対象となる組織が最初に満たさなければならない要件の一つです。

この通達の下で、公的機関・団体（省庁、自治体、大学、国有企業など）は、通達の公布日から1年以内に完全な適合を達成することが求められます。規制の対象となる民間部門の事業者には、適合のための2年間の猶予が与えられています。民間部門の範囲は明示的に広く、ECプラットフォーム、銀行・金融機関、民間病院・医療サービス提供者、200,000人以上の加入者を持つ通信会社、旅行代理店、民間旅客輸送会社、国民教育省（MoNE）の認可の下で運営される私立学校が含まれます。

これらのカテゴリーに属する組織にとって、WCAG 2.2.1の不適合は単なるベストプラクティスの欠如ではなく、規制当局の監視、公式チャネルを通じた苦情、評判の低下を招きうる法的な不適合です。特にこの違反を引き起こしやすいビジネスフローを考えてみてください。時間制限付きカート予約を伴うECチェックアウト、顧客が支払いフォームに入力している最中に静かに期限切れになるオンラインバンキングセッション、運動障害のあるユーザーが登録を完了する前にタイムアウトしてしまう病院の予約システム、契約管理フローからユーザーを自動ログアウトさせる通信事業者のセルフサービスポータルなどです。これらはいずれも、通達で明示的に名指しされている主体タイプの中で十分に起こり得る不適合シナリオです。

組織は、WCAG 2.2.1への準拠を単なる技術的チェックボックスではなく、アーキテクチャレベルで対処すべきデザイン要件として扱うべきです。つまり、セッション管理ポリシー、サードパーティウィジェットの調達要件、UIコンポーネント標準の中で扱い、後付けで修正するのではなく、最初から組み込む必要があります。監査プログラムには、自動スキャンだけでなく、すべての時間制限付きインタラクションの手動テストを含めるべきです。これは、自動ツールが人間の観察なしにはこの種の違反を検出できないためです。