Accessibility
Guidelines

1.4.13 ホバーまたはフォーカスで表示されるコンテンツを制御できる

画面を拡大して閲覧している際、追加コンテンツを知覚できなかったり、閲覧中のコンテンツが覆い隠されてしまう場合がある。 例えば、ツールチップやサブメニューなどをポインタホバーやフォーカスに応じて表示・非表示させるなど。

このような場合には、次の要件を満たす必要がある。

  • 非表示にできる:追加コンテンツが入力エラーを伝えたり、他のコンテンツを覆い隠してしまわない限り、ホバーまたはフォーカスを移動することなく非表示にできる
  • ホバーできる:コンテンツがポインタホバーによって表示される場合、ポインタを追加コンテンツ上で動かすことができる
  • 表示が継続される:ホバーやフォーカスが解除される、ユーザーが非表示にする、またはその情報が無効になるまで表示される

例外:ユーザーエージェント(ブラウザなど)によって制御されている場合(HTMLのtitle属性を用いたツールチップなど)は除く

これは、特にロービジョンのユーザーなどが拡大して表示している場合や、画面の小さな端末で閲覧する際に大きな影響がある。

具体例

  • Good ポインタホバーでドロップダウンメニューが表示されるOK例。メニューをホバーした時に追加コンテンツが表示されるが、メニューからマウスポインタが外れても追加コンテンツは表示が継続される。
  • Bad ポインタホバーでドロップダウンメニューが表示されるNG例。メニューをホバーした時に追加コンテンツが表示されるが、メニューからマウスポインタが外れると追加コンテンツが消えてしまい、情報にたどり着けない。

テスト・チェック方法

  • 追加コンテンツが表示されることで既存のコンテンツを覆い隠さないか
  • 閉じるボタンなど、追加コンテンツを非表示にする操作方法が用意されているか

参考文献