ツールチップ・ポップオーバー・ヘルプテキスト
補足の説明を、ツールチップ・ポップオーバー・常時表示のヘルプテキストのどれで出す?
判断表
| 判断軸 | アクセシブルなツールチップ ホバー・フォーカスで一言 | ポップオーバー 押して開く、操作も入る小パネル | テキストフィールド 欄の下に常に出ている補助文 |
|---|---|---|---|
| 見せる条件 | ホバー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 で閉じる。帯に「保存, ボタン, 説明: …」と読まれる形を表示。
- JS
- クリック
ポップオーバー解説あり
Popover Menu
ボタン横に矢印付きの小パネル(メニュー)がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。
- JS
- 入力
テキストフィールド
Text Field
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
- JS