ARIA: tooltip ロール

tooltip は要素の説明を表示するテキストバブルで、ポインターにカーソルを当てたり、キーボードフォーカスを当てたりすると現れます。

解説

ツールチップは、その要素がフォーカスを受け取ったりカーソルを当てられたりしたときに、その要素に関するコンテキスト情報を提供します。ツールチップは短い遅延の後に自動的に表示されます。ユーザーは特にリクエストしません。ツールチップはどのようなコンテンツにも設置することができますが、一般的にはツールやコントロールのためのチップであり、短いラベル（またはまったくラベルを持たない、アクセシブルではない）を持つアイコンのための追加コンテンツを提供するようなものです。

ツールチップは一般的に、マウスを当てた後、または自分自身でフォーカスを受け取った後に、1秒から5秒の短い遅延の後に表示されます。ユーザーのリクエストなしに自動的に開き、フォーカスが失われるか、マウスを離すと自動的に閉じられます。マウスがツールチップの上に移されたときにも開いたままでなければならず、ユーザーが Escape キーを押したときにも閉じるべきです。

ツールチップそのものがフォーカスを受け取ることはなく、タブ順にも入らないので、ツールチップはリンク、入力、ボタンのような対話要素を含むことはできません。

ツールチップは、より詳細な情報 "i" アイコン ⓘ の適切なロールではありません。ツールチップは自分自身で要素に直接関連します。 ⓘ は described by の詳細情報ではありません。ツールやコントロールのものです。

ARIA tooltip ロールの使用は、通常のブラウザのツールチップの動作を補足するものです。ネイティブブラウザーにおけるツールチップの例としては、一部のウェブブラウザーが要素にマウスを長く当てると title 属性を表示するものがあります。キーボードのフォーカスやタッチ操作によってこの機能を有効にすることはできません。ツールチップやタイトルとして記載するほど重要な情報であれば、可視テキストに含めることを検討してください。

tooltip ロールを持つ要素は、ツールチップが表示される前または表示されるときに aria-describedby を使用して参照する必要があります。 aria-describedby 属性はツールチップではなく、自分自身で要素に指定します。

ツールチップは、自分自身の要素の aria-haspopup プロパティではポップアップとはみなされません。

ツールチップは現れたり消えたりしますが、その出現は自動的に行われ、ユーザーが意図的に制御するものではないので、 aria-expanded ロールは対応していません。

ツールチップのアクセシブル名は、コンテンツから決まります。理論的には、 aria-label や aria-labelledby から使用することができますが、ほとんどの場合、アクセシブル名を持つツールチップを提供するために ARIA プロパティを使用することは推奨されません。

ツールチップは追加情報を提供します。一般的に、ツールチップ自身は直接操作できません。ツールチップは通常、主要素の id を持つ aria-describedby を介して定義するコンテンツと関連付けられます。そのため、ツールチップにアクセシブル名が明示的に設定されている場合、その名前はツールチップのコンテンツではなく、主要素の説明として公開されます。

キーボード操作

Escape: ツールチップを閉じます。

ツールチップは、フォーカスが当たったとき、または要素にマウスを当てたときに、追加の操作なしに現れるべきです。自分自身で要素のフォーカスが失われるか、マウスが要素やツールチップの外に移されると、自動的に消えるべきです。ツールチップがフォーカスを受け取っていない間、 Escape は開くためのツールチップを閉じるべきです。

必要な JavaScript 機能

ツールチップは、キーボードフォーカスとフォーカスの除去、マウスオーバーとマウスアウトというマウスイベントによって表示されたり消えたりします。
ツールチップがフォーカスを受け取ることはありません。フォーカスは自分自身で持つ要素に留まります。
ツールチップは Escape キーで隠すことができます。
ツールチップはカーソルを当てても開いたままになります。
ツールチップは JavaScript と CSS セレクターによってのみ非表示になります。 JavaScript が利用できない場合、ツールチップは表示されます。

例

html

<label for="password">Password:</label>
<input aria-describedby="passwordrules" id="password" type="password" />
<div role="tooltip" id="passwordrules">
  <p>Password Rules:</p>
  <ul>
    <li>Minimum of 8 characters</li>
    <li>
      Include at least one lowercase letter, one uppercase letter, one number
      and one special character
    </li>
    <li>Unique to this website</li>
  </ul>
</div>

ツールチップは CSS でインスタンス化できます。 JavaScript でクラス名を変更し、ユーザーが Escape キーを押した場合にツールチップを隠すクラスにします。

css

[role="tooltip"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"] {
  visibility: visible;
}

上記は、既定で CSS でツールチップを非表示にするか、 JavaScript で hidetooltip クラスが追加されている場合（ユーザーが Esc を押した場合）、ツールチップを確実に表示させないように詳細度を加算します。自分自身で要素がフォーカスを受け取るとき、それは相対的に位置指定され、ツールチップは見えるようになります。

Specification
Accessible Rich Internet Applications (WAI-ARIA) # tooltip

ARIA: tooltip ロール

解説

関連する WAI-ARIA ロール、状態、プロパティ

キーボード操作

必要な JavaScript 機能

例

アクセシビリティの考慮

ベストプラクティス

仕様書

関連情報