WCAG 2.5.1: ポインタージェスチャ

この規定の意味

WCAG 2.5.1 Pointer Gestures は、マルチポイントジェスチャ（2本以上の指を同時に使うジェスチャ。例えば、2本指でのピンチイン・ピンチアウトによるズームや3本指スワイプなど）やパスベースジェスチャ（ポインタが移動した経路が重要となるジェスチャ。例えばスワイプ、特定のルートに沿ったドラッグ、描画された形など）に依存するウェブページ上のあらゆる機能について、パスベースジェスチャを必要としない単一ポインタ操作でも利用可能でなければならないと定めています。単一ポインタとは、1点で操作するあらゆる入力を指し、1本指でのタッチ、マウスクリック、スタイラスでのタップなどが含まれます。

実務的には、カルーセルが水平方向のスワイプでスライドを進める場合、単一のタップやクリックで操作できる「次へ」「前へ」ボタンも提供しなければなりません。カスタムマップウィジェットが2本指のピンチ操作でズームイン・ズームアウトに反応する場合、単一タップで操作できるズームイン・ズームアウトのコントロールも提供する必要があります。この達成基準はマルチポイントやパスベースジェスチャを禁止するものではなく、常に同等の単一ポインタによる代替手段を用意することを求めているだけです。

公式なWCAGの例外では、この要件はマルチポイントまたはパスベースジェスチャが本質的な場合には適用されないとされています。本質的なジェスチャとは、それを取り除くと情報や機能が根本的に変わってしまい、テキストや他の代替手段では同じ目的を達成できないものを指します。フリーハンド署名ウィジェットや、描いた軌跡自体が出力となるお絵描きアプリケーションは、本質的なジェスチャに該当します。しかし、ナビゲーション、カルーセル、地図、スライダーの大半のインタラクションは、単純なタップ／クリックの代替手段で情報の損失なく再現できるため、この例外には該当しません。

この達成基準は、すべてのポインタ入力に適用されます。タッチスクリーン、マウス、スタイラス、視線追跡ポインタ、その他あらゆるポインティングデバイスが対象です。これはWCAG 2.2におけるレベルAの要件であり、最低限の適合のために満たすべきベースラインのアクセシビリティ要件と位置付けられています。

適合している実装では、ジェスチャに依存するすべての機能について、単一点でのパスベースではない操作で達成できる仕組みを少なくとも1つ提供します。典型的には、視認可能なボタン、リンク、その他フォーカス可能なコントロールです。不適合な実装は、スワイプ、ピンチ、スプレッド、回転、描画パスなどのジェスチャだけに依存して機能を実行し、同等の単一ポインタ代替手段を提供していないものです。

なぜ重要か

運動障害は世界人口のかなりの割合に影響を与えています。パーキンソン病、本態性振戦、脳性まひ、脳卒中による片麻痺、四肢の差異、反復性ストレス障害などの状態は、ユーザーが精密なマルチポイントやパスベースジェスチャを安定して行うことを困難または不可能にする場合があります。世界保健機関によると、世界で約1.3 billion人が何らかの重大な障害とともに生活しており、その中でも運動・移動に関する障害は最も一般的なカテゴリの一つです。ウェブインターフェースが複雑なジェスチャのみに依存していると、視覚に問題のない非障害者が当たり前に利用している機能から、これらのユーザーは完全に締め出されてしまいます。

具体的な現実のシナリオを考えてみましょう。本態性振戦のあるユーザーが、タブレットでトルコのECサイトを閲覧しています。商品画像ギャラリーは、写真の切り替えにスワイプジェスチャのみを使用しています。このユーザーは、きれいな水平スワイプを安定して行うことができません。振戦により、誤タップや斜めの動き、意図しない複数指でのタッチが発生してしまいます。「前へ／次へ」ボタンがなければ、追加の商品写真を見ることができず、購入を完全に諦めてしまうかもしれません。2つのシンプルな矢印ボタンを追加することは、開発チームにとっては数分の作業ですが、このユーザーにとっては完全なバリアを取り除くことになります。

