Level AAWCAG 2.2
1.4.13 ホバー又はフォーカスで表示されるコンテンツ
ホバーやフォーカスで追加表示されるコンテンツは、非表示化・ホバー可能・永続的である。
なぜ重要か
拡大表示ユーザー
拡大時にツールチップがビューポート外に出ることも。ホバーしてスクロールできないと読めない。
認知障害
突然表示・消失するコンテンツは混乱を招く。ユーザーのペースで読めることが重要。
キーボードユーザー
ホバーだけでなくフォーカスでも追加コンテンツが表示されなければアクセス不能。
運動障害
マウスの微細な動きが困難な人は、ホバー領域が小さいと維持できない。
ライブデモ
ホバー/フォーカスで表示されるコンテンツ
ツールチップにマウスを合わせたり、ボタンにフォーカスして動作を確認しましょう。
ボタンにホバー/フォーカス
pointer-events: none
Escキー無効
ツールチップにホバーできない・Escで閉じられないポインターを移動するとすぐ消える
ペルソナで理解する
伊藤さん(60歳)— ロービジョン(画面拡大利用)
画面を300%に拡大しているので、ツールチップが画面外に出ることがあります。ツールチップ自体にマウスを合わせてスクロールできないと内容が読めません。また、拡大した画面でツールチップが元のコンテンツを隠してしまうので、Escで消せないと困ります。