Skip to content

解説書 達成基準 2.5.7:ドラッグ動作 (レベル AA)

要約

目標
利用者のアクションをドラッグに依存しない。
何をすればよいか
ドラッグを伴う全てのアクションに対して、シングルポインタによる代替を提供する。
なぜそれが重要か
マウスを用いて項目をドラッグできない人もいる。

意図

この達成基準の目的は、ドラッグ動作を使用する機能が、要素のドラッグに必要な器用さを必要とせずに、別のシングルポインタ操作モードを持つことを保証することである。

ドラッグ動作を正確に実行できない人もいる。また、トラックボール、ヘッドポインタ、視線システム、音声制御マウスエミュレータなどの特殊な又は適応した入力デバイスを使用する場合もあるが、これによりドラッグが煩雑になり、誤りを誘発する場合がある。

インタフェースがドラッグ動作を使用する機能を実装する場合、利用者は次の四つの個別のアクションを実行する:

  1. タップ又はクリックして始点を確立し、
  2. 押し続けて接触を維持しながら...
  3. ポインタの位置変更を実行して...
  4. 終点でポインタを放す。

全ての利用者が、押し続けて接触を維持しながらポインタの位置を変更するという操作を正確にできるとは限らない。ポインタ (マウス、ペン、またはタッチ接触) を使用する運動障害のある利用者が機能を使用できるように、代替方法を提供しなければならない。

タッチスクリーンデバイスを使用する人々は物理キーボードを使用しない可能性があるため、この要件はキーボードのアクセシビリティとは別個になっている。ドラッグ&ドロップコントロールに遭遇したときに、タブキー、矢印キーなどのキーボード固有の操作ができない場合がある。ただし、テキスト入力を提供することは、ドラッグの代わりにシングルポインタとして受け入れられる可能性があることに注意する。例えば、スライダーの隣に入力欄があり、スライダーで設定したい値を利用者が正確に入力できる場合がある。そのような状況では、タッチの利用者に表示されるオンスクリーンキーボードが、英数字の値を入力するという手段によって、シングルポインタを提供していることになる。

この基準は、ユーザエージェントによって有効にされたスクロールには適用されない。ページのスクロールは範囲外である。また、CSS overflow などの技術を使用してコンテンツのセクションをスクロール可能にすることも対象外である。

他の要件との関係

達成基準 2.1.1 キーボード及び 2.1.3 キーボード (例外なし) は、ドラッグ機能がキーボードでアクセスできることを必要とする。しかし、ドラッグ操作に対してキーボードの同等性を達成しても、自動的にはこの達成基準を満たさない。クリック又はタップだけでは動作しない、ドラッグ又はキーボードコントロールと連動するインタフェースを作成することは可能である。キーボードのアクセシビリティとシングルポインタ操作による操作性の両方に対処するドラッグの代替として多くの設計を作成できるが、二つの要件は個別に評価されるべきである。

この達成基準は、達成基準 2.5.1 ポインタのジェスチャで説明されているポインタジェスチャではなく、ドラッグ動作に適用される。ポインタジェスチャには、方向性のある軌跡ベースのジェスチャだけでなくマルチポイントのジェスチャも含まれる。対照的に、ドラッグ動作の場合は、実際の軌跡ではなく、動作の開始点と終了点だけが問題になる。

追加の例としては、ポインタのダウンイベントによってそのポインタの位置に矩形の 1 番目の x/y 座標を設定し、ドラッグ移動後の次のアップイベントで 2 番目の x/y 座標を設定する選択範囲がある。類似の例として、利用者が質問と対応する回答の間に線を引くように要求される割り当てテストのように、画面上の二つの異なる項目の間に引かれる接続線がある。このような場合、ドラッグ動作には、ドラッグ動作に依存しない同じアクションを達成する別の方法が必要である。例えば、二つの別々のシングルタップ又はクリック操作で、矩形の座標、又は接続線の始点及び終点を定義できる。

同一ページ上でのドラッグ動作の代替

