ツールチップについて考える

ツールチップは、カーソル (主にマウスポインタ) をユーザーインターフェース (UI) コンポーネントの上に合わせると、そのコンポーネントに関する補足情報がポップアップ表示される機能です。以下のようなケースで役に立ちそうですし、アイコン主体の UI をよく見る昨今、そのアイコン説明などで積極的に採用したいと考えるデザイナーや開発者も多いかもしれません。

デスクトップアプリケーションではおなじみなので、便利なインタラクションとしてウェブサイトやウェブアプリケーションでも使えそうなツールチップですが、情報アクセシビリティの観点で考えるといくつかの問題があります。

ツールチップはキーボードやタッチインターフェースでアクセスできない

ツールチップは基本的に UI コンポーネントに対する hover (マウスオーバー ) によって開きます。マウス利用を前提としているため、運動障害や視覚障害などでキーボード操作に依存せざるを得ないユーザーや、タッチンターフェース (スマートフォンやタブレット) のユーザーにとっては、ツールチップによって提供される情報にアクセスできない恐れがあります。

hover 以外の手段でも利用可能なツールチップもあり、面白い例としては Wikipedia のリンクプレビューを挙げることができます。これは Wikipedia コンテンツに含まれるサイト内リンクに hover すると、リンク先ページの概要がポップアップ表示されるものですが、Tab キーでリンクにフォーカスを当てたときにも、同様にポップアップを開くことができます。キーボード操作のアクセシビリティという観点では評価できますが、このアプローチも結局タッチインターフェースでは利用できないという課題は残ります。

もしもタッチインターフェースで hover できたら...?

現時点では実現されていませんが、もしもタッチインターフェースで、hover 相当の操作が可能であったら、どうでしょうか?

UI コンポーネントに対する「長押し」や「押し込み」についてはユーザーエージェント固有の機能が既に割り当てられているので (別タブで開いたり、リンク先 URL をコピーするなど)、それ以外の動作で hover 相当の操作をするとしたら、たとえば UI コンポーネントが表示されているスクリーンに指を近づけた状態を維持するとツールチップが開く、というインタラクションが考えられるでしょうか。面白そうですが、実際にはユーザーの身体的負荷を高めてしまい、現実的ではないでしょう。(ユーザーがこのインタラクションを使いこなすには、スクリーンと指との間で一定の間隔を保持できなければならなりません。これがうまくできないと、hover 状態を意図通りに維持できなかったり、あるいは不意に hover がはたらいてツールチップがメインコンテンツ閲覧の邪魔になってしまったり、といったことが起こりそうです。)

「トグルチップ (toggletips)」という試み

キーボード操作のみならずタッチインターフェースでも利用可能で、かつユーザーに身体的な負荷をかけることもなく、ユーザー自身が利用をコントロールできる (不意に開くことがなく、開きたいときにのみ開く) ツールチップがあれば、どうでしょうか?

インクルーシブ HTML + CSS & JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン」や「コーディング Web アクセシビリティ — WAI-ARIA で実現するマルチデバイス環境の Web アプリケーション」の原著者である Heydon Pickering 氏は、ブログ「Inclusive Components」の記事「Tooltips & Toggletips」の中で、ツールチップに代わる「トグルチップ (toggletips)」を提唱しています。

トグルチップは、マウスによるクリック、指によるタップ、およびキーボード操作 (Tab キーによるフォーカスと Enter キーによる実行) で開くことができます。開いたトグルチップは、域外クリック/タップ、他の UI 要素へのフォーカス移動、または Esc キーによって閉じることができます。以下、Heydon Pickering 氏によるサンプルコードです。

See the Pen Toggletip from paragraph by Heydon (@heydon) on CodePen.

この実装自体は十分にアクセシブルであると言えます。ただ、このようなクリック操作 (あるいは同等の、タップまたは Tab & Enter キー操作) によるインタラクションは、一般的には、リンクであればページ遷移でしょうし、ボタンであればそのボタンによる機能の実行でしょう。ここでツールチップ的な補足情報が開いてしまうと、ユーザーのメンタルモデルと異なる挙動になり、混乱を招いてしまう恐れがあります。

結局のところ、トグルチップを開くトリガーとなり得るのは、補足情報を展開表示する旨を示すラベルなりアイコンに限定されそうです。補足情報が必要な UI コンポーネントに隣接する形で、上記のサンプルコードにあるような「i」マーク (あるいはより具体的なラベル) が控えめに配置されていて、その「i」マークをクリック (またはタップ、Tab & Enter キー操作) することでトグルチップが開く、というイメージです。


こうして考えてみると、UI コンポーネントに関する補足情報を、多様な利用環境において等しくアクセシブルに、かつユーザーのメンタルモデルに沿うように、ツールチップという形態で提示するのは、簡単ではないと言えそうです。

やはり基本としてはまず、ツールチップによる補足情報がなくてもユーザー体験が成立するような UI 設計にすることが大事で、どうしてもツールチップを採用したい場合は、アクセシブルなトグルチップを (ユーザーのメンタルモデルに合ったトリガーを明示的に配置する形で) 実装する、というのが次善策になるのかな、と思います。