運動障害以外にも、この達成基準は、単一ポインタをエミュレートする上肢の義肢やシングルスイッチアクセスデバイスを利用するユーザー、回転やマルチタッチが機械的に困難な車椅子搭載デバイスで操作するユーザー、複雑なタッチジェスチャが直感的でなく学習しづらい高齢者にも恩恵をもたらします。マウスや非タッチのスタイラスでデバイスを操作するユーザーも直接影響を受けます。これらの入力方法は本質的に単一ポインタであり、マルチポイントジェスチャをまったく実行できないからです。

ユーザビリティとビジネスの観点からも、明示的な単一ポインタコントロール（ボタン、リンク）を提供することは、すべてのユーザーにとって発見しやすさを高め、認知負荷を軽減し、タスク完了率やコンバージョン指標の向上に寄与し得ます。検索エンジンも、ジェスチャ駆動のインタラクションよりボタンドリブンのナビゲーションの方が解析・追跡しやすく、クロール可能なナビゲーションパターンに対して二次的なSEO上の利点をもたらす可能性があります。

関連する Axe-core のルール

WCAG 2.5.1 は、ジェスチャ依存の挙動に単一ポインタの代替手段があるかどうかを自動ツールが確実に検出できないため、手動テストが必要です。この達成基準に直接対応する自動の axe-core ルールは存在しません。自動検出が不十分である理由は次のとおりです。

• 手動テストが必要 — ジェスチャ検出: 自動スキャナは静的なDOM構造と計算済みスタイルを解析します。touchstart/touchmove/touchendハンドラがパス依存のスワイプを実装しているのか、単なるタップなのかを区別できる形で、JavaScriptのイベントリスナーの挙動を実行時に観察することはできません。スキャナはタッチイベントが存在することは把握できますが、その結果として提供される機能が単一ポインタの代替手段でも利用可能かどうかを判断できません。これは、人間のテスターがジェスチャベースと単一ポインタの両方の方法でインターフェースを操作し、利用可能な機能を比較する必要があります。
• 手動テストが必要 — 同等性の検証: 仮にツールがマルチポイントジェスチャのリスナーの存在を検出できたとしても、提供されているボタンやリンクが機能的に同等の結果を達成しているかどうかを評価することはできません。同等性の検証 — 代替手段が同じ結果を引き起こすか、視認可能で到達可能か、追加のステップを踏まずに利用できるか — には、この達成基準の意図を理解した人間の判断が必要です。
• 手動テストが必要 — 本質的ジェスチャの例外: あるジェスチャが「本質的」な例外に該当するかどうかを判断するには、アプリケーションの目的に関する文脈的な理解が必要であり、自動ルールが確実に評価することはできません。

テスターは、ブラウザの開発者ツールを使って、どの要素にイベントリスナーが付与されているかを調査するべきです（Chrome DevTools では、要素を右クリックして「検証」を選択し、「Event Listeners」タブを表示）。これを出発点として、タッチまたはポインタイベントハンドラを持つ要素を特定し、その後、単一ポインタ代替手段の存在と同等性を手動で検証します。

テスト方法

