touch-pointer

Name: touch-pointer
Author: mgifford

github.com/mgiffordデザイン・UI57159 回インストール6 週間前に更新

リポジトリ

touch-pointer について

タッチやポインターによるUI操作を設計・レビューするアクセシビリティスキルです。ジェスチャーやドラッグの代替操作、ターゲットサイズ、キャンセル、ブラウザーのズームとスクロールの維持を扱います。

主な機能

01ジェスチャーやドラッグの単一ポインター代替
02ポインター操作のキャンセル指針
03操作ターゲットの最小サイズ要件
04カスタム操作でのPointer Events
05ズーム、スクロール、ホバーへの配慮

活用シーン

01ドラッグ＆ドロップUIのレビュー
02地図やカルーセルにジェスチャー不要の操作を追加
03タッチターゲットと操作キャンセルを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mgifford/accessibility-skills --skill touch-pointer

インストール後、Claude Code で/touch-pointerを入力して読み込まれたか確認します。

同梱ファイルREADME.mdSYNC.md

詳細

タッチとポインターのアクセシビリティスキル

正規のソース：mgifford/ACCESSIBILITY.md の examples/TOUCH_POINTER_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルに基づいています。判断に迷った場合は、サンプルを優先してください。

ユーザーがタッチ、クリック、タップ、ドラッグ、またはジェスチャーで操作する、あらゆるインタラクティブ UI を実装する際は、次のルールを適用してください。 keyboard/SKILL.md と併せて読み込んでください。ポインターとキーボードの要件は相互に補完するものであり、置き換えられるものではありません。

基本方針

タッチスクリーン、マウス、トラックパッド、ペン、ヘッドポインター、スイッチで操作するポインターなど、さまざまなポインティングデバイスで動作するインターフェイスを構築してください。使用しているデバイスからユーザーの能力を推測しないでください。タッチスクリーンのユーザーが、キーボード、音声入力、スクリーンリーダー、マウスも使用している場合があります。

キーボードのみで使える代替手段があっても、それだけではポインターのジェスチャー（2.5.1）やドラッグ（2.5.7）の要件を満たしません。2.1.1 でキーボード操作も別途求められますが、代替手段は、経路に依存するジェスチャーやドラッグを使わず、単一ポインターで操作できる必要があります。ネイティブのボタンを使えば、両方の要件を満たせます。

重大度の基準（このスキル）

レベル	意味
致命的	複数ポイントのジェスチャーでのみ機能が利用でき、単一ポインターの代替手段がない場合。`user-scalable=no` によってズームができない場合
重大	単一ポインターの代替手段がないドラッグによる並べ替え。主要な操作のタッチターゲットが 24×24px 未満の場合
中程度	up イベントによるキャンセルができない mousedown／touchdown アクション。UI による代替手段がないモーションジェスチャー
軽微	主要でない操作のターゲットが 44×44px 未満の場合。ターゲット間の間隔が狭すぎる場合

成功基準の番号やツールの出力だけで重大度を決めず、実際のユーザーへの影響、タスクの重要性、到達しやすさ、利用頻度をもとに優先順位を付けてください。

まず入力方法に依存しない基盤を作る

ネイティブの HTML コントロールとリンクを使用してください。組み込みの click による起動は、マウス、タッチ、ペン、キーボード、多くの支援技術で動作します。


<div class="button" ontouchend="saveChanges()">Save changes</div>


<button type="button" id="save-button">Save changes</button>
<script>
  document.querySelector("#save-button").addEventListener("click", saveChanges);
</script>

個別にマウス用とタッチ用の実装を維持するのではなく、独自の直接操作コンポーネントには Pointer Events を使用してください。主要な機能を pointerType に依存させないでください。ペンを使うユーザーが、マウスを使うユーザーに提供される機能を使えなくなるべきではありません。

致命的：ズームを妨げない（`user-scalable=no`）


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


<meta name="viewport" content="width=device-width, initial-scale=1">

一部のライブラリやフレームワークは user-scalable=no を自動的に追加するため、すべてのプロジェクトで viewport メタタグを監査してください。制限的な viewport 設定をブラウザーが無視することを当てにせず、ソースから制限を削除してください。テキストは 200% に拡大して、レイアウトは 400% に拡大してテストしてください。

