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

ツールチップは、カーソル (主にマウスポインタ) を UI (ユーザーインターフェース) コンポーネントの上に合わせると、その UI コンポーネントに関する補足情報がポップアップ表示される機能です。

...といったケースで役に立ちそうです。たとえば昨今ではアイコン主体の UI をよく目にしますが、そのアイコンの説明などで使いたいと思うこともあるかもしれません。

デスクトップアプリケーションではおなじみなので、便利なインタラクションとしてウェブサイトやウェブアプリケーションでも使えそうなツールチップですが、情報アクセシビリティの観点で考えると以下の問題があり、基本的にウェブデザインにおいては用いずに済むのが無難でしょう。

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

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

hover 以外の手段が担保されていればよいのでしょうか?面白い例として、Wikipedia のリンクプレビューが挙げられます。これは Wikipedia でサイト内リンクに hover すると、リンク先ページのイメージがポップアップ表示されるものですが、マウスオーバーだけでなく [Tab] キーでリンクにフォーカスを当てたときにも、ポップアップを開くことができます。キーボード操作に依存せざるを得ない人へのアクセシビリティの配慮として評価できますが、このアプローチも結局タッチインターフェースでは使えないという課題は残ります。

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

もしもタッチインターフェースで、画面タップ手前の hover 相当の操作でツールチップを開くことが可能であったら、どうでしょうか?

UI コンポーネントに対する「長押し」や「押し込み」についてはユーザーエージェント固有の機能が既に割り当てられているので (別タブで開く、リンク先をプレビューする、など)、仮に hover 相当の操作が可能だとしたら、たとえば UI コンポーネントが表示されているスクリーンに指を近づけた状態を維持 (文字通り「ホバリング」ですね) するとツールチップが開く、というインタラクションでしょうか。面白そうですが、ユーザーの身体的負荷を高めてしまう恐れもあり、慎重な検討が必要だと思います。(ユーザーがこのインタラクションを使いこなすには、画面と指との間で、ある一定の距離を半ば意図的にコントロールできなければならないでしょう。このコントロールがうまくできないと、hover 状態を意図通りに維持できなかったり、あるいは不意に hover がはたらいてメインコンテンツ閲覧の邪魔になってしまったり...といったことが起こりそうです。)

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

タッチインターフェースでも利用可能で、ユーザーに身体的な負荷をかけることがなく、ユーザーの任意で使える (不意に開くことがなく、開きたいときにのみ開く) ツールチップがあれば、どうでしょうか?

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

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

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

この実装自体は十分にアクセシブルであると言えます。ただ、ユーザビリティも含めて考えると、以下の課題があるかな、と思います。

結局のところ、トグルチップを開くためのトリガーは、「補足説明」や「追加情報」を開く旨を明確に伝えるラベルなりアイコンに限定されそうです。(補足情報が必要な UI コンポーネントに隣接する形で、上記のサンプルコードにあるような「i」マークが控えめに配置されていて、その「i」マークを押すことでトグルチップが開く、という具合です。)


こうして考えると、本来あるべきラベルまで削ぎ落としたような、ツールチップに依存しないとユーザーに意味が伝わらないような UI は、特に利用コンテキスト (その時どきで使われるデバイス) が多様なウェブサイトやウェブアプリケーションにおいては、筋が悪いなと改めて感じます。過不足のないテキストや、十分にイディオムとして定着した視覚的表現 (アイコンなど) を用いて、わかりやすく (誤解なく) 情報をユーザーに伝えること、をまずは基本として考えたいものです。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加