1. ベースラインとして自動スキャンを実行する: axe DevTools、Lighthouse、または Accsible ウィジェットの組み込み監査機能を使ってページをスキャンします。2.5.1に直接対応するルールはありませんが、スキャン結果は（フォーカス可能なコントロールの欠如など）手動レビューの文脈となる関連問題を指摘することがあります。キーボードまたはポインタサポートの欠如が指摘されたインタラクティブ要素をメモしておきます。
2. ジェスチャ依存の機能を特定する: タッチデバイス上でページを手動で探索します（または Chrome DevTools のデバイスエミュレーションを使用し、デバイスツールバーを切り替えてタッチをシミュレートして操作します）。カルーセル、スライダー、地図、アコーディオン、画像ギャラリー、スクロール可能なパネル、ドラッグ＆ドロップインターフェース、描画ツール、その他タッチジェスチャに反応するコンポーネントを探します。スワイプ、ピンチ、回転、その他のパスベースまたはマルチポイントジェスチャによってトリガーされるすべての機能を記録します。
3. 単一ポインタによる同等操作を試す: 特定したジェスチャ依存の各機能について、単一タップのみ（デスクトップではマウスクリックのみ）で同じ機能を実行できるか試します。同じ結果をトリガーするボタン、矢印、リンクなどの視認可能なコントロールが存在するか確認します。マウス、キーボード（Tabでフォーカス、Enter/Spaceでアクティブ化）、スクリーンリーダーを使ってそれらのコントロールを操作してみます。
4. スクリーンリーダー検証（NVDA + Firefox）: NVDA と Firefox を起動します。Tabキーと矢印キーを使ってインタラクティブコンポーネントを移動します。ジェスチャベースの機能に対応する単一ポインタコントロール（ボタン、リンク）がスクリーンリーダーに読み上げられ、キーボードで到達可能であり、アクティブ化したときに期待どおりの結果を生むことを確認します。
5. スクリーンリーダー検証（VoiceOver + iOS の Safari）: iPhone または iPad で VoiceOver を有効にします。1本指で右方向にスワイプして要素間を移動します。ジェスチャの単一ポインタ代替を提供するすべてのコントロールに到達でき、VoiceOver のタップジェスチャでアクティブ化でき、正しい結果を生むことを確認します。
6. スクリーンリーダー検証（JAWS + Chrome）: Windows 上で JAWS と Chrome を使用します。Tabキーでインタラクティブコンポーネントを移動し、ジェスチャ代替コントロールがフォーカス可能で、適切にラベル付けされ、機能していることを確認します。
7. 本質的例外を評価する: 単一ポインタ代替手段のないジェスチャ依存機能について、そのジェスチャがコンテンツや機能にとって本当に本質的かどうかを判断します。例外を正当化できない場合は、不適合として記録します。スクリーンショットと再現手順を含めて調査結果を文書化します。

修正方法

スワイプのみでナビゲーションする画像カルーセル — 不適切な例

<!-- Carousel that only listens for touch swipe events, no button controls -->
<div id='carousel' class='carousel'>
  <div class='slides'>
    <img src='product-1.jpg' alt='Product view 1'>
    <img src='product-2.jpg' alt='Product view 2'>
    <img src='product-3.jpg' alt='Product view 3'>
  </div>
</div>
<!-- JavaScript only adds touchstart/touchend swipe detection -->
<script>
  // Only gesture-based: no keyboard or click alternative
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchend', handleSwipeEnd);
</script>

スワイプのみでナビゲーションする画像カルーセル — 適切な例

<!-- Carousel with both swipe gesture support AND visible single-pointer button controls -->
<div id='carousel' class='carousel' role='region' aria-label='Product images'>
  <button id='prev-btn' aria-label='Previous image' onclick='prevSlide()'>
    &lsaquo; Previous
  </button>
  <div class='slides'>
    <img src='product-1.jpg' alt='Product view 1'>
    <img src='product-2.jpg' alt='Product view 2'>
    <img src='product-3.jpg' alt='Product view 3'>
  </div>
  <button id='next-btn' aria-label='Next image' onclick='nextSlide()'>
    Next &rsaquo;
  </button>
</div>
<!-- Swipe is retained as an enhancement; buttons provide the single-pointer alternative -->
<script>
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchend', handleSwipeEnd);
  function prevSlide() { /* move to previous slide */ }
  function nextSlide() { /* move to next slide */ }
</script>

ピンチズームのみの地図 — 不適切な例

<!-- Map widget that only responds to two-finger pinch gestures for zoom -->
<div id='map' class='map-widget'></div>
<script>
  // Only multipoint pinch gesture is wired up; no zoom buttons provided
  map.addEventListener('touchstart', detectPinch);
  map.addEventListener('touchmove', handlePinchZoom);
