俺が考えたアクセシビリティに考慮した最強のツールチップ

目次

はじめに

アクセシビリティ素人が Tooltip のアクセシビリティ、UX について考えてみました。「俺が考えた最強のツールチップ」という妄言だと思って読んで頂ければ幸いです。

ツールチップとは

そもそもツールチップとは、普段は隠れているものの、ポインターをホバーしたり、キーボードフォーカスを当てると、補足情報を表示するコンポーネントです。ホバーアウトしたり、フォーカスが外れたりしたら自動的に閉じられます。
普段、様々なウェブサイトを使っていく中で、個人的にフラストレーションがたまる UI 要素がツールチップです。
そこで、自分が最も使いやすいと感じるツールチップについて書いてみます。

ベストプラクティス

まずは世の中のベストプラクティスを調べてみます。
  • できればツールチップを使わずに、通常のテキストで書くべき
  • ポインターをホバーしたり、キーボードフォーカスを当てると、ユーザーの明示的な指示なく表示する
  • 明示的に Escape を押した場合は閉じる
  • ツールチップにフォーカスを持たない
  • (フォーカスを持たないので)リンクなどのインタラクティブな要素は含めない
  • (i) ボタンなど用いるのでなく、該当する要素に関連付ける
  • WAI-ARIA ロールを付ける
ARIA: tooltip role - Accessibility | MDN
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
Tooltip Widget | APG | WAI | W3C
https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

世の中のツールチップ

以上、ベストプラクティス完全に理解したところで(←わかっていない)、世の中のツールチップを見て感想を書いてみます。特に批判する目的ではなく、参考として載せさせて頂きました。

マネーフォワード

ポイントサイト連携時の換算レートに関する補足ツールチップを見てみます。
次の点を課題に感じました。ツールチップを表示するのにかなりの技術が必要だと感じました(?)
  • マウス操作を前提とした UI のため、マウス以外の方法でツールチップを表示できない
  • ツールチップを表示するためのアイコンのエリアが狭い (ピンポイントでアイコンにホバーする必要がある)
  • ツールチップを表示すると判定エリアの上に被さるため、表示できず点滅することがある
  • ツールチップ上は判定エリアに含まれていないため、テキストのコピーなどができない

Google Analytics

行動→「サイトの速度」→「速度についての提案」にあるツールチップを見てみます。
次の点を課題に感じました。正確なマウス操作が求められる UX だと感じます。
  • マウス操作を前提とした UI のため、マウス以外の方法でツールチップを表示できない
  • ツールチップを表示するためのアイコンのエリアが狭い (ピンポイントでアイコンにホバーする必要がある)
  • アイコンが横のソートアイコンと隣接していて見えにくい
  • ツールチップ内にリンクがあり、消えないうちにマウスを移動する必要がある (ゆっくり移動すると消えてしまう)

Youtube Studio

最近デザインが一新された Youtube Studio の Analytics にあるツールチップを見てみます。
個人的には課題を感じませんでした。下記の点が気が利いてるなと思います。
  • (i) ボタンを用いておらず、該当する要素に関連付けられている
  • ツールチップの内容を選択するこどがてきる
  • キーボード操作が可能
  • Disabled のボタンにもキーボードフォーカスがあたり、ツールチップが表示される (キーボードでの操作ユーザーにも選択できない理由を提供できている)
  • WAI-ARIA ロールが付いている

俺が考えた最強のツールチップ

Youtube Studio のツールチップは PC で使う上ではとても良かったのですが、タッチデバイスでは正しくツールチップを表示することが出来ません。Youtube Studio の場合はモバイルアプリが提供されており、PC からのアクセス前提でも大丈夫だと判断されたのかと思います。
そこで、私の考える最強のツールチップはこちら!!
このツールチップはこのような特徴があります。
  • (?)ボタンを表示する。他のボタンとサイズやデザインの統一感を持たせて小さくしない ((?)ボタンがツールチップを表示するボタンとして認知されているため、ツールチップが表示されることが予想できる)
  • ボタンにポインターをホバーしたり、キーボードフォーカスを当てたり、ボタンをクリックすると、ツールチップが表示される
  • ツールチップの上にも判定があり、テキストの選択が可能
  • ツールチップにフォーカスは持たせない
  • ツールチップにリンクなどのインタラクティブな要素は含まない
  • 明示的に Escape を押したり、ボタンをクリックした場合は閉じる
  • WAI-ARIA ロールを付ける
ポートフォリオの トップページ の下部にあるので色々触ってみてください。
React かつ MUI を使用していますが、ソースコードは GitHub にあります。もし参考になればスター頂ければ幸いです。

まとめ

  • 誰もが、どのデバイスでも使いやすいツールチップについて整理しました
  • ツッコミお待ちしております

シェア

Twitter
Facebook
はてブ
LinkedIn
LINE
Pocket