DRAG・HOLD・TAPをキーボードでも成立させる
ブラウザゲーム操作のアクセシビリティ設計

『60秒後の彼女』は TAP・DRAG・HOLD・WAIT の4操作で進みます。このうち DRAG は WCAG 2.5.7「Dragging Movements」で代替操作が必須とされます。本作がどうキーボードやクリック選択でドラッグを代替し、どこで詰まったかを解説します。

結論： マウス・タッチの DRAG に対し、キーボード（矢印で対象を選び Enter で確定）とクリック選択の2系統の代替を用意しました。また HOLD は Space/Enter の長押し代替、TAP は Space/クリック/タップのいずれでも発動します。ターゲットサイズは主要操作で 44×44 CSS px 以上、最低でも 24×24 を確保しています。

1. なぜドラッグに代替が必要か

基準 WCAG 2.2 の 2.5.7 Dragging Movements では、「単一ポインターのドラッグ操作だけで完了する機能は、ドラッグ以外の単一ポインター操作（クリックなど）でも完了できなければならない」としています。理由は単純で、細かいドラッグが困難な人、モーター制御に制約がある人、あるいは環境によってはタッチが正しく効かない場合に、ゲームが遊べなくなるからです。

2. 本作の操作と代替の対応

表1：操作と代替手段の対応
操作	主手段（マウス/タッチ）	キーボード代替	クリック/その他代替
TAP（タイミングタップ）	タップ / クリック	Space	クリックでも可
DRAG（対象を運ぶ）	ドラッグ（setPointerCapture）	対象を選択→矢印で移動→Enter	対象をクリック選択→もう一度クリックで確定
HOLD（長押し）	ポインタ押下を維持	Space / Enter 長押し	―
WAIT（何もしない）	そのまま待つ	そのまま待つ	そのまま待つ

3. ドラッグ代替の実装

実装椅子（運ぶ対象）は div.chair です。マウス/タッチでは pointerdown → setPointerCapture → pointermove → pointerup で運びます。キーボードでは、矢印キーで「選択中の椅子」を移動し、Enter で確定します。また pointercancel や lostpointercapture でキャンセル状態を正しく戻します。

// キーボード代替：矢印で選択椅子を移動、Enterで確定
function onKey(e) {
  if (e.key === 'ArrowLeft') moveSelectedChair(-1, 0);
  else if (e.key === 'ArrowRight') moveSelectedChair(1, 0);
  else if (e.key === 'ArrowUp') moveSelectedChair(0, -1);
  else if (e.key === 'ArrowDown') moveSelectedChair(0, 1);
  else if (e.key === 'Enter') confirmChair();
}

4. つまずいた点：pointercancel の見落とし

失敗例最初の実装では pointercancel を処理せず、タッチ中にシステムがキャンセルすると「運び中」の状態がそのまま残り、次の操作がおかしくなることがありました。対策として pointercancel / lostpointercapture の両方で、対象の選択を解除し視覚状態を元に戻すようにしました。

ポインターキャンセレーション（WCAG 2.5.2）： 長押し系では「押してすぐ離す」だけで誤発動しないよう、意図的な長押しとキャンセルを区別します。本作の HOLD は一定時間以上の押下のみを有効としています。

5. ターゲットサイズ

基準 WCAG 2.5.8「Target Size (Minimum)」は最低 24×24 CSS px を求めます。本作の主要操作はこれを上回るよう設計しています。

一時停止ボタン：44×44 CSS px
難易度ボタン：最小高さ 48px
操作リング（TAP/HOLD の当たり）：88px 以上
椅子：ドラッグ/選択ともに指で隠れすぎないよう十分な大きさ

6. 時間制限への配慮

基準 WCAG 2.2.1「Timing Adjustable」は、20時間以上ではない時間制限に対し、停止・調整・延長・警告のいずれかを求めます。本作は 60秒というゲームの核心ですべてを止めることはしませんが、次の配慮を入れています。

EASY（72秒）と NORMAL（64秒）を「猶予モード」として提供
いつでも一時停止（P キー / ボタン）可能
失敗後は即リトライ
結果画面から難易度変更がワンタップ

7. 読者が使えるチェックリスト

ドラッグだけで完了する操作には、クリック/キーボードでの代替を必ず用意する（WCAG 2.5.7）。
pointercancel / lostpointercapture を処理し、キャンセル後の状態を戻す。
主要な操作ターゲットは 44×44 CSS px 以上を目標にする。
長押しは「意図的な長押し」と誤タップを判別する。
キーボードでゲーム開始から結果まで到達できるか、必ず手動で確認する。
色だけで操作意図を伝えない（テキスト・図形・動きの組み合わせ）。

限界と既知の制約： リアルタイム性ゆえ、時間制限の完全な延長・停止は作品体験維持のため提供していません（一時停止のみ）。また極端な運動制御困難がある場合、連続したドラッグ/タイミング操作の達成が難しい場合があります。詳細はアクセシビリティページに記載しています。

8. 参考文献

WCAG 2.2 — 2.5.7 Dragging Movements、2.5.8 Target Size (Minimum)、2.5.2 Pointer Cancellation、2.2.1 Timing Adjustable（W3C）。
Pointer Events — MDN / W3C（setPointerCapture / lostpointercapture / pointercancel）。
prefers-reduced-motion — MDN / W3C（動きを減らすユーザーへの配慮）。

キーボードだけでも遊べるか、試してみてください。

▶ 60秒後の彼女をプレイする

最終更新：2026-07-18 ／運営：cig4r ／この記事は本作の実装と WCAG 基準に基づく解説です。