ツールチップの役割
慣習のないアイコンは意味が伝わりにくく（Norman, 1999）、ツールチップが名前を補います。補足だけに短く使います（Kendrick, 2019）。拡張ヘルプは理解を深め（Grossman & Fitzmaurice, 2010）、段階的開示に通じます。
モバイルにはホバーがない
長押しは気づかれにくい（Google, n.d.）ため、常時ラベルかⓘボタンを使い、タップ領域を確保します（Parhi et al., 2006）。アフォーダンスの弱いアイコンほどラベルが必要です。
避ける内容とアクセシビリティ
必須情報やエラーは入れず、リンクも避けます。role=tooltipとaria-describedby、Escで閉じる（W3C, n.d.）。WCAG 2.2の1.4.13は閉じられ、上に移動でき、持続することを求め、拡大利用者にも重要です。
よくある質問
- モバイルで使える？
- 長押しは見つけにくいので、ラベルかⓘボタンが確実です。
- リンクを入れても？
- 避け、ポップオーバーなどを使います。
出典確認日：2026-10-27
参考文献
- Kendrick, A. (2019, January 27). Tooltip guidelines. Nielsen Norman Group. ツールチップに入れる内容の指針です。
- Google. (n.d.). Tooltips. Material Design 3. 通常とリッチなツールチップの指針です。
- World Wide Web Consortium. (n.d.). Tooltip pattern. ARIA Authoring Practices Guide. role=tooltipとEscの規則です。
- Grossman, T., & Fitzmaurice, G. (2010). ToolClips: An investigation of contextual video assistance for functionality understanding. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1515–1524). ACM. 拡張ツールチップで理解が深まる研究です。
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. アイコンに補足が要る理由の論考です。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 小さな情報アイコンのタップ領域です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.4.13ホバー・フォーカス時の内容です。