1.4.13 ホバー又はフォーカスで表示されるコンテンツ

要件

マウスホバーやキーボードフォーカスで追加表示される補足コンテンツ（例：ツールチップや説明バルーンなど）が、以下の3つの条件すべてを満たすこと。

3つの要件

① 解除可能（Dismissible）

表示されたコンテンツは、Escキーやマウス操作などでユーザーが簡単に消せる必要があります。

② ホバー持続（Hoverable）

ホバーによって表示されたコンテンツは、マウスをその上に移動しても消えない必要があります。

③ 持続時間（Persistent）

ユーザーが情報を読むのに十分な時間、意図的に操作しない限り表示が消えないようにする必要があります。

内容と意図

• マウス操作に不慣れなユーザーや、スクリーンリーダー利用者が、ポップアップなどの補足情報を読み取れるようにするための基準です。
• 例えば、フォームラベルの補足説明、エラーの詳細、アイコンの意味などがホバーで表示される場合、それが一瞬で消えると読めない・使えないという問題が発生します。

達成している例

• フォームの「？」アイコンにホバーすると説明文が出て、Escキーで消せる。
• ホバーで表示されるツールチップにマウスを乗せても消えず、その上でクリック可能。
• フォーカスで現れる説明が、ユーザーの操作で明示的に閉じられるまで表示され続ける。

達成していない例

状況	問題点
ホバーしたら説明がすぐ消えて、読む前に消えてしまう	持続時間違反
ホバーで出た説明にマウスを移動するとすぐ消えてしまう	ホバー持続違反
補足情報を消す方法がない	解除可能違反

利点

利点	内容
補足情報が読みやすくなる	高齢者・認知障害・視覚障害者に有効
操作の予測性が高まる	ユーザーが補足情報を自分で制御できる
キーボード操作にも対応しやすい	フォーカスによる補足表示をサポート可能

実装のヒント

• aria-describedby でフォーカス時に内容を説明
• role=”tooltip” を併用
• ツールチップや説明用の要素に tabindex=”-1″ をつけ、マウスでもキーボードでもアクセス可能に
• ESC キーで非表示にできるよう、JavaScriptの処理を組み込む

チェック方法（開発・検証）

チェック項目	チェック方法
ホバー・フォーカスで表示されるか	マウス・キーボードで確認
解除できるか	ESC キーや X ボタンで消せるか
内容を読めるか	表示が早すぎて消えてないか
ツールチップにマウスを移動しても消えないか	ポインターで確認

一覧に戻る