本文へスキップ

ツールチップ・ポップオーバー・ヘルプテキスト

補足の説明を、ツールチップ・ポップオーバー・常時表示のヘルプテキストのどれで出す?

判断表

判断軸アクセシブルなツールチップ
ホバー・フォーカスで一言
ポップオーバー
押して開く、操作も入る小パネル
テキストフィールド
欄の下に常に出ている補助文
見せる条件ホバー300ms後かフォーカス時。Esc で消えるクリックで開き、外側クリックで閉じる常に見えている
載せられる内容1文の説明だけ。リンクやボタンは置けないリンク・ボタン・複数行も置ける1〜2文。長いと欄が間延びする
タッチ端末ホバーが無いので出しにくい。長押しに頼らないタップで開くので問題ない問題ない
支援技術role=tooltip を aria-describedby で結ぶ開く操作に aria-expanded、中身へフォーカスを移すaria-describedby で欄と結ぶだけ。最も確実
必要性の高さ知らなくても済む補足(略語の意味など)知りたい人だけが開く詳しい説明入力の成否を左右する条件(形式・文字数)

迷ったらこれ

迷ったら常時表示のヘルプテキスト。触らなくても読め、タッチ端末でも支援技術でも確実に届く。ただし全員に見せると邪魔になる補足はツールチップ、リンクや操作を含む説明はポップオーバーにする。

アイコンだけの「?」ボタンにはツールチップではなく aria-label を付ける(ツールチップは名前の代わりにならない)。JS を使わない配置例は anchor-tooltip を参照。

候補の見本

  • ホバー

    アクセシブルなツールチップ解説あり

    Accessible Tooltip (aria-describedby)

    ホバーは 300ms 待ってから、フォーカスとタップは即座に出る。role=tooltip を aria-describedby で結び、Esc で閉じる。帯に「保存, ボタン, 説明: …」と読まれる形を表示。

  • クリック

    ポップオーバー解説あり

    Popover Menu

    ボタン横に矢印付きの小パネル(メニュー)がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。

  • 入力

    テキストフィールド

    Text Field

    ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。