</script>

ピンチズームのみの地図 — 適切な例

<!-- Map widget with pinch-to-zoom PLUS visible zoom controls for single-pointer access -->
<div class='map-container' role='application' aria-label='Interactive map'>
  <div id='map' class='map-widget'></div>
  <div class='map-controls'>
    <!-- Single-pointer alternatives for zoom in and out -->
    <button type='button' aria-label='Zoom in' onclick='mapZoomIn()'>+</button>
    <button type='button' aria-label='Zoom out' onclick='mapZoomOut()'>&minus;</button>
  </div>
</div>
<script>
  map.addEventListener('touchstart', detectPinch);
  map.addEventListener('touchmove', handlePinchZoom);
  function mapZoomIn() { /* increase zoom level by one step */ }
  function mapZoomOut() { /* decrease zoom level by one step */ }
</script>

ドラッグパスジェスチャのみのレンジスライダー — 不適切な例

<!-- Custom price range slider that only works by dragging a thumb along a track -->
<div class='price-slider' id='priceSlider'>
  <div class='track'>
    <div class='thumb' id='sliderThumb'></div>
  </div>
</div>
<!-- No keyboard support, no input field, no increment/decrement buttons -->

ドラッグパスジェスチャのみのレンジスライダー — 適切な例

<!-- Use the native <input type='range'> which provides built-in keyboard and single-pointer support -->
<label for='priceRange'>Maximum price: <span id='priceValue'>500</span> TL</label>
<input
  type='range'
  id='priceRange'
  name='priceRange'
  min='0'
  max='1000'
  value='500'
  step='10'
  aria-valuemin='0'
  aria-valuemax='1000'
  aria-valuenow='500'
  aria-label='Maximum price in Turkish lira'
  oninput='document.getElementById("priceValue").textContent = this.value'
>
<!-- Native range input supports click, tap, keyboard arrow keys, and touch drag --
     covering all single-pointer and path-based interaction needs natively -->

よくある間違い

• 前へ／次へボタンのないスワイプ専用カルーセルを提供すること: 多くのカルーセルライブラリはジェスチャサポートのみを備えて出荷されます。開発者は、単一ポインタの代替手段を提供するために、ナビゲーションボタンを明示的に設定し、レンダリングする必要があります。
• CSSメディアクエリでタッチデバイス上のナビゲーションボタンを非表示にすること: 一般的なパターンとして、タッチデバイスであると想定される画面（例: @media (pointer: coarse)）で矢印ボタンを非表示にしてしまい、タッチスクリーン上でもそれに依存する運動障害のあるユーザーから単一ポインタ代替手段を奪ってしまうことがあります。
• ズームボタンを提供せず、2本指のピンチジェスチャだけに地図のズームを依存させること: サードパーティの地図埋め込み（カスタム実装）は、ズームコントロールを省略し、ピンチだけを唯一のズーム手段としていることがよくあります。
• 代替のアクションボタンなしでスワイプ削除やスワイプでオプション表示のパターンにのみ依存すること: ウェブアプリのリスト項目が、横方向のスワイプでのみ削除やアクションオプションを表示し、スワイプを安定して行えないユーザー向けのタップベースの同等メカニズムを持たないケースです。
• キーボードやクリックベースの並べ替え代替手段を持たないカスタムドラッグ＆ドロップインターフェース: ドラッグインタラクションは本質的にパスベースです。上下ボタンやカット＆ペーストモデルなどの代替メカニズムを提供しないことは、この達成基準に違反します。
• 描画や署名ウィジェットについて、描いた軌跡自体が出力ではないと想定してしまうこと: 開発者が、実際には単なるUIコントロール（例: コンテンツを表示するためのジェスチャアンロックパターン）であるウィジェットに対して、「本質的」例外を誤って適用してしまうことがあります。本当のフリーハンド入力ツールではない場合、この例外は適用されません。
• 単一ポインタ代替コントロールを可視ビューポート外やデフォルトで折りたたまれた状態に配置すること: DOM上には同等のボタンが存在していても、視覚的に隠されていたり、表示するために追加の操作が必要な場合、知覚可能で操作可能な単一ポインタ代替手段という要件を完全には満たしません。
• ポインタイベントをインターセプトしてデフォルト動作を阻止するジェスチャライブラリを実装すること: event.preventDefault() をタッチイベントで呼び出すライブラリは、ブラウザ自身の単一ポインタインタラクションやスクロールを意図せずブロックしてしまい、ジェスチャ達成基準を超えた不具合を生む可能性があります。
• ジェスチャ専用領域に aria-label を追加するだけで十分だと考えること: スワイプ領域にラベルを付けても、単一ポインタ代替手段を提供したことにはなりません。それは、スクリーンリーダーユーザーに領域の説明をするだけであり、ジェスチャなしでは操作できないという問題は解決しません。
• 実機やタッチシミュレーションでテストしないこと: 開発者がデスクトップのマウスだけでテストしていると、モバイルでは機能がジェスチャ専用になっていることに気づかない場合があります。デスクトップではたまたまマウスクリックのフォールバックが動作していても、タッチ専用のコードパスにはクリックの同等手段がないことがあるためです。

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