ドラッグ動作によって機能を実行できる、及びドラッグせずにシングルポインタでのアクセスを可能にする同等のオプションが存在する場合、この達成基準に合格する。機能が同等である限り、同じコンポーネントである必要はない。例としては、インジケータをドラッグすることで色を変更できる色相環がある。加えて、色の値を数値入力するテキストフィールドは、ドラッグ動作を必要とせずに色の定義を可能にする。(テキスト入力はデバイスに依存しないと見なされることに注意する。目的は文字を記入することであるが、テキスト入力は音声、ポインタ、又はキーボードを通じて行われることがある。)

ドラッグ動作と軌跡ベースのポインタジェスチャの区別

この達成基準で扱われるドラッグ動作は、始点と終点だけが重要となるポインタの操作である。ポインタがターゲットに接触すると、ポインタがターゲットから外れるまで、ドラッグ動作の方向はインタラクションに考慮されない。ドラッグ動作には中間点がないため、ドラッグ動作は、どの方向にも進むことができる。軌跡ベースのジェスチャは、達成基準 2.5.1 ポインタのジェスチャで扱われる。詳細については、解説書 達成基準 2.5.1 ポインタのジェスチャを参照。

利点

  • ドラッグ動作に苦労する利用者でも、ポインタインタフェースを使用してインタフェースを操作できる。

事例

  • マップでは、利用者がそのマップのビューをあらゆる方向にドラッグして移動でき、そのマップにはビューを移動するための上下左右のボタンもある。
  • 要素の並べ替え可能なリストは、リスト要素をタップ又はクリックした後に、隣接するコントロールを提供し、それらのコントロールをタップ又はクリックするだけで要素をリスト内で上下に移動できる。
  • 利用者がカラム間で項目をドラッグ&ドロップできるタスクボードでは、項目をタップ又はクリックした後に、ポップアップメニュー項目をタップ又はクリックして、選択した要素を別のカラムに移動するための追加のポップアップメニューも提供される。
  • 放射状コントロールウィジェット (カラーホイール) は、現在選択されている色のマーカーを別の位置にドラッグすることで値を設定でき、カラーホイールの別の場所をタップ又はクリックして別の色の値を選択することもできる。
  • 現在の値を示す視覚的なインジケータ (つまみ) をドラッグすることで値を設定できるリニアスライダーコントロールウィジェットは、スライダートラックの任意の点をタップ又はクリックして値を変更して、つまみをその位置に設定できる。
  • あるグループの写真の中の 1 人にギフトをドラッグできるウィジェットには、メニューからギフトを受け取る人を選択できる代替メニューもある。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。

十分なテクニック

  1. G219: Ensuring that an alternative is available for dragging movements that operate on content

失敗

次に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語

支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

ダウンイベント (down-event)

トリガ刺激が depressed (押し下げられた) となった時に発生するプラットフォームのイベント。

ダウンイベントは、「touchstart」「mousedown」など、プラットフォームによって異なる名前を持つ場合がある。

ドラッグ動作 (dragging movement)

ダウンイベントと同時にポインタが要素と結びつき、アップイベントになるまでその要素 (又はその位置の表現) がポインタに追従する操作。

注記

ドラッグ可能な要素の例としては、リスト項目、テキスト要素、画像などがある。

必要不可欠 (essential)

もし取り除いてしまうと、コンテンツの情報又は機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

機能 (functionality)

利用者の操作により実現可能なプロセス及び結果。

プロセス (process)

ある活動を完了させるために必要な利用者の一連の動作。

シングルポインタ (single pointer)

シングルタップ・クリック、ダブルタップ・クリック、長押し、軌跡ベースのジェスチャなど、画面と一つの接点で動作するポインタ入力。

アップイベント (up-event)

ポインタのトリガが解除されたときに生じるプラットフォームイベント。

アップイベントは、プラットフォームによっては「タッチエンド」や「マウスアップ」などの異なる名称で呼ばれている場合がある。

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

Back to Top