致命的：複数ポイント／経路に依存するジェスチャーの単一ポインターによる代替手段（WCAG 2.5.1）

複数ポイントのジェスチャーとは、2 つ以上の接触点を使うジェスチャー（ピンチズーム）です。経路に依存するジェスチャーとは、開始点と終了点だけでなく、なぞる経路、方向、形状によって決まるジェスチャーです。コンテンツでこのようなジェスチャーを定義する場合、同じ機能を単一ポインターで、経路に依存するジェスチャーを使わずに実行できる方法を提供してください。代替手段は、キーボードコマンドだけでなく、コンテンツ内に用意する必要があります。

<div class="map-controls" aria-label="Map controls">
  <button type="button" data-map-action="zoom-in">Zoom in</button>
  <button type="button" data-map-action="zoom-out">Zoom out</button>
  <button type="button" data-map-action="north">Pan north</button>
</div>

例：地図を拡大・縮小、または移動するボタン。スワイプカルーセルの前へ／次へボタン。図形を描く操作と併せて使えるメニューコマンド。画面上に表示される回転／サイズ変更コントロール。ブラウザーや支援技術そのものが必要とするジェスチャー（モバイルのスクリーンリーダーでのナビゲーションジェスチャーなど）は作成者が制御できないため、同じものを再現したり、妨げたりしないでください。

重要：ドラッグを使わない代替手段（WCAG 2.5.7 — WCAG 2.2）

ドラッグを使う機能には、ドラッグせずに単一のポインターで完了できる方法を用意してください。キーボードのみで操作できる代替手段だけでは、2.5.7 を満たしません。ネイティブボタンを使えば、ポインターの要件とキーボード操作の両方を同時に満たせます。

<ul id="task-list">
  <li>
    <span>Review content</span>
    <button type="button" data-move="up" aria-label="Move up: Review content">Move up</button>
    <button type="button" data-move="down" aria-label="Move down: Review content">Move down</button>
  </li>
</ul>
<p id="reorder-status" role="status" aria-atomic="true"></p>

taskList.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-move]");
  if (!button) return;
  const item = button.closest("li");
  const label = item.querySelector("span").textContent;
  const direction = button.dataset.move;
  if (direction === "up" && item.previousElementSibling) item.previousElementSibling.before(item);
  else if (direction === "down" && item.nextElementSibling) item.nextElementSibling.after(item);
  else return;
  updateMoveButtons();
  reorderStatus.textContent = `${label} moved ${direction}.`;
});

ドラッグ＆ドロップは拡張機能として残してもかまいません。ドラッグを使わない操作手段でも同じ結果を実現でき、見つけやすい状態を保ち、移動後もフォーカスと状態を維持する必要があります。ほかのパターンとして、項目と移動先を選択してから「移動」を実行する、地図の操作ボタンをタップして表示範囲を移動する、スライダーのつまみをドラッグする方法に加えて値を入力するかトラックをクリックする方法があります。

重大：ポインターのキャンセル（WCAG 2.5.2）

通常のコントロールは、pointerdown／mousedown／touchstart ではなく、click で動作させてください。

// Right — fires on click; user can drag away to cancel
deleteButton.addEventListener("click", deleteItem);

WCAG では、いくつかのパターンが認められています。（1）押下イベントでは機能を実行しない。（2）離上イベントで機能を完了し、離す前に中止できるか、完了後に取り消せる。（3）離すと押下イベントの結果が元に戻る。（4）押下時に完了することが不可欠である。破壊的な操作や元に戻しにくい操作では、確認を求めるか、「元に戻す」機能も用意してください。

<button type="button" id="archive-button">Archive message</button>
<p id="archive-status" role="status"></p>
<button type="button" id="undo-archive" hidden>Undo archive</button>

重大：ターゲットの最小サイズ（WCAG 2.5.8 — WCAG 2.2）

ポインターのターゲットは、次の場合を除き、24×24 CSS ピクセル以上にする必要があります。

