Level AAWCAG 2.2

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

ホバーやフォーカスで追加表示されるコンテンツは、非表示化・ホバー可能・永続的である。


なぜ重要か

拡大表示ユーザー
拡大時にツールチップがビューポート外に出ることも。ホバーしてスクロールできないと読めない。
認知障害
突然表示・消失するコンテンツは混乱を招く。ユーザーのペースで読めることが重要。
キーボードユーザー
ホバーだけでなくフォーカスでも追加コンテンツが表示されなければアクセス不能。
運動障害
マウスの微細な動きが困難な人は、ホバー領域が小さいと維持できない。

ライブデモ

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

ツールチップにマウスを合わせたり、ボタンにフォーカスして動作を確認しましょう。

ボタンにホバー/フォーカス

pointer-events: none
Escキー無効

ツールチップにホバーできない・Escで閉じられないポインターを移動するとすぐ消える

ペルソナで理解する

伊藤さん(60歳)— ロービジョン(画面拡大利用)

画面を300%に拡大しているので、ツールチップが画面外に出ることがあります。ツールチップ自体にマウスを合わせてスクロールできないと内容が読めません。また、拡大した画面でツールチップが元のコンテンツを隠してしまうので、Escで消せないと困ります。

チェックポイント

参考リンク