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

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

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

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

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

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

意図

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

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

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

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

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

注記

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

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

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

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

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

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

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

注目、明示的な確認、又は是正措置が必要な場合があるため、達成基準により、入力エラーメッセージを持続させることができる。

ホバーすることができる

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

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

表示が継続される

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

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

追加の注記

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

メリット

事例

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

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

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

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

関連リソース

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

達成方法

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

十分な達成方法

失敗例

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

重要な用語

支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

この文書の文脈において重要な支援技術としては、以下のものが挙げられる:

  • 画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
  • スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
  • 音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
  • 音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。
  • 代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
  • 代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
適合 (conformance)

与えられた規格、ガイドライン、又は仕様のすべての要件を満たすこと。

入力エラー (input error)

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

注記

以下のものが含まれる:

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

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

注記

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

注記

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

プロセス (process)

ある活動を完了させるために必要な利用者の一連の動作。

ショッピングサイト上の一連のウェブページで目的を果たすためには、利用者が選択肢となりうる製品、価格及び内容を閲覧した後、製品を選択して発注し、配送先情報及び支払情報を提供する必要がある。

アカウント登録ページでは、登録フォームにアクセスする前にチューリングテストに成功する必要がある。

依存されている (relied upon)

その技術が無効になっている場合、又はサポートされていない場合に、コンテンツが適合できないこと。

技術 (technology)

ユーザエージェントがどのようにレンダリング、再生、又は実行するかを符号化するメカニズム

注記

このガイドラインで用いられている「ウェブ技術」及び (単独で用いられている) 「技術」という用語は、どちらもウェブコンテンツ技術を指す。

注記

ウェブコンテンツ技術には、マークアップ言語、データ形式、及びプログラム言語などがあり、これらをコンテンツ制作者が単独で、又は組み合わせて用いることによって、静的なウェブページや同期したメディアによる提示、さらには動的なウェブアプリケーションに至るまでの様々なエンドユーザ体験を作ることができる。

ウェブコンテンツ技術のよくある事例としては、HTML、CSS、SVG、PNG、PDF、Flash、 JavaScript などがある。

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (支援技術も含む)。

ウェブページ (Web page)

単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。

注記

どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。

注記

このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。

単体のウェブリソースであり、埋め込まれている画像及びメディアのすべてを含んだもの。

Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信トレイ、連絡先、カレンダーがある。受信トレイ、連絡先、又はカレンダーを表示するリンク又はボタンが提供されているが、全体としてページの URI は変更されない。

カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。

ブラウザで "http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは 1 ページだけのウェブサイトかもしれないし、ウェブサイトの中のほんの 1 ページなのかもしれない。


訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2022 年 9 月 2 日版の原文は WAIC の管理するレポジトリから入手可能です。