間隔 — ターゲットを中心とした直径 24px の円が、別のターゲットを中心とした同等の円と交差しないこと（単に「余白を追加する」ということではなく、特定の幾何学的な判定です）
同等 — 同じページに同じ機能を実行する別のコントロールがあり、サイズ要件を満たしていること
インライン — ターゲットが文章内にあり、サイズが行の高さによって制限されていること
ユーザーエージェントのコントロール — ブラウザーがサイズを決定し、作成者による変更が加えられていないこと
不可欠 — その特定の表現が不可欠であるか、法的に求められていること

重要な操作や頻繁に使う操作では、44×44 CSS ピクセルを推奨デフォルト値とします。間隔の例外に頼るより実装やテストが容易であり、WCAG 2.5.5（AAA）のターゲットサイズ拡張基準も満たします。

.icon-button {
  display: inline-grid;
  min-inline-size: 2.75rem;  /* 44px at default 16px root */
  min-block-size: 2.75rem;
  padding: 0.625rem;
  place-items: center;
}
.icon-button svg { inline-size: 1.5rem; block-size: 1.5rem; }

ユーザーのデフォルトの文字サイズに合わせてターゲットを拡大できるよう、rem を使ってください。パディングは非インタラクティブなラッパーではなく、インタラクティブ要素自体に設定してください。パディングを含む領域全体をクリックできる必要があります。

<a class="nav-link" href="/account/">Account</a>

.nav-link { display: inline-flex; min-block-size: 2.75rem; padding: 0.625rem 0.875rem; align-items: center; }

すべての <a> に一律で最小の幅や高さを設定しないでください。インラインの文章中のリンクには明確な例外があり、四角いボックスに押し込むと読みやすさや折り返しが損なわれます。チェックボックスやラジオボタンは、表示される <label> 要素に関連付けて、操作可能な領域を広げてください。

重大：動きによる操作の代替手段（WCAG 2.5.4）

振る、傾ける、またはカメラに向かってジェスチャーすることで機能を実行する場合は、同じ機能を実行する標準的な UI コントロールを用意してください。また、ユーザーが動きによる操作を無効にできるようにし、明確なユーザー操作があった場合にのみセンサーの許可を求めてください。

<button type="button" id="undo-button">Undo last change</button>
<label><input type="checkbox" id="shake-toggle"> Enable shake to undo</label>

動き入力が有効かどうかにかかわらず、標準的なボタンを利用できる状態にしてください。センサー機能はデフォルトでオフにします。

重大：ホバーに依存しない

ホバー時に表示されるすべての機能は、常に表示されるコントロールまたはキーボードフォーカスからも利用できるようにしてください。タッチデバイスでは、ホバーが確実にサポートされない場合があります。

<button type="button" aria-expanded="false" aria-controls="account-menu">Account menu</button>
<ul id="account-menu" hidden>…</ul>

ホバー／フォーカス時のコンテンツは、例外が適用される場合を除き、閉じることができ、ポインターを重ねられ、表示が持続する必要があります（WCAG 1.4.13）。重要な説明には、ツールチップより表示されているボタンや開閉コントロールを使うほうが一般に確実です。

中程度：`pointer`／`hover` メディア特性を慎重に使う

pointer／hover は主要なデバイスを示し、any-pointer／any-hover は利用可能なすべてのデバイスの機能を示します。これらはキーボードの使用を検出したり、障害の有無を特定したり、すべてのペンを確実に粗い入力として、またはすべてのタッチスクリーンを主要なデバイスとして分類したりするものではありません。ハイブリッドデバイスでは、ページを開いている間に複数の機能が報告され、その内容が変わる場合があります。

