十分な時間のガイドライン
2.2.1 タイミング調整可能 (レベル A)
コンテンツの利用に制限時間を設けない(または延長できるようにする)
作成日: 2024.4.10 / 最終修正日: 2026.5.10
この達成基準は、文章を読むのに時間がかかる利用者や、入力操作に時間が必要な利用者が、手続きの途中で時間切れになってしまうのを防ぐことを目的としています。原則として制限時間を設けず、セキュリティなどの理由で必要な場合は、利用者が時間を延長できる仕組みを提供します。
実践すべきこと
制限時間の回避と代替手段
- 原則として、ページ上の操作や入力に制限時間を設けない。
- セッションの時間切れなどセキュリティ上やむを得ず制限時間を設ける場合は、時間切れになる前に利用者に警告を出し、スペースキーを押すなど簡単な操作で時間を延長できるようにする。
運用者への注意
時間切れ(タイムアウト)設定の見直し
- オンラインショップの決済やチケット予約などで、「あと〇分で確保した座席がキャンセルされます」といった制限がある場合、その時間が「入力に時間がかかる人でも入力しきれる十分な長さか」、あるいは「延長が可能か」をシステム担当者と確認する。
開発者への注意
延長アクションの提供
-
制限時間が迫った際に、JavaScriptでモーダルダイアログなどを表示し、「セッションを延長しますか?」というボタンを提供する。このボタンはキーボード(
TabキーやEnterキー)ですぐに操作できるようにフォーカスを適切に管理する。
今のWeb環境で気をつけたい点
- オークションやリアルタイム対戦:オークションの入札終了時間や、リアルタイムのオンラインテストなど、「その時間に終わることに意味がある(不可欠な例外)」場合は、この基準の対象外となります。
- 自動ログアウト: 操作がないままセッションが切れて入力内容が失われると、入力に時間を要する利用者の負担が大きくなります。事前の警告や延長の手段を検討するとよいです。
参考リンク
2.2.2 一時停止、停止及び非表示 (レベル A)非干渉
動きのあるコンテンツや自動再生メディアをコントロールできるようにする
作成日: 2024.4.10 / 最終修正日: 2026.5.10
この達成基準は、画面の一部が絶えず動いていると、気が散って文章に集中できなくなったり、気分が悪くなったりする利用者のための基準です。自動で動くカルーセル(スライダー)や背景動画などを、利用者の意思でいつでも止められる環境を提供することを目的としています。
実践すべきこと
動きをコントロールする機能の提供
- 「自動で開始」し、「5秒より長く続き」、かつ「他のコンテンツと並行して表示される」動き(アニメーション、点滅、スクロールなど)に対しては、一時停止、停止、または非表示にするための仕組みを実装する。
運用者への注意
自動スライダー(カルーセル)の運用
- トップページ等で自動的に切り替わる画像スライダーを設置する場合は、「一時停止ボタン」などをわかりやすい位置に配置する。
開発者への注意
一時停止ボタンの実装
-
動画やアニメーションを止めるためのコントロール要素には
<button>要素を使用するなどして、ポインタ操作だけでなくキーボードでも操作できるように実装する。
CSSやOSの設定への対応
-
利用者がOSやブラウザの設定で「視差効果を減らす」などを有効にしている場合、CSSの
@media (prefers-reduced-motion: reduce)を用いて、アニメーションを最初から無効化する(または動きを最小限にする)実装が推奨される。
今のWeb環境で気をつけたい点
- 背景動画(ヒーロー動画): ファーストビューでループ再生する背景動画は「5 秒より長く続く」動きに該当しやすいです。画面の一部にでも、動きを止める・静止画に切り替える操作をキーボードでも行えるようにするとよいです。
- ローディングアニメーション:ページの読み込み中に表示されるローディングアイコンの回転などは、「ページの読み込み」という行為自体の一部であり、読み込みが終われば消えるため、一般的には例外として扱われます。
参考リンク
2.2.3 タイミング非依存 (レベル AAA)
制限時間に左右されず、利用者が自分のペースで操作を完了できるようにする
作成日: 2024.4.10 / 最終修正日: 2026.5.27
この達成基準は、文字の入力や文章の理解に時間がかかる利用者が、時間切れによって操作を途中で終えざるを得なくなるのを防ぐための基準です。レベルAの「2.2.1 タイミング調整可能」では「制限時間を延長できるボタン」などがあれば許容されていましたが、このレベルAAAではさらに、操作の完了に制限時間を設けない(無期限にする)ことを求めています。
実践すべきこと
時間制限をなくす設計
- ウェブサイト上のあらゆる手続き、フォーム入力、コンテンツの閲覧において、システム側から制限時間を設けない。
例外事項(適用されないもの)
- リアルタイムのオークション、対戦型のオンラインゲーム、生放送の配信など、その性質上どうしても時間が不可欠なイベント。
運用者への注意
自動ログアウト等の見直し
- 「一定時間操作がないと自動的にログアウトし、入力内容が消える」といった仕様がある場合、それが本当に必要な要件なのかを見直し、利用者に過度なプレッシャーを与えていないかを検討する。
開発者への注意
セッションの永続化とデータの保持
- 利用者がフォーム入力の途中で長時間離席したり、別のタブで調べ物をしたりして時間が経過した場合でも、入力したデータが失われず、いつでも再開できるようにバックエンドやローカルストレージを用いたデータ保持の仕組みを設計する。
今のWeb環境で気をつけたい点
- レベルAAAの難易度と優先度: 銀行のオンライン取引や、チケットの予約システムなどでは、セキュリティ保護や在庫確保の観点から「セッションの時間切れ(タイムアウト)」をなくすことは難しいです。そのため、この基準は「レベルAAA」に設定されています。まずは事前の警告と延長を可能にする 2.2.1(タイミング調整可能)を満たすことが優先ですが、長文の入力が必要なアンケートや、利用者が自分のペースで学ぶeラーニング教材などにおいては、時間制限をなくす配慮が学習効果や完了率を高めます。
- 「保存して後で再開」機能による実質的な解決: セキュリティ要件の都合でどうしてもセッションを切る必要がある場合でも、入力中の内容を「下書き」として自動保存する機能を実装しておけば、利用者は時間切れを恐れることなく作業できます。これは、システム的には時間が存在していても、利用体験としては「タイミング非依存」に近い状態を作り出せる手段となります。
参考リンク
2.2.4 割り込み (レベル AAA)
作業中の画面に突然出てくる通知やポップアップを、利用者がオフまたは後回しにできるようにする
作成日: 2024.4.10 / 最終修正日: 2026.5.27
この達成基準は、一度集中が途切れると作業に戻るのが難しい利用者や、スクリーンリーダーを使用して画面の変化を把握する利用者が、意図しない画面の更新やポップアップによって作業を妨げられないようにすることを目的としています。利用者が自分の意思で通知をコントロールできる「集中できる環境」を提供するための基準です。
実践すべきこと
割り込みの延期または抑制の提供
- ウェブサイト上で発生するコンテンツの自動更新、通知、ポップアップ画面などの「割り込み」に対して、利用者がそれらを「延期、後で確認する」または「そもそも表示させないようにする」できる仕組みを提供する。
例外事項(緊急事態)
- 災害情報など生命や財産に関わる警告や、今すぐ対応しないと入力データが消えてしまうような重大なシステムエラーなど、「緊急事態」に関わる割り込みは、例外として表示させてもよい。
運用者への注意
マーケティング系ポップアップの抑制
- 記事を読んでいる最中に突然「メルマガに登録しませんか?」「今ならクーポンプレゼント!」といったモーダル画面を割り込ませる手法は、利用者のタスクを妨げやすいため、多用しないように運用ルールを見直す。
開発者への注意
「通知センター」や「集中モード」の設計
- お知らせなどの情報を画面の中央に自動表示するだけにせず、ヘッダーの「通知アイコン」にバッジをつけるなど、利用者が自分のタイミングで見に行ける設計(プル型)を採用する。
- マイページなどの設定画面に「お知らせのポップアップ通知を受け取る / 受け取らない」を選択できる機能を実装する。
今のWeb環境で気をつけたい点
- レベルAAAの難易度と優先度: チャットボットの自動起動や、離脱防止のポップアップなど、現在のWebマーケティングで効果的とされる施策の多くがこの「割り込み」に該当します。サイト全体の機能を制限する形になるため、この基準は「レベルAAA」に設定されています。まずは自動で動くカルーセルなどを止められる 2.2.2(一時停止、停止、非表示)を満たすことが優先ですが、長文の執筆ツール、学習アプリ、試験システムなど、利用者の「集中しやすさ」が成果に直結するサービスでは、通知をオフにできる機能(集中モードなど)の提供が重要になります。
- OSレベルの「おやすみモード」との関係: 現在は端末のOS自体に「通知をミュートする機能(おやすみモードや集中モード)」が備わっていますが、Webサイトが独自にHTMLとJavaScriptで描画している画面内ポップアップにはOSの設定が効きません。そのため、WebサイトやWebアプリ自身が、割り込みをコントロールする責任を持つ必要があります。
参考リンク
2.2.5 再認証 (レベル AAA)
時間切れでログアウトされても、再ログインすれば「入力中のデータ」が消えずに作業を再開できるようにする
作成日: 2024.4.10 / 最終修正日: 2026.5.27
この達成基準は、文字の入力や文章の理解に時間がかかる利用者をサポートすることを目的としています。セキュリティ上の理由などで一定時間後に自動でログアウトした場合でも、利用者がもう一度ログインすれば、先ほどまで入力していたデータが失われず、そのまま作業を継続できるようにする基準です。
実践すべきこと
再認証後の状態復元
- ログインが必要なセッションにおいて制限時間が切れ、利用者が再認証を求められた場合、再認証が完了した後に、フォームの入力内容など時間切れになった時点の作業状態がそのまま復元される仕組みを提供する。
運用者への注意
「やり直し」のリスク評価
- 会員登録、オンラインショッピングの決済、長文のアンケートなど、入力項目が多いページにおいて「もし時間切れになったらデータがすべて消えてしまう仕様になっていないか」をテスト環境で確認する。
開発者への注意
データの安全な一時保存と復元
- 時間切れ(タイムアウト)が発生する前に、バックグラウンドの通信を利用して入力途中のデータをサーバーに自動保存するか、ブラウザのローカルストレージ(セキュアな情報以外)に一時保存する仕組みを構築する。
- 再ログイン後のリダイレクト処理を工夫し、トップページに戻すのではなく、利用者が元いたページに正しく送り返すように設計する。
今のWeb環境で気をつけたい点
- レベルAAAの難易度と優先度: 個人情報や機密データをシステム側で一時保存し、再認証後に安全に復元する仕組みは、共用端末での情報漏洩リスクなどのセキュリティ課題と隣り合わせであり、「レベルAAA」に設定されています。まずは 2.2.1(タイミング調整可能)でセッション延長の警告を出すことが優先ですが、確定申告のような複雑な申告フォームや、オンライン試験など、データの喪失が利用者に大きな負担を与えるシステムでは、この「やり直しの回避」が有効な救済措置となります。
参考リンク
2.2.6 時間切れ(タイムアウト) (レベル AAA)
データが消えてしまう「時間切れ(タイムアウト)」までの時間を、作業前にあらかじめ知らせる
作成日: 2024.4.10 / 最終修正日: 2026.5.27
この達成基準は、文章の理解やタイピングに時間がかかる利用者が、予期せぬ時間切れによって入力中のデータを失うのを防ぐことを目的としています。作業を始める前に「何分操作しないとログアウトされるか(データが消えるか)」をあらかじめ知っておくことで、利用者は手元でメモ帳に入力内容を準備しておくなど、事前に対策を立てることができます。
実践すべきこと
時間切れ(タイムアウト)時間の事前通知
- 利用者がフォーム入力などの作業を開始する前に、何も操作しなかった場合にデータが失われるまでの時間を明確に通知する。
例外事項(20時間以上のデータ保持)
- 利用者が何も操作しなくても、入力中のデータが「20時間以上」保持される仕組みになっている場合は、長時間の離席や睡眠を挟んでも作業を再開できるため、事前の通知は不要となる。
運用者への注意
利用規約やフォーム冒頭での明記
- セキュリティ要件などでログアウト時間が決まっている場合、入力画面の冒頭や手続きの開始ページに「※セキュリティのため、〇〇分操作がない場合は自動的にログアウトされ、入力内容は破棄されます」といった案内をわかりやすく記載する。
開発者への注意
時間切れ(タイムアウト)仕様の明確化と表示
- システムのセッション保持期間を確認し、それが20時間未満でデータが失われる仕様であれば、デザインチームと連携して、フォーム画面の目立つ場所に警告メッセージを静的に配置する。
今のWeb環境で気をつけたい点
- レベルAAAの難易度と優先度: フォームの冒頭などで時間切れ(タイムアウト)時間を正確に事前告知するだけであるため、実装自体の技術的な難易度は高くありません。しかし、すべての機能において時間切れの有無や時間を整理し、利用者に不安を与えすぎないように明記する運用上の調整が必要になるため、「レベルAAA」に設定されています。まずは 2.2.1(タイミング調整可能)で時間切れが迫った際に延長ボタンを出すことが優先ですが、銀行のオンライン取引やチケット予約など、セキュリティ都合上どうしても短い時間切れを避けられないサイトでは、この「事前の告知」が焦りや混乱を防ぎ、安心感につながります。
- 20時間の例外とオートセーブ技術:ブラウザのローカルストレージやクラウド同期を利用して「入力途中のデータを自動保存し、数日間は保持する」設計があります。20時間以上のデータ保持の要件を満たせば事前の警告文すら不要になるため、「利用者を急かさないシステム設計」にすることが理想的なアクセシビリティ対応と言えます。
参考リンク
公開・販売・運用のことで困ったら、まずは「ましじめ」へ
ウェブサイトの制作や改善、AI活用、アクセシビリティ、
商品やサービスの見せ方まで、何から手をつければよいか分からない段階でもご相談ください。
自社事業の経験と専門的な技術力を活かし、無理なく続けられる形をご提案します。
