Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yamatai12in株式会社iimon

「ツールチップ チョットデキル」になりたい

Last updated at Posted at 2024-04-28

今回は素のHTMLでのツールチップについての内容です。

概要

  • 分かりやすいアイコン、ラベルで表現できればツールチップは不要
  • デフォルトのブラウザのツールチップよりもARIAのツールチップの方がフォーカス、タッチ時に表示できる点で優れている
  • ツールチップには以下の２つの用途がある
    • ラベル
    • 補助的な説明
  • トグルチップというものもあってこれは、アイコン自体を補助的にするという点がツールチップと異なる

1. 背景

最近ツールチップの実装をRvすることがあリました。
これを機にツールチップについて調べてみます。

2. MDN, ARIA Authoring Practices Guide (APG)

ブラウザのデフォルトのツールチップ

demo

See the Pen BROWSER NATIVE TOOLTIP by 山根大生 (@uuylkesg-the-styleful) on CodePen.

長いマウス・ホバーで要素のタイトル属性を表示する方法です。
キーボード・フォーカスやタッチ操作ではタイトル属性を表示できません。

ARIA tooltip roleを使ったツールチップ

demo

See the Pen MDN DEMO TOOLTIP by 山根大生 (@uuylkesg-the-styleful) on CodePen.

  • 説明される要素のaria-describedby属性にツールチップの要素のidの値を指定する
  • ツールチップにはrole=tooltipを付与する
  • Escキーを押された時にツールチップを非表示にする

動作

  • ある要素にフォーカスが当たった時や、その要素にカーソルが当たった時に、その要素に関する文脈情報を提供する
  • 短い遅延の後に自動的に表示する
  • フォーカスが失われるか、マウスが離れると自動的に閉じられる
  • マウスがツールチップの上に移動したときにも開いたままでなければならない
  • ユーザーがEscapeキーを押したときに閉じられる

ユースケース

  • 要素の説明を表示する
  • 一般的にはツールやコントロールのためのチップで、簡単なラベルを持つアイコン（または全くラベルがない）のための追加コンテンツを提供する
  • リンク、入力、ボタンのようなインタラクティブな要素を含まない

そもそも使う必要がなければ使わないことを推奨されていました。

スペースがあれば、ツールチップやトグレットチップは使わないでください。
ツールチップを使って重要な情報を隠す代わりに、明確で簡潔な、常に見える説明を書くことを考えましょう。

例）
image.png
画像引用元

どこかでこの形見たことあるなと思ったらスマホのホーム画面で表示されるアプリのアイコンとテキストでした。
image.png

3. MDNの参考のリンクに載っていたHeydon Pickeringさんの記事

フロントエンド開発者、デザイナー、テクニカルライター。
特にアクセシビリティとインクルーシブデザインの実践に重点を置き、ウェブデザインに関する複数の書籍の執筆・編集を通じてこの分野に貢献されている方です。

2017年の記事となっています。
こちらに最新で本として販売されているそうです

前節で紹介したMDNの参考欄にHeydon Pickeringさんの記事がありましたので紹介します。

ツールチップとトグルチップについて分けて説明されていましたので、同様にその順で説明します。

動作（記事のツールチップの動作から推測）

  • 要素のホバー時、フォーカス時に表示される
  • 要素からマウスリーブ、フォーカスアウト時に非表示になる

ホバー時:マウスを使用するユーザ
フォーカス時:スクリーンリーダーを使用するユーザ

スクリーンリーダーについてはこちら
スクリーンリーダーを使うと、画面上の情報を、音声や点字を使って読むことができます。

明確なラベル、説明と見慣れたアイコンの場合、ツールチップは基本的に必要ないそうです。

仮にツールチップを使う場合以下2つを紹介されていました。

プライマリラベルとしてのツールチップ

See the Pen TOOLTIP AS PRIMARY LABEL by 山根大生 (@uuylkesg-the-styleful) on CodePen.

Note the use of the tooltip role. In practical terms, all this role offers is an assurance that aria-describedby works reliably where supported. As Léonie Watson writes, ARIA labels and descriptions sometimes don't work with all elements unless you incorporate an appropriate role. In this case, the most important role is the implicit button role of the subject element, but role="tooltip" may extend support for this labeling method in some software.

role="tooltip"を使用することで、ツールチップの内容を説明するaria-describedby属性が、スクリーンリーダーなどの支援技術に対してより信頼性を持って認識され、障害を持つユーザーにとっても役立つ情報として機能するようになる

と言っているようで、実は今回aria-labelledbyを使われています。
上の解説の意味がよく分かりませんでした。
aria-describedbyでもスクリーンリーダーの読み上げはされていますし。

