意図
キーボードフォーカス又はポインタホバーと連動して現れたり消えたりする追加のコンテンツはしばしばアクセシビリティの問題へ発展することがある。そのような問題の理由には以下が含まれる:
- 利用者はインタラクションを引き起こすことを目的としていなかった可能性がある
- 利用者は新しいコンテンツが現れたことに気づかない可能性がある
- 新しいコンテンツは利用者のタスクを実行する能力を妨げる可能性がある
そのようなインタラクションの例には、ホバー及びフォーカスで表示されるカスタムツールチップ、サブメニュー及びその他の非モーダルポップアップが含まれる。この達成基準の意図は、追加のコンテンツをこのように表示及び非表示にするコンテンツ制作者が、以下を利用できるような方法で利用者がインタラクションを設計しなければならないことを保証することである:
- 追加のコンテンツを知覚できる、及び
- ページ体験を損なうことなく非表示にすることができる。
大抵はより予測可能かつアクセシブルな、ページにコンテンツを追加する方法があり、コンテンツ制作者はその方法を使用することを推奨する。コンテンツ制作者が追加のコンテンツをホバー及びキーボードフォーカスと連携して表示及び非表示にすることを選んだ場合、この達成基準は満たさなければならない三つの条件を指定する:
- 非表示にすることができる
- ホバーすることができる
- 表示が継続される
それぞれは個別の節で議論されている。
この達成基準はトリガーとなるコンポーネントそのものに加えて現れるコンテンツを取り扱う。そのため、「メインにスキップ」リンクのようなキーボードフォーカスで可視になる非可視のコンポーネント (トリガーを超える追加のコンテンツが可視にならない) はこの達成基準では取り扱われない。
非表示にすることができる
この条件の意図は、追加のコンテンツがページの元のコンテンツを確認する又は操作することを妨げないようにすることである。拡大時、ビューポート内で表示されるページの部分はかなり縮小する。マウスの利用者は、拡大したビューポートをパンして画面の他の部分を表示するために、頻繁にポインタを動かす。しかし、この限られたビューポートで表示されるページのほぼ全域が追加のコンテンツをトリガーするかもしれず、利用者がコンテンツを再トリガーせずにパンすることを困難にする。キーボードで追加コンテンツを非表示にする方法は、回避方法を提供する。
代わりに、キーボードを用いてのみナビゲートするロービジョンの利用者は、拡大されたビューポートの小さい領域がホバーテキストで雑然としてほしくない。彼らは現在のフォーカスが当たっている領域を覆い隠すものをキーボードで非表示にする方法が必要である。
この条件を満たし、このような干渉を防ぐために、二つの方法が使用できる:
- 余白及び情報を提供しない背景画像などの純粋な装飾コンテンツを除き、トリガーを含む他のあらゆるコンテンツを隠さないよう追加のコンテンツを配置する。
- Esc キーを押すなど、追加のコンテンツを容易に非表示にするメカニズムを提供する。
ほとんどの比較的小さいサイズのトリガーには、両方の方法が実装されることが望ましい。トリガーが大きい場合、追加コンテンツがトリガーより遠くに現れると、気づくことが難しいかもしれない。そのような場合は、二つ目の方法のみが適切かもしれない。
注目、明示的な確認、又は是正措置が必要な場合があるため、達成基準により、入力エラーメッセージを持続させることができる。
ホバーすることができる
この条件の意図は、ターゲットにホバーすることで現れるかもしれない追加のコンテンツがそれ自身にもホバーできるように保証することである。ホバーで現れるコンテンツは、利用者がマウスポインタをトリガーの上に固定することを求められた場合、知覚するのが難しい又は不可能な可能性がある。追加されたコンテンツが大きい場合、拡大されたビューは、利用者がそのコンテンツを完全に表示するためにスクロール又はパンする必要があることを意味し、これは、追加コンテンツが消えないように利用者がトリガーからポインタを移動できない限り不可能である。
もう一つの一般的な状況は、大きいポインタがプラットフォームの設定又は支援技術により選択されていた場合である。ここでは、ポインタが追加コンテンツの重要な領域を隠してしまう可能性がある。両方の状況でコンテンツを完全に見る方法は、マウスポインタをトリガーから新しいコンテンツに直接移動させることである。この機能はまた、マウスとのインタラクションのフィードバックにスクリーンリーダーを使用する利用者に重要な利点を提供する。この条件は、ほとんどの場合、追加コンテンツがターゲットに重なる又はそれが隣接して配置されていることを暗示する。
表示が継続される
この条件の意図は、利用者に追加コンテンツが可視になった後、知覚するための十分な時間があるようにすることである。障害のある利用者は拡大率を変更する、ポインタを動かす、又は可視領域に新しいコンテンツを持ってくるなどの様々な理由により、より多くの時間が必要かもしれない。一度現れたら、次のことをする時までコンテンツは可視のままにするべきである:
- 利用者が、典型的なユーザ体験と一致して、トリガー及び追加コンテンツからホバー又はフォーカスを取り除く。
- 利用者が非表示にすることができる条件を満たすために提供されたメカニズムを通して追加コンテンツを非表示にする。又は、
- もはや有効ではない「使用中」メッセージなど、追加コンテンツにより伝えられた情報が無効になる。
追加の注記
- この基準は、追加コンテンツの見た目が完全にユーザエージェントにより制御されている時に、このような問題を解決することに努めていない。顕著な例は、HTML の
title属性を小さなツールチップとして表示するブラウザの一般的な挙動である。 - モーダルダイアログはキーボードフォーカスを受け取らなければならないため、ホバー又はフォーカスで現れるべきではなく、この基準のスコープ外である。達成基準 3.2.1 フォーカス時を参照すること。
- ポインタホバーを通して動作できるコンテンツはキーボードフォーカスでも動作できるべきである。達成基準 2.1.1 キーボードを参照すること。
メリット
- 拡大してコンテンツを見ているロービジョンの利用者は、望ましい倍率を減らさなくてもより上手くホバー又はフォーカスしたコンテンツを見ることができるようになる。
- プラットフォームの設定又は支援技術を通してマウスカーソルのサイズを大きくしている利用者は、ホバー時に隠されたコンテンツを見る方法を使用できるようになる。
- ロービジョン又は認知障害のある利用者はホバー又はフォーカスで現れる追加コンテンツを知覚し、かつトリガーコンテンツを気を散らすことなく見るための十分な時間を持てるようになる。
- ポインタの正確さが低い利用者は、より簡単に意図せず動作させた追加コンテンツを非表示にできるようになる。
事例
事例 1: 非表示にすることができるツールチップ
事例 2: ホバーすることができるツールチップ
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
達成方法
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
- SCR39: フォーカス又はホバー時のコンテンツをホバー可能、非表示可能及び表示が継続されるようにする
- ARIA: role="tooltip" を使用する (将来、達成方法に追加される可能性あり)
- CSS: hover 及び focus 疑似クラスを使用する (将来、達成方法に追加される可能性あり)
失敗例
以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
- F95: 達成基準 1.4.13 の失敗例 － ホバーによって表示されるコンテンツがホバーできない
- 失敗例 － ポインタホバー又はキーボードフォーカスを動かさずにコンテンツを非表示にすることができない (将来、達成方法に追加される可能性あり) 失敗例
- 失敗例 － ホバー又はフォーカス時で表示されるコンテンツが、非表示又は無効になるまで表示され続けることができない (将来、達成方法に追加される可能性あり)
重要な用語
障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び／又はソフトウェア。
支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。
支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。
主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。
この文書の文脈において重要な支援技術としては、以下のものが挙げられる:
- 画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
- スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
- 音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
- 音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。
- 代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
- 代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
与えられた規格、ガイドライン、又は仕様のすべての要件を満たすこと。
利用者が入力した情報で、受け付けられないもの。
以下のものが含まれる:
- そのウェブページでは必須であるが、利用者が入力しなかった情報
- 利用者が入力したが、要求されたデータ形式あるいは値ではない情報
結果を得るためのプロセス又は手法。
メカニズムは、宣言する適合レベルのすべての達成基準を満たさなければならない。
ある活動を完了させるために必要な利用者の一連の動作。
ショッピングサイト上の一連のウェブページで目的を果たすためには、利用者が選択肢となりうる製品、価格及び内容を閲覧した後、製品を選択して発注し、配送先情報及び支払情報を提供する必要がある。
アカウント登録ページでは、登録フォームにアクセスする前にチューリングテストに成功する必要がある。
ユーザエージェントがどのようにレンダリング、再生、又は実行するかを符号化するメカニズム。
このガイドラインで用いられている「ウェブ技術」及び (単独で用いられている) 「技術」という用語は、どちらもウェブコンテンツ技術を指す。
ウェブコンテンツ技術には、マークアップ言語、データ形式、及びプログラム言語などがあり、これらをコンテンツ制作者が単独で、又は組み合わせて用いることによって、静的なウェブページや同期したメディアによる提示、さらには動的なウェブアプリケーションに至るまでの様々なエンドユーザ体験を作ることができる。
ウェブコンテンツ技術のよくある事例としては、HTML、CSS、SVG、PNG、PDF、Flash、 JavaScript などがある。
ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。
ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (支援技術も含む)。
単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。
どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。
このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。
単体のウェブリソースであり、埋め込まれている画像及びメディアのすべてを含んだもの。
Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信トレイ、連絡先、カレンダーがある。受信トレイ、連絡先、又はカレンダーを表示するリンク又はボタンが提供されているが、全体としてページの URI は変更されない。
カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。
ブラウザで "http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは 1 ページだけのウェブサイトかもしれないし、ウェブサイトの中のほんの 1 ページなのかもしれない。