達成基準 1.4.13: ホバー又はフォーカスで表示されるコンテンツを理解する

達成基準 1.4.13 ホバー又はフォーカスで表示されるコンテンツ (レベル AA):ポインタホバー又はキーボードフォーカスを受け取ってから外すことで、追加コンテンツを表示させてから非表示にさせる場合は、以下の要件を満たす:

非表示にすることができる
ポインタホバーやキーボードフォーカスを動かさずに追加コンテンツを非表示にするメカニズムが存在する。ただし、追加コンテンツが入力エラーを伝える場合や、他のコンテンツを不明瞭にしたり置き換えたりしない場合は除く。
ホバーすることができる
ポインタホバーによって追加コンテンツを表示させることができる場合、その追加コンテンツを消すことなく、ポインタを追加コンテンツ上で動かすことができる。
表示が継続される
ホバーやフォーカスが解除される、利用者が非表示にする、又はその情報が有効でなくなるまでは、追加コンテンツが表示され続ける。

例外: 追加コンテンツの視覚的提示がユーザエージェントによって制御されていて、かつコンテンツ制作者が変更していない場合は例外とする。

ユーザエージェントによって制御されている追加コンテンツの例としては、HTML の title 属性を用いて作られているブラウザのツールチップが挙げられる。

ホバー時やフォーカス時に表示されるカスタムツールチップ、サブメニュー、他の非モーダルポップアップは、この達成基準の適用対象となる「追加コンテンツ」の例である。

意図

キーボードフォーカス又はポインタホバーと連動して現れたり消えたりする追加のコンテンツはしばしばアクセシビリティの問題へ発展することがある。そのような問題の理由には以下が含まれる:

  1. 利用者はインタラクションを引き起こすことを目的としていなかった可能性がある
  2. 利用者は新しいコンテンツが現れたことに気づかない可能性がある
  3. 新しいコンテンツは利用者のタスクを実行する能力を妨げる可能性がある

そのようなインタラクションの例には、ホバー及びフォーカスで表示されるカスタムツールチップ、サブメニュー及びその他の非モーダルポップアップが含まれる。この達成基準の意図は、追加のコンテンツをこのように表示及び非表示にするコンテンツ制作者が、以下を利用できるような方法で利用者がインタラクションを設計しなければならないことを保証することである:

大抵はより予測可能かつアクセシブルな、ページにコンテンツを追加する方法があり、コンテンツ制作者はその方法を使用することを推奨する。コンテンツ制作者が追加のコンテンツをホバー及びキーボードフォーカスと連携して表示及び非表示にすることを選んだ場合、この達成基準は満たさなければならない三つの条件を指定する:

それぞれは個別の節で議論されている。

注記

この達成基準はトリガーとなるコンポーネントそのものに加えて現れるコンテンツを取り扱う。そのため、「メインにスキップ」リンクのようなキーボードフォーカスで可視になる非可視のコンポーネント (トリガーを超える追加のコンテンツが可視にならない) はこの達成基準では取り扱われない。

非表示にすることができる

この条件の意図は、追加のコンテンツがページの元のコンテンツを確認する又は操作することを妨げないようにすることである。拡大時、ビューポート内で表示されるページの部分はかなり縮小する。マウスの利用者は、拡大したビューポートをパンして画面の他の部分を表示するために、頻繁にポインタを動かす。しかし、この限られたビューポートで表示されるページのほぼ全域が追加のコンテンツをトリガーするかもしれず、利用者がコンテンツを再トリガーせずにパンすることを困難にする。キーボードで追加コンテンツを非表示にする方法は、回避方法を提供する。

代わりに、キーボードを用いてのみナビゲートするロービジョンの利用者は、拡大されたビューポートの小さい領域がさまつなホバーテキストで雑然としてほしくない。彼らはキーボードで現在の焦点が当たっている領域を覆い隠す何かを非表示にする方法が必要である。

この条件を満たし、このような干渉を防ぐために、二つの方法が使用できる:

  1. 余白及び情報を提供しない背景画像などの純粋な装飾コンテンツを除き、トリガーを含む他のあらゆるコンテンツを隠さないよう追加のコンテンツを配置する。
  2. Esc キー又は閉じるボタンを押すなど、追加のコンテンツを容易に非表示にするメカニズムを提供する。

ほとんどの比較的小さいサイズのトリガーには、両方の方法が実装されることが望ましい。トリガーが大きい場合、追加コンテンツがトリガーより遠くに現れると、気づくことが難しいかもしれない。そのような場合は、二つ目の方法のみが適切かもしれない。

ホバーすることができる

