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


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

:::note warn

※ これは2022-12-09に[個人ブログ](https://bicstone.me)で公開した記事を移植し、[CC0-1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.ja)で提供しています。情報は古い可能性があります。

:::

## ツールチップとは

そもそもツールチップとは、普段は隠れているものの、ポインターをホバーしたりキーボードフォーカスを当てると、補足情報を表示するコンポーネントです。ホバーアウトしたり、フォーカスが外れたりしたら自動的に閉じられます。

普段、様々なウェブサイトを使っていく中で、ツールチップは個人的に最もフラストレーションがたまるUI要素です。

そこで、自分が最も使いやすいと感じるツールチップについて書いてみます。

## ベストプラクティス

まずは世の中のベストプラクティスを調べてみます。

- できればツールチップを使わずに、通常のテキストで書くべき
- ポインターをホバーしたり、キーボードフォーカスを当てると、ユーザーの明示的な指示なく表示する
- 明示的にEscapeを押した場合は閉じる
- ツールチップにフォーカスを持たない
- (フォーカスを持たないので)リンクなどのインタラクティブな要素は含めない
- (i) ボタンなど用いるのでなく、該当する要素に関連付ける
- WAI-ARIAロールを付ける

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

## 世の中のツールチップ

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

### マネーフォワード

ポイントサイト連携時の換算レートに関する補足ツールチップを見てみます。

![マネーフォワードの画面収録。マウスをはてなアイコンの上に載せるとツールチップが表示されるが、判定が異常に狭くツールチップの表示に苦戦している様子。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684999/87b7c7f9-c341-321b-e9e7-00017d5356c3.gif)

次の点を課題に感じました。ツールチップを表示するのにかなりの技術が必要だと感じました(?)

- マウス操作を前提としたUIのため、マウス以外の方法でツールチップを表示できない
- ツールチップを表示するためのアイコンのエリアが狭い (ピンポイントでアイコンにホバーする必要がある)
- ツールチップを表示すると判定エリアの上に被さるため、表示できず点滅することがある
- ツールチップ上は判定エリアに含まれていないため、テキストのコピーなどができない

### Google Analytics

行動 →「サイトの速度」→「速度についての提案」にあるツールチップを見てみます。

![Google Analyticの画面収録。マウスをはてなアイコンの上に載せるとツールチップが表示されるが、横のアイコンと近くわかりにくい。ツールチップにはリンクがあるが、マウスの移動が遅いとツールチップが消えてしまう。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684999/5677f116-c434-f4d7-d6b0-4fe40703f7fc.gif)

次の点を課題に感じました。正確なマウス操作が求められるUXだと感じます。

- マウス操作を前提としたUIのため、マウス以外の方法でツールチップを表示できない
- ツールチップを表示するためのアイコンのエリアが狭い (ピンポイントでアイコンにホバーする必要がある)
- アイコンが横のソートアイコンと隣接していて見えにくい
- ツールチップ内にリンクがあり、消えないうちにマウスを移動する必要がある (ゆっくり移動すると消えてしまう)

### Youtube Studio

最近デザインが一新されたYoutube StudioのAnalyticsにあるツールチップを見てみます。

![Youtube Studioの画面収録。ボタンにホバーを当てたりフォーカスするとツールチップが表示される。ツールチップのテキストを選択できる。無効なボタンにはツールチップでボタンが選択できない理由を表示されている。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684999/866a6cb6-acdf-9339-bb64-8c9910590f2c.gif)

個人的には課題を感じませんでした。次の点について気が利いていると感じました。

- (i) ボタンを用いておらず、該当する要素に関連付けられている
- ツールチップの内容を選択するこどがてきる
- キーボード操作が可能
- Disabledのボタンにもキーボードフォーカスがあたり、ツールチップが表示される (キーボードでの操作ユーザーにも選択できない理由を提供できている)
- WAI-ARIAロールが付いている

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

Youtube StudioのツールチップはPCで使う上ではとても良かったのですが、タッチデバイスでは正しくツールチップを表示することが出来ません。Youtube Studioの場合はモバイルアプリが提供されており、PCからのアクセス前提でも大丈夫だと判断されたのかと考えられます。

そこで、私の考える最強のツールチップはこちら！

![当サイトトップページの画面収録。ツールチップがボタンになっており、ボタンにホバーを当てたりフォーカスするとツールチップが表示される。ツールチップのテキストを選択できる。ボタンをクリックしても表示と非表示を切り替えることができる。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684999/12c10d24-defe-3ad2-5d53-199b8f61d417.gif)

このツールチップはこのような特徴があります。

- (?)ボタンを表示する。他のボタンとサイズやデザインの統一感を持たせて小さくしない ((?)ボタンがツールチップを表示するボタンとして認知されているため、ツールチップが表示されることは予想できる)
- ボタンにポインターをホバーしたり、キーボードフォーカスを当てたり、**ボタンをクリックすると**、ツールチップが表示される
- ツールチップの上にも判定があり、テキストの選択が可能
- ツールチップにフォーカスは持たせない
- ツールチップにリンクなどのインタラクティブな要素は含まない
- 明示的にEscapeを押したり、**ボタンをクリックした**場合は閉じる
- WAI-ARIAロールを付ける

ReactかつMUIを使用していますが、ソースコードは [GitHub](https://github.com/bicstone/portfolio/blob/e91b1760851aaa26e3453796d6f4c3df63e594c7/src/pages/index.tsx#L113) にあります。

もし需要がありそうであれば、独立したソースコードとして公開することも考えています。

## まとめ

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