.toolbar button { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
@media (any-pointer: coarse) { .toolbar { gap: 0.75rem; } }

正確なポインターに関するクエリを使って、重要なコントロールを隠さないでください。

/* Incorrect: touch and keyboard users may lose the controls */
@media (pointer: fine) { .editing-controls { display: flex; } }

まずアクセシブルな基本レイアウトを用意し、その後、メディアクエリは拡張機能にのみ使用してください。

中程度：カスタム操作にはポインターイベントを優先する

surface.addEventListener("pointerdown", (event) => {
  if (activePointerId !== null) return;
  activePointerId = event.pointerId;
  surface.setPointerCapture(event.pointerId);
  beginPreview(event.clientX, event.clientY);
});
surface.addEventListener("pointerup", (event) => {
  if (event.pointerId !== activePointerId) return;
  activePointerId = null;
  commitInteraction(event.clientX, event.clientY);
});
surface.addEventListener("pointercancel", (event) => {
  if (event.pointerId === activePointerId) cancelInteraction();
});
surface.addEventListener("lostpointercapture", () => {
  if (activePointerId !== null) cancelInteraction();
});

アクティブな pointerId を追跡し、pointerup で終了し、pointercancel 時は適切にキャンセルし、lostpointercapture にも対応してください。すべてのポインターが圧力、傾き、寸法を報告するとは限らないことを前提とし、同じ機能を実行できる、ジェスチャーやドラッグを使わないコントロールも用意してください。同じ操作に対して、重複した有効化を防止せずに touchend と click の両方を登録しないでください。

中程度：`touch-action` でブラウザーのパン／ズームを維持する

/* A horizontal carousel handles horizontal movement;
   preserve vertical page scroll and pinch zoom */
.carousel-viewport { touch-action: pan-y pinch-zoom; }

touch-action は、それを必要とする最小限のカスタム領域にのみ使用してください。html、body、ページコンテナー、マップ、キャンバス、カルーセルに touch-action: none を広く適用しないでください。その要素上で始まるブラウザーのパン／ズームが抑制されます。ジェスチャーを制限する前に、コンポーネントが本当にその操作を処理する必要があること、コンポーネント上からページをスクロールできること、ピンチズームを引き続き使えること、同じ機能を実行できるシンプルなコントロールがあることを確認してください。すべてのタッチ移動で非パッシブな preventDefault() を呼び出すより、touch-action を使うことを推奨します。

コンポーネントのパターン

コンポーネント	必須の対応
カルーセル	前へ／次へ／一時停止のコントロールを用意し、スワイプを必須にしない。スクロールと動きを抑える設定を維持する
マップ	名前付きのズーム／パンコントロールを用意する。視覚的なマップだけでは不十分な場合は、住所／座標／リストによる代替手段を用意する
スライダー	`<input type="range">` を優先する。つまみのドラッグに加えて、数値入力またはトラックのクリック操作を用意する
並べ替え可能なリスト	ドラッグ＆ドロップに加えて、上／下／移動のコントロールを用意する。結果を通知し、フォーカスを維持する
スワイプ操作	目に見えるボタン／メニューから実行できるようにする。削除／アーカイブ／表示には、スワイプだけを唯一の方法として使用しない
長押し	通常のボタン／メニューを用意する。機能を実行する唯一の方法にしない
描画／署名	必須でない場合は、正確な軌跡を要求しない。タスク上可能であれば、テキスト入力／アップロードによる代替手段を用意する
キャンバスコントロール	すべての操作、名前、値、結果に対応する、アクセス可能な DOM インターフェースを用意する。キャンバスのピクセルだけでは意味情報がありません

必須機能をダブルタップ、圧力、傾き、エッジスワイプ、またはデバイス固有のジェスチャーに依存させないでください。

重大：表示ラベルをアクセシブルネームに含める（WCAG 2.5.3）

音声入力のユーザー（Dragon、iOS Voice Control）は、表示ラベルを声に出してコントロールを有効化することがよくあります。アクセシブルネームには、そのテキストを含める必要があります。


<button type="button">Send</button>
<button type="button" aria-label="Send application">Send</button>


<button type="button" aria-label="Submit application">Send</button>

表示ラベルを長いアクセシブルネームの先頭に置くことは、音声入力に役立つ慣例です。アイコンのみのボタンには、2.5.3 に照らして比較できる表示ラベルがありませんが、4.1.2 に基づく明確なアクセシブルネームは必要です。見慣れたアイコンを使い、スペースに余裕があれば表示ラベルを付けてください。ツールチップは、確実に利用できるラベルの代わりにはなりません。

向き、リフロー、到達可能性を維持する

一方の向きが不可欠でない限り、縦向きと横向きの両方に対応してください。柔軟性に欠けるレイアウトを補うために、画面の向きをロックしないでください。幅の狭い画面や高倍率のズームでは、コントロールを意味のある順序に保ち、ターゲットを最小サイズ未満に縮小するのではなくツールバーを折り返し、固定ヘッダー／バナー／チャットウィジェットがフォーカス中のコントロールを覆わないようにし、ダイアログ／メニューをビューポート内に収めてください。本当に二次元のコンテンツが必要とする場合を除き、ページの横スクロールは避けてください。画面キーボードが開いたときは、フォーカス中の入力欄／エラー／送信コントロールが表示されたまま、またはスクロールして表示できるようにしてください。

タッチスクリーンリーダーを考慮する

モバイルのスクリーンリーダーは、タッチ入力がページに伝わる方法を変えます。ユーザーはタッチで探索したり、アクセシビリティツリーをスワイプして移動したり、画面を直接タップする代わりにスクリーンリーダーのアクティベーションジェスチャーを使ったりすることがあります。ネイティブ要素と正確なアクセシブルネームを使用し、アクセシブルなターゲットを表示されているコントロールに合わせます。現在の状態（展開済み／選択済み／チェック済み／値）を公開し、支援技術のジェスチャーと競合するカスタムジェスチャーは避けます。また、「右上隅にある形をタップする」のように、位置を把握していることを前提にしないでください。スクリーンリーダーをオフにした状態での直接タッチと、オンにした状態でのタッチ探索の両方をテストしてください。一方で正常に動作しても、もう一方でも動作するとは限りません。

誤操作とデータ損失を防ぐ

タッチ入力は不正確になったり、中断されたりすることがあります。重大な結果を伴う操作では、破壊的な操作と建設的な操作を隣り合わせにせず、曖昧なアイコンではなく明確なラベルを使い、ポインターダウン時に実行せず、元に戻しにくい操作は確認を求め、実用的であれば取り消し手段を用意し、検証エラー、画面の向きの変更、一時的な接続切断の後も入力済みデータを保持します。ターゲットサイズだけが安全策ではありません。復旧手段がないまま、大きな「削除」ボタンを「保存」の隣に配置すれば、依然として損害を招く可能性があります。

テスト

レビュー： すべてのコントロールとジェスチャーを一覧にします。マルチポイント、経路ベース、ドラッグ、スワイプ、長押し、圧力、傾き、動きに関する操作を特定し、それぞれに必要なシングルポインターでの代替手段があることを確認します（キーボードだけでは不十分です）。実際のターゲット領域を CSS ピクセル単位で測定します。制限的なビューポート設定や広範囲に適用される touch-action ルールを検索し、表示ラベルがアクセシブルネームに含まれていることを確認します
入力： すべてのタスクをタッチのみ、マウス／トラックパッドのみ、ペン（対応している場合）、キーボードのみで完了します。表示ラベルの音声入力をテストします。モバイルスクリーンリーダーでタッチ探索とアクティベーションをテストします。入力モードを切り替えられるハイブリッドデバイスをテストします。最終テストには実機を使用してください。エミュレーションでは、手による遮蔽、手の届きやすさ、意図しない接触、センサーの権限を確実に再現できません
視覚／レイアウト： 縦向き／横向き、200%／400% のズーム、画面キーボード表示中にサポートされる最小のビューポートをテストします。スティッキー／固定コンテンツがコントロールを隠していないことを確認します。カスタムジェスチャーの対象となる各領域で、ピンチズームとページスクロールをテストします
インタラクション状態： 押し下げて、動かして離し、必要な箇所でキャンセルが機能することを確認します。スクロール、画面の向きの変更、ポインターキャプチャの喪失によって直接操作が中断される場合をテストします。ドラッグの代替手段でも同じ結果が得られ、フォーカスが維持されることを確認します。代替手段を引き続き利用できる状態で、動きによる入力を無効にできることを確認します

自動チェックでは、小さすぎるターゲット、不正な名前、制限的なビューポート設定、重複するイベントパターンの一部を検出できます。しかし、ジェスチャーが不可欠か、代替手段が同等で見つけやすいか、タッチスクリーンリーダーとのインタラクションが理解しやすいかは判断できません。手動テストは引き続き必要です。

よくある失敗

失敗	修正
レイアウトが崩れるため、ブラウザーのズームが無効になっている	レスポンシブレイアウトを修正し、ビューポートの拡大縮小制限を削除します
ピンチ／軌跡ジェスチャーの代替手段がキーボード操作しかない	軌跡ジェスチャーを使わず、単一ポインターで操作できるコントロールを追加します
ドラッグの代替手段として、キーボードでの並べ替えだけが用意されている	ドラッグ不要で操作できる、単一ポインターの移動コントロールを追加します
反応を速く感じさせるために、`pointerdown` でアクションが実行される	`click`／`pointerup` で完了するようにし、キャンセルまたは取り消しを可能にします
「すべてのターゲットは例外なく24×24pxが必要」としている	2.5.8の正確なルールと、定義された例外を適用します
曖昧な間隔の説明で、小さすぎるターゲットが適合すると主張している	実際の24px円のテストで評価します
すべてのリンクを正方形のターゲットにしている	インラインの文章リンクは通常のフローに配置します
小さなアイコンボタンを囲むラッパーにパディングを設定している	インタラクティブ要素自体にパディングを設定します
ホバー時にしかコントロールが表示されない	常時表示またはフォーカス時に表示されるコントロールを用意し、タッチで操作できるようにします
`pointer: coarse` をタッチスクリーン／スタイラスの確実な検出手段として扱っている	メディア特性は機能として扱い、基本の操作体験は入力方式に依存しないようにします
`pointer: fine` が一致しないと、必須のコントロールが非表示になる	基本のレイアウトに主要なコントロールを配置します
タッチとマウスに別々のハンドラーを使い、二重にアクションが実行される	ネイティブの `click` または統一された Pointer Events の実装を使用します
ページ／コンポーネント全体に `touch-action: none` を適用している	パン／ズームを維持し、必要なジェスチャーの軸だけを制限します
無効にする方法がないまま、モーション入力が常時有効になっている	従来の操作方法による代替手段を用意し、ユーザーが無効にできるようにします
モバイルエミュレーターでしかタッチテストをしていない	実機、複合入力、モバイルスクリーンリーダーでテストします
キーボードテストへの合格を、ポインターアクセシビリティの証明とみなしている	ジェスチャー、ドラッグ、キャンセル、ターゲットサイズを個別にテストします

完了条件チェックリスト

WCAGの主な達成基準

1.3.4 向き（AA）
1.4.4 テキストのサイズ変更（AA）— ズームがブロックされている場合は重大
1.4.10 リフロー（AA）
1.4.13 ホバーまたはフォーカスで表示されるコンテンツ（AA）
2.1.1 キーボード（A）— ポインターによる代替手段とは別に必須
2.5.1 ポインターのジェスチャー（A）— 複数ポインターのジェスチャーに単一ポインターの代替手段がない場合は重大
2.5.2 ポインターのキャンセル（A）— ダウンイベントでアクションが実行される場合は重大
2.5.3 ラベルを含む名前（A）— 音声コントロールのユーザーには重大
2.5.4 モーションによる作動（A）
2.5.5 ターゲットサイズ（拡張）（AAA）— 44×44px
2.5.7 ドラッグ動作（AA、WCAG 2.2）— ドラッグに単一ポインターの代替手段がない場合は重大
2.5.8 ターゲットサイズ（最小）（AA、WCAG 2.2）— 24×24px未満の場合は重大

参考資料

規格の動向： WCAG 2.5.x の達成基準は比較的新しく追加されたものです（2.1 および 2.2）。 WCAG 3.0 では、ポインターとタッチに関する要件がさらに拡張される見込みです。次を確認してください：https://www.w3.org/TR/wcag-3.0/

Markdown 対応

ログインしてコメント

基本情報

作者: mgifford
リポジトリ: mgifford/accessibility-skills
カテゴリ: デザイン・UI
インストール数: 159
GitHub スター: 57

問題を報告