達成基準 2.5.6 の失敗例 - タッチスクリーンデバイスにおいてインタラクションがタッチのみに限定されている

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

インタラクティブなコントロール (リンク、フォーム入力、又は複雑なカスタムウィジェットなど) を含み、異なる入力モダリティの存在を検知することができるすべての技術。

この達成方法は、達成基準 2.5.6: 入力メカニズム非依存 (失敗) に関連する。

解説

この失敗例の目的は、タッチスクリーンを有するデバイスの利用者が、利用可能な他の入力モダリティ (追加の/外付けのマウスやキーボードなど) を使用できない状況を記述することである。

ウェブコンテンツには、利用者のデバイスがタッチスクリーンを有するかどうかを判定するための様々な方法やヒューリスティックがある。しかし、タッチスクリーンが存在する場合であっても、他の入力モダリティも利用者は利用可能な場合がある。利用者はタッチスクリーンを (専ら) 使用して、ウェブコンテンツとやり取りするとは限らない。

タッチスクリーンが検知されたときに、ウェブコンテンツがタッチのみで操作されるように設計されている場合は、これらの利用者は他の (好ましいと思われる) 入力メカニズムを使用してコンテンツを操作することができなくなる。

事例

例 1: タッチスクリーンが検知されたとき、タッチ固有の JavaScript のイベントリスナーのみを使用している

これらのタイプのアプローチは、歴史的に「モバイル」固有の開発でよく使われており、タッチスクリーンのインタラクションをより反応よく、即時性の高いものにしている (タッチインタラクションがかつて、「タップ」のインタラクションと一般的な click イベントの発火との間に、約 300 ミリ秒の遅延を追加的に設けていたことによる)。


/* inferring the presence of a touchscreen based on
   support for the Touch Events API  */

if (window.TouchEvent || ('ontouchstart' in window)) {
  /* set up event listeners for touch */
  target.addEventListener('touchend', ...);
  ...
} else {
  /* set up event listeners for mouse/keyboard */
  target.addEventListener('click', ...);
  ...
}
				

/* inferring the presence of a touchscreen based on
   the CSS Media Queries 4 Interaction Media Features
   match for a "coarse" primary input mechanism */

if (window.matchMedia && window.matchMedia("(pointer:coarse)").matches) {
  /* set up event listeners for touch */
  target.addEventListener('touchend', ...);
  ...
} else {
  /* set up event listeners for mouse/keyboard */
  target.addEventListener('click', ...);
  ...
}
				

同様に、タッチスクリーンが検知されたときに、関連する/必要なキーボードのイベントリスナー (例えば、タブインターフェースなど複雑なウィジェットに対して正しくキーボードインタラクションを行うためのもの) を省略するウェブコンテンツは、タッチデバイスという前提のもとでは、キーボードのサポートは必要ないであろう。


/* inferring the presence of a touchscreen based on
   the navigator.maxTouchPoints property defined in
   the Pointer Events API */

if (window.PointerEvent && ('maxTouchPoints' in navigator) &&
    (navigator.maxTouchPoints > 0)) {
	/* no need to listen to keyboard - there's a touchscreen... */
	...
} else {
	/* set up event listeners for keyboard interactions */
  target.addEventListener('keyup', ...);
  ...
}
				
注記

一般的に、これらのアプローチは、達成基準 2.1.1 キーボードの失敗も併せてもたらすが、それはタッチスクリーンインターフェースも検知された状況でのみ、該当する。

例 2: タッチスクリーンが検知されたときに、マウス及びキーボードの利用者のためのコントロールを、非表示/省略している

コンテンツのカルーセルなど、インタラクティブなウィジェットを含むウェブコンテンツで、ウィジェットを操作するための可視ボタン (前へ/次へボタンや、可視スクロールバー/スライダーなど) を持つものがある。これらの可視コントロールは、利用者が単にタッチジェスチャを用いてウィジェットを操作するという仮定のもと、タッチスクリーンが検知されたときに非表示/省略され、キーボード又はマウスの利用者には他の代替手段が提供されない。


/* using CSS Media Queries 4 Interaction Media Features
   to hide particular elements in the page (such as a container
   with visible controls) when a "coarse" primary input is present */

@media (pointer: coarse) {
  #widget .controls { display: none; }
}
				

特定の実装によっては、タッチジェスチャを反映したウィジェットに対して、コンテンツ制作者はマウスによるインタラクションを可能にすることができる。例えば、マウス利用者が、クリック可能な前へ/次へのコントロール又はスクロールバーだけでなく、カルーセルのドラッグ/スワイプもできるようにするなどである。このような場合、タッチスクリーンが検知されたときにコントロールを非表示しても、利用者はマウスでウィジェットを操作することができる (タッチスクリーンが検知されたときに、前掲の例のようにこのインタラクションが抑制/省略されていない限りは)。しかし、そのウィジェットに対してキーボードでのみ操作可能なコントロールが隠されていて、かつキーボード利用者のための代替手段 (カーソルキー操作を可能にするなど) が提供されていない場合、この状況は達成基準 2.5.6 を満たさないことになる。

注記

一般的に、これらのアプローチは、達成基準 2.1.1 キーボード及び (利用者が行うことが期待されるタッチジェスチャによっては) 達成基準 2.5.1 ポインタのジェスチャーも併せて満たさないことになる。

検証

手順

  1. タッチスクリーン及び少なくとも 1 つの追加的な入力モダリティを備えたデバイスで、コンテンツを開く。これには、タッチ対応のラップトップパソコンや、タッチスクリーンのデバイス (スマートフォン又はタブレット) で外部キーボード及びマウスとペアリングされているものを含む。
  2. 全てのインタラクティブなコントロールが、タッチスクリーンだけでなく、追加の入力メカニズム (キーボード及びマウス) も用いて操作可能であることを確認する。
  3. タッチスクリーンが存在することでインタラクティブなコントロールが表示されない場合 (タッチスクリーンのないデバイスで見たときに同じコンテンツと比較して)、他の追加入力メカニズムの利用者がコンテンツを操作するための代替コントロール/手段があることを確認する。

期待される結果

  • 手順 #2 又は #3 が偽である場合、コンテンツは達成基準を満たさないことになる。