LEARN BY EXAMPLE
2.5.1 ポインタのジェスチャ レベル A
複数の指や決まった軌跡を使わずに操作できる。
概要
複数の接点や決まった軌跡を使う操作には、1つの接点で軌跡をたどらずに同じ機能を使える方法を用意します。例えば、横へ素早くスワイプして記事を切り替える画面に、「前の記事」「次の記事」ボタンを添えます。必要不可欠な場合の例外は「条件と補足」で説明します。
お知らせの記事切り替え
利用者が困る例 横へ滑らせる操作だけ
決まった軌跡で動かせないと、次を読めません。
クリックやタップだけで次の記事へ進む方法がありません。
改善した例 ボタンでも切り替え
写真教室のお知らせ
「次の記事」をクリック、またはタップします。キーボードではTabでボタンへ移り、EnterかSpaceで実行できます。
1 / 3
秋の撮影会
公園で紅葉を撮影します。
記事1 / 3:秋の撮影会
最後の記事の次は最初へ戻ります。自動切り替えはありません。
1つのボタンを押して、次を読めます。
指を滑らせずに、同じ記事へ進めます。
達成できないと起こる問題の例
写真教室のお知らせで、次の記事を読みたい場面です。画面上を横へ素早く滑らせる操作だけで記事が切り替わり、途中で指が上下にそれると反応しません。
手の動きを細かく調整することが難しい利用者や、1点を指してクリックする装置を使う利用者は、次の記事へ進めません。クリックやタップができても、指定された軌跡で動かせるとは限りません。
達成するための改善例
同じお知らせに「前の記事」「次の記事」ボタンを用意します。「次の記事」をクリック、またはタップすると、次の記事が表示されます。複数の指を同時に使ったり、指を横へ滑らせたりする必要はありません。
スワイプ操作を残したまま、ボタンでも同じ記事に進めるようにできます。図の「改善した例」ではボタンによる切り替えを試せます。
確認のポイント
- 2本以上の指を同時に使う操作や、決まった方向・形に沿って動かす操作はありませんか。
- それぞれの機能を、1つの接点で軌跡をたどらずに操作できますか。
- 代わりのボタンなどでも、同じ記事・倍率・選択結果にたどり着けますか。
- キーボード対応に加え、クリックやタップだけでも操作できることを確認しましたか。
条件と補足
複数の接点と軌跡
2本の指でつまんで拡大・縮小する操作のように、複数の接点を同時に使う操作を「マルチポイント」と呼びます。1本の指、マウス、ペンなど、1つの接点で行う操作が「シングルポインタ」です。例えば地図の拡大・縮小なら、「拡大」「縮小」ボタンが代わりの方法になります。
「軌跡ベース」は、途中をどう動かすかが操作の意味に関わるものです。指定方向へのスワイプや、決まった形をなぞる操作が当たります。何かを押したまま動かすという理由だけで、すべてを軌跡ベースとはみなしません。
代わりの操作は1回で終わる必要はありません。軌跡を要求しないクリックやタップなどを組み合わせて、同じ機能を使える方法でもかまいません。
ドラッグとキーボードとの関係
物をつかみ、途中の経路を問わず別の位置で離すドラッグは、この基準の軌跡ベースの操作には当たりません。ドラッグなしで使える方法は、2.5.7「ドラッグ動作」で別に確認します。多点操作やスワイプの代わりをドラッグだけにすると、2.5.7を満たせない場合があります。
キーボードで操作できるだけではこの基準を満たしません。ポインタだけで操作する利用者にも代わりの方法が必要です。2.1.1「キーボード」も併せて確認します。図のボタンはどちらの操作にも対応しています。
対象と例外
対象は、制作者がウェブコンテンツに実装したジェスチャです。ブラウザーの通常のスクロールや、支援技術そのものを操作するためのジェスチャは対象外です。
複数の接点や軌跡そのものが必要不可欠な機能は例外です。「必要不可欠」は、それを取り除くと情報や機能が根本的に変わり、WCAGを満たす他の方法でも実現できないことを指します。署名の形を入力する行為は軌跡を必要とし得ますが、本人確認という目的全体に軌跡が必須とは限りません。
この図で扱う範囲
図は、制作者が実装した横方向のスワイプの代わりに、ボタンで記事を切り替える方法を示します。スワイプ自体は再現していません。記事は自動で切り替わらず、最後の記事の次は最初の記事に戻ります。この例だけでページ全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体:2.5.1 Pointer Gestures(要件)
- WAIC:2.5.1 ポインタのジェスチャの解説(日本語訳)
- W3C:Understanding 2.5.1(英語公開版)
- W3C:G215 同じ結果を得られる操作部品を用意する方法(実装例)
テクニックは達成する方法の例です。すべての画面に記事切り替えボタンを要求するものではありません。
出典の最終確認: 2026-11-09。写真教室と記事は、この教材のために作った例です。