タッチ画面のある端末ではタップでしか押せないボタン

あるショップのマグカップ一覧には、上に「絞り込み」ボタンがあり、押すと色を選ぶパネルが開きます。以前のスマートフォンのブラウザーは、ダブルタップでの拡大に備えて、タップから約300ミリ秒待ってからクリックを送っていました。タップの反応を速くするため、このショップのスクリプトは、ブラウザーがタッチに対応しているかを調べ、対応していれば click の代わりに touchend を待ちます。スマートフォンでは、指を離した瞬間に「絞り込み」が開きます。

タッチ画面付きのノートパソコンでも、この判定は真になります。タップで「絞り込み」を開き、トラックパッドで色を選んでから、パネルを閉じようと「絞り込み」をクリックしても、何も起きません。キーボードを使う人がTabキーで「絞り込み」に移ってEnterキーを押しても、何も起きません。ChromeやEdgeでは、音声操作で「絞り込みをクリック」と言っても同じです。開け閉めできるのは、画面に触れた指だけです。

レベルAAAのWCAG 2.5.6「入力メカニズムの共存」は、プラットフォームで使える入力方法をコンテンツが制限しないことを求めています。例外は、制限が不可欠な場合、セキュリティのために必要な場合、利用者の設定を尊重するために必要な場合だけです。タッチ画面付きのノートパソコンでは、タッチ、トラックパッドやマウス、キーボードを同時に使え、利用者はいつでも持ち替えられます。W3Cは、このパターンを失敗例F98として挙げています。Touch EventsのAPI、メディアクエリーの pointer: coarse、navigator.maxTouchPoints などでタッチ画面を見つけ、タッチ専用のリスナーを選ぶものです。ここではどの例外にも当たりません。絞り込みのパネルにタッチが不可欠な理由はなく、この判定はセキュリティとも、利用者が選んだ設定とも関係がありません。

'ontouchstart' in window で分かるのは、ブラウザーがタッチイベントに対応していることだけです。タッチ画面付きのノートパソコンのChromeとEdgeは対応しており、WindowsとLinuxのFirefoxもタッチ画面を見つけると対応します。スマートフォンやタブレットのブラウザーは、ほかに何をつないでいても対応しています。マウスが送るのはマウスのイベントと click で、touchend は送りません。フォーカスしたボタンでのEnterキーとSpaceキーも同じです。スクリーンリーダーや音声操作がブラウザーのアクセシビリティの仕組みを通してボタンを押すと、ChromeとEdgeではマウスのイベントと click が届きます。Firefoxは、タッチイベントが有効なら touchstart と touchend も一緒に送るため、こうした押下でもパネルが開きます。そのため、ChromeとEdgeでは指以外の押し方がすべて、Firefoxではマウスとキーボードが、誰も待っていないクリックとしてページに届きます。Touch Eventsの仕様は、まさにこの判定を避けるよう書いています。タッチイベントに対応していても、タッチ画面だけが入力方法とは限らず、「タッチか、マウスとキーボードか」で分けたリスナーはサイトをタッチ専用にしてしまう、という内容です。F98は、判定が真になる端末では、達成基準2.1.1「キーボード」も満たさないことが多いと述べています。

この判定が避けようとした待ち時間は、もうありません。Chromeでは2014年から、iOSのSafariでは2016年から、viewportのmetaタグで width=device-width を指定したページなら、タップの直後にクリックが送られます。

タッチ画面付きのノートパソコン、キーボードカバーを付けた2-in-1のタブレット、Bluetoothのキーボードやマウスをつないだスマートフォンやタブレットは、どれもタッチ画面とほかの入力方法を併せ持つため、影響はスマートフォンにとどまりません。

10グループ中3グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 手の操作が限られる タッチ画面付きのノートパソコンやキーボードを付けたタブレットで、キーボード、スイッチ、音声操作を使う人は、Enterキーで押します。Enterキーはクリックとしてページに届くため、パネルは開きません。ChromeとEdgeでは、「絞り込みをクリック」という声も、マウスのイベントとクリックとして届くため、何も起きません。
• 筋力や可動域が限られる 手にふるえがある人や疲れやすい人は、作業の途中で、画面、マウスやトラックボール、キーボードを使い分けることがあります。ここでは、画面に手を伸ばすのがどれほどつらくても、指で触れるしかありません。
• 視覚を使わない タッチ画面付きのノートパソコンのChromeやEdgeでは、NVDAやJAWSなどのスクリーンリーダーでボタンを押すと、クリックとしてページに届き、touchendは届きません。そのため「絞り込み」は折りたたみと読まれたまま開きません。Firefoxはアクセシビリティの仕組みを通した押下にタッチのイベントも加えるため、Firefoxでは開きます。

ボタンには名前、役割、aria-expanded の状態があり、マークアップのチェックはすべて合格します。スキャンはタッチ画面のないデスクトップのブラウザーで動くため、判定は偽になり、ページは click を待ちます。スクリプトでのクリックもキー操作もすべて成功します。axeにはこれを調べるルールがありません。EaseWebの診断は、各ページをタッチ画面を模擬した状態でもう一度開き、コントロールを比べます。1回目には自身の click のリスナーがあり、2回目には touchend か touchstart のリスナーがあって click、pointerup、mouseup のリスナーがないコントロールと、1回目に表示され2回目に隠れているコントロールを、要確認として記録します。確定としないのは、クリックがページの上位の要素で処理されている場合があるためです。フレームワークがページのルートに付けるリスナーは見えません。このコードは、タップの待ち時間を扱った古い回答や解説に今も出てくるため、それを元に生成されたコードにも入り込むことがあります。