「タップして検索」のトリガーを管理する

「タップして検索」は、2015 年 6 月にほとんどの Android スマートフォンを対象に Chrome 43 でリリースされました。ユーザーが Chrome の任意のページのテキストをタップすると、その単語と周囲の関連するテキストが選択されます。検索キーワードは画面下部のバーに表示されます。ユーザーはこのバーをオーバーレイ パネルを開いて、完全な検索結果を表示できます。

「タップして検索」のアニメーション

選択可能で、非インタラクティブ / フォーカス不可能な書式なしテキストでは、タップトリガーが有効になっています。テキストのタップに応答するクリック ハンドラがページにある場合、「タップして検索」はレスポンスを自動的に検出し、デベロッパーがそのイベントを処理する意図を理解しているため無視します。長押しでテキストを手動で選択すると、「タップして検索」バーもトリガーされます。ユーザーは Chrome のプライバシー設定にある設定を使用して、この機能を有効または無効にできます。

サイトの作成者として、特定の要素に対するタップ操作によって検索がトリガーされることを望まない場合がよくあります。Chrome が想定どおりに動作するように、これらの要素を次のように作成します。

  1. フォーカス可能: 要素に tabindex=-1 プロパティを追加します。
  2. インタラクティブ: 標準的な方法のいずれかを使用して、要素がインタラクティブであることを示します。
    • ユーザー補助マークアップを使用して、要素がwidget ロールまたはウィジェット属性を持つことを示します。たとえば、role=button を含む要素はトリガーされません。ユーザー補助マークアップを追加すると、視覚障がいのあるユーザーがページを読みやすくなるという利点もあります。
    • preventDefault() を呼び出すか、DOM や CSS を操作する JavaScript クリック ハンドラでは、「タップで検索」はトリガーされません。
  3. 選択不可: -webkit-user-select: none を使用します。選択不可のテキストは、長押し操作を行っても「タップして検索」をトリガーしません。

「タップして検索」がトリガーされるタイミングや場所でトリガーされない場合や、トリガーが断続的に発生する場合、フォーカス可能またはインタラクティブであるべきでない要素でも、通常はフォーカス可能またはインタラクティブとしてマークされます。「タップして検索」がトリガーされない原因を特定する方法は次のとおりです。

  1. 長押しのジェスチャーでテキストが選択可能かどうかを確認します。テキストを選択しても「タップして検索バー」が表示されない場合は、スマートフォンの [Chrome のプライバシー] にある [タップして検索] の設定で、この機能が無効になっていないか確認してください。また、一部のローエンド デバイスは「タップして検索」をサポートしていません。
  2. テキストを選択すると「タップして検索バー」が表示されるが、タップ時には表示されない場合、タップによるトリガーに問題があります。トリガーが断続的に発生する場合は、要素の JavaScript ハンドラによってアニメーションが条件付きで有効化されていることが問題の原因と考えられます。
  3. トリガーが発生しない場合は、上記のトリガーの理由を確認します(要素がフォーカス可能かインタラクティブかを確認できます)。

上記の手順を行ってもページが想定どおりに機能しない場合は、crbug.com でバグを報告し、「Cr-UI-Browser-Mobile-TouchToSearch」というラベルを追加してください。