この条件の意図は、ターゲットにホバーすることで現れるかもしれない追加のコンテンツがそれ自身にもホバーできるように保証することである。ホバーで現れるコンテンツは、利用者がマウスポインタをトリガーの上に固定することを求められた場合、知覚するのが難しい又は不可能な可能性がある。追加されたコンテンツが大きい場合、拡大されたビューは、利用者がそのコンテンツを完全に表示するためにスクロール又はパンする必要があることを意味し、これは、追加コンテンツが消えないように利用者がトリガーからポインタを移動できない限り不可能である。

もう一つの一般的な状況は、大きいポインタがプラットフォームの設定又は支援技術により選択されていた場合である。ここでは、ポインタが追加コンテンツの重要な領域を隠してしまう可能性がある。両方の状況でコンテンツを完全に見る方法は、マウスポインタをトリガーから新しいコンテンツに直接移動させることである。この機能はまた、マウスとのインタラクションのフィードバックにスクリーンリーダーを使用する利用者に重要な利点を提供する。この条件は、ほとんどの場合、追加コンテンツがターゲットに重なる又はそれが隣接して配置されていることを暗示する。

表示が継続される

この条件の意図は、利用者に追加コンテンツが可視になった後、知覚するための十分な時間があるようにすることである。障害のある利用者は拡大率を変更する、ポインタを動かす、又は可視領域に新しいコンテンツを持ってくるなどの様々な理由により、より多くの時間が必要かもしれない。一度現れたら、次のことをする時までコンテンツは可視のままにするべきである:

  • 利用者が、典型的なユーザ体験と一致して、トリガー及び追加コンテンツからホバー又はフォーカスを取り除く。
  • 利用者が非表示にすることができる条件を満たすために提供されたメカニズムを通して追加コンテンツを非表示にする。又は、
  • もはや有効ではない「使用中」メッセージなど、追加コンテンツにより伝えられた情報が無効になる。

追加の注記

  • この基準は、追加コンテンツの見た目が完全にユーザエージェントにより制御されている時に、このような問題を解決することに努めていない。顕著な例は、HTML の title 属性を小さなツールチップとして表示するブラウザの一般的な挙動である。
  • モーダルダイアログはキーボードフォーカスを受け取らなければならないため、ホバー又はフォーカスで現れるべきではなく、この基準のスコープ外である。達成基準 3.2.1 フォーカス時を参照すること。
  • ポインタホバーを通して動作できるコンテンツはキーボードフォーカスでも動作できるべきである。達成基準 2.1.1 キーボードを参照すること。

メリット

事例

事例 1: 非表示にすることができるツールチップ

ボタンの下にツールチップが表示されている、マウスポインタが上にのっているボタンのスクリーンショット ツールチップがなく、マウスポインタが上にのっているボタンのスクリーンショット
ボタンそのものを覆い隠さないように、ホバーしている LVTF ボタンの下にツールチップが表示されている。それはしかし、ボタンの下にあるコンテンツを覆い隠している (~comment-zoom-content と呼ばれている次の赤いボタン)。非表示にすることができる必須条件を満たすため、二つ目の画像で示している通り、利用者は Esc キーを押してマウスを動かさずにツールチップを消去できる。
ツールチップがなく、フォーカスインジケータがあるボタンのスクリーンショット
ボタンのツールチップはフォーカス時にも現れ、Esc キーで取り除くことができる。スクリーンショットは同じ LVTF ボタンのフォーカス時を表しているが、ツールチップは非表示にされ、すでに可視ではない。

事例 2: ホバーすることができるツールチップ

大きいポインタに覆い隠されたツールチップがボタンの下に表示されている、大きいマウスポインタが上にのっているボタンのスクリーンショット 大きいマウスポインタがツールチップの下部にある、ツールチップが下にあるボタンのスクリーンショット
ボタンのツールチップはマウスホバーの直下に表示されており、大きなポインタで簡単に隠すことができる。ツールチップそのものはホバーできるので、ツールチップのテキストを見るためにマウスポインタをその下側に下げることができる。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

  • @@ ARIA: role="tooltip" を使用する
  • @@ CSS: hover 及び focus 疑似クラスを使用する

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語

入力エラー (input error)

利用者が入力した情報で、受け付けられないもの。

注記

以下のものが含まれる:

  1. そのウェブページでは必須であるが、利用者が入力しなかった情報
  2. 利用者が入力したが、要求されたデータ形式あるいは値ではない情報
メカニズム (mechanism)

結果を得るためのプロセス又は手法。

注記

メカニズムは、コンテンツ内で明示的に提供されることもあれば、プラットフォーム又は支援技術を含むユーザエージェントで提供されるものに依存することもある。

注記

メカニズムは、宣言する適合レベルのすべての達成基準を満たさなければならない。