トルコの大統領通達 2025/10 は、2025年6月21日付官報第32933号で公布され、トルコで事業を行う幅広い公的・民間主体に対して、ウェブおよびモバイルのアクセシビリティ義務を課しています。この通達は WCAG 2.2 を規範的な技術標準として採用しており、レベルAのすべての達成基準 — WCAG 2.5.1 Pointer Gestures を含む — を法的に必須のベースライン要件としています。

通達における遵守期限は段階的です。公的機関およびその関連団体は、通達の施行から1年以内に適合を達成する必要があり、規制の対象となる民間部門の事業者には、完全な適合に到達するまで2年の猶予が与えられています。遵守しない場合、対象事業者は所管監督当局による規制上の調査や執行措置の対象となる可能性があります。

通達の対象となる主体には、トルコのデジタルサービス提供者の幅広いセグメントが含まれます。あらゆるレベルの政府機関およびその関連団体が対象です。民間部門では、ECプラットフォームおよびマーケットプレイス、銀行および金融機関、民間病院およびヘルスケア提供者、200,000人以上の加入者を持つ通信会社、旅行代理店、民間旅客輸送会社、国民教育省（MoNE）の認可の下で運営される私立学校が通達の適用対象となります。

これらの組織にとって、WCAG 2.5.1 は直接的かつ実務的な影響を持ちます。トルコのECサイトでは、ジェスチャ駆動の製品画像ギャラリー、スワイプベースのカテゴリナビゲーション、ピンチズームの製品ビューアが頻繁に使用されていますが、これらすべてに単一ポインタ代替手段を設ける必要があります。ジェスチャベースの認証パターンやドラッグベースの取引インターフェースを使用する銀行・金融アプリケーションは、監査と是正が必要です。ピンチズームを用いる地図ベースのクリニック検索を備えたヘルスポータルは、ズームボタンを提供しなければなりません。スワイプ駆動のプランセレクタを持つ通信会社のセルフサービスポータルは、タップベースのコントロールを追加する必要があります。

トルコで事業を行う組織は、WCAG 2.5.1 をアクセシビリティ監査チェックリストに直ちに含めることが強く推奨されます。この達成基準の影響を受けるジェスチャインタラクションパターンは、現代のレスポンシブウェブデザインやモバイルファースト開発において広く普及している一方で、大多数のユーザーにとっては正常に機能しているように見えるため、見落とされがちです。この達成基準に積極的に取り組み、WCAG 2.2 レベルA適合プログラムの一環として対応することは、大統領通達 2025/10 に基づく法的義務であると同時に、運動障害のあるトルコのユーザーに対するデジタルインクルージョンを実質的に改善することにもつながります。