aria-labelledby,aria-describedbyには以下の違いがあリます。
ラベルとして使うのをブラウザに伝えるためにaria-labelledbyを使われているのかなと思いました。

  • aria-labelledby:オブジェクトの本質を記述するラベル
  • aria-describedby:ユーザーが必要とするかもしれないより詳細な情報を提供する記述

補助説明としてのツールチップ

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

aria-describedbyを使用する際はtooltipにはラベルは含めないです。
そのため、ボタン内に隠されたスパンを追加します。

<span class="visually-hidden">Notifications</span>

.visually-hidden {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
  • clip-pathプロパティ
    要素のどの部分を表示するかを設定するクリッピング領域を作成します
    領域の内側にある部分は表示され、外側にある部分は非表示になります
    今回は全てを非表示にしています

mdnを見た所、clipはdeprecatedとなっていて、clip-pathへの書き換えを勧められています

要素を視覚的に画面から隠しつつ、スクリーンリーダーのような支援技術で読み取り可能にしています。

ユーザの成熟度に合わせた使い分け

image.png
New user(初心者)

  • テキストを常時表示

Established User(使い方が分かっているユーザ)

  • アイコンのみを表示
  • それまでに、アイコンが何を表しているのかを学習しているはずだから

ツールチップを使わない事になりましたが、これが最善だと説明されていました。
ユーザーが最初に何をするのかよく分からずにアイコンを押した場合を懸念されていました。

ユーザーがアイコンをクリックして新しいページに移動した時、そのページの目的や内容が一目でわかるように、見出しを明確にすることが重要だと説明しています。

これを実際どのように実現するか例を考えてみました

  • ユーザーにモード（初心者、熟練者）を選択させる
  • トラッキングでどれくらい機能を使っているか計測して成熟度を判定する

Toggletip（トグルチップ）

トグルチップについての説明が書かれていましたので紹介します。

demo

See the Pen Toogletip by Heydon (@heydon) on CodePen.

特徴

  • 補足情報または明確な情報を提供できるという意味でツールチップに似ています
  • 一般的に小さな「i」アイコンの形をとります
  • ただし、アイコン自体を補助的にするという点がツールチップと異なります
  • 「i」アイコンをホバーやフォーカスではなくクリックするとトグルチップが表示されます
  • トグルという名前ですが、ボタンをクリックしてバブルを表示または非表示にするのではなく、バブルを表示するだけです
  • ボタンのフォーカスを解除するか、ボタンから離れてマウスをクリックするか、Esc キーを押すとトグルチップが非表示になります

トグルチップでのaria-describedby属性の使用は適切ではないです

aria-describedby属性はスクリーンリーダーなどの支援技術を使用している人々が、ボタンなどの要素に関する追加情報にアクセスできるようにするためのものです。
しかし、トグルチップがクリックやタッチでのみ表示されるようになっている場合、aria-describedbyはもはや適切な手段ではありません。
スクリーンリーダーのユーザーはボタンを押す前に情報にアクセスできるため、ボタンを押しても何も行われないように見えるからです。
ボタンを押してもツールチップが表示されないと、そのボタンが何のためにあるのかが明確でなく、ユーザーが混乱する可能性があるということです。

ARIA ライブリージョン
動的なコンテンツの変更をスクリーンリーダー等の支援技術により通知させる方法です。

role="tooltip"はライブリージョンは適用されないので、今回はrole="status"を使用しているとのことです。

参考

Heydon Pickeringさんの本

「Inclusive Design Patterns」はPDFで公開されていました
https://nmu.edu/nmudev/sites/nmudev/files/2020-06/inclusive-design-patterns_0.pdf

買って読んでみます🦍

最後に

  • スクリーンリーダーの機能を意識した実装をした経験がないのでとても勉強になりました
  • ブラウザのデフォルトのツールチップとARIAのツールチップの違いを知れて勉強になりました
  • ツールチップ以前に分かりやすいアイコン、ラベルでデザインすることがまず大切だなと思いました
  • Heydon Pickeringさんの記事だとEscキーでツールチップは閉じなくても大丈夫というように取れました
  • aria-labelledby,aria-describedbyの使い分けを意識したいです
  • アクセシビリティについて意識した実装の為にもARIAについて理解したいです
  • 解釈しきれてない所もあるのでまたこの記事を改善します

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏

次回投稿予定の記事

  • Inclusive Design Patternsとは
  • 「Webアプリケーションアクセシビリティ──今日から始める現場からの改善」を読んでみた
  • MUI等のライブラリでの定義、推奨される使い方についてまとめた記事
  • popoverとの使い分け

修正予定

  • Heydon PickeringさんのPDF,本を読んでみてその内容を反映させます
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?