達成基準 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: タッチスクリーンが検知されたときに、マウス及びキーボードの利用者のためのコントロールを、非表示／省略している

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

/* 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 を満たさないことになる。