解説書 達成基準 2.4.11:隠されないフォーカス (最低限) (レベル AA)

永続的でなく開かれた情報

ウェブ上の多くのコンポーネントは、即時的な利用者による操作又は情報提示を目的とした追加コンテンツを (アクティブ時又はフォーカス時に) 開く (又は展開する)。この新しいコンテンツは他のコンテンツの上にあり、隠すことがよくある。このようなコンポーネントの例としては、メニュー項目、select 要素の項目、コンボボックスリスト (及びその他のドロップダウン項目)、日付ピッカーカレンダー、ツールチップなどがある。これら全てのコンポーネントに共通する特徴は、アクションが実行された後、または利用者の操作の主要なポイントでなくなった後は、それらのコンポーネントが存続することが期待されていないことである。そのような永続的でないディスクロージャーは、フォーカスを当てた項目を隠さないため、この達成基準に失敗とはならない。ただし、利用者が 1) 開いている項目の一つをアクティブにした後、又は 2) フォーカスをトリガー項目及び追加コンテンツから遠ざけた後に、コンテンツ制作者がそのようなコンポーネントの存続を許可した場合、フォーカスを持つ項目を隠すことによって、この基準に失敗する危険性がある。

利用者が開くことができる、永続的なディスクロージャー

一部のディスクロージャーパターンでは、利用者が意図的に閉じるまで開いたままになる追加コンテンツを利用者が開くメカニズムを提供する。アコーディオンは、そのようなパターンの単純な例である。チャットボット及び拡張可能なサイドナビゲーションは、より複雑な例である。これらのパターンはすべて、この達成基準に失敗するリスクがないように実装できる。考えられるアプローチとしては次のようなものがある:

• 追加のコンテンツが表示されると、既存のコンテンツが移動する。アコーディオンはその一例である。アコーディオンを開くと、展開されたコンテンツが既存のコンテンツをページのさらに下に移動させる。新しいコンテンツは既存のコンテンツを隠さないため、フォーカスのある項目を隠すことはできない。
• 追加コンテンツが表示されると、既存のコンテンツがリフローする。WCAG 標準のポップアウトサイドバーは、このパターンの例である。サイドメニューをアクティブにすると、ページの左側に沿って情報の新しいセクションが開く。メインコンテンツ領域は、新しいコンテンツを収容するために水平方向に縮小され、既存のコンテンツはより狭いスペースに収まるようにリフローする。結果として、二つのセクション間に重なるコンテンツは存在しない。フォーカスを受け取る項目は、左側のナビゲーションであろうとメインコンテンツであろうと、他のセクションによって隠されることはないだろう。
• 追加コンテンツが開かれるとフォーカスが移り、閉じられるまでの間、タブリングはその追加コンテンツに閉じ込められる。このモダリティはダイアログに少し似ており、キーボードでは、利用者が先に (典型的には Esc キーを押して) コンテンツを閉じないかぎり、開いているコンテンツを超えてナビゲートすることはできない。しかし、モーダルダイアログとは異なり、実装によっては、ポインタの利用者は、開かれたセクションを閉じることなく外側のコンテンツを操作できる場合がある。このパターンはキーボードの利用者とポインタの利用者との間で不公平な体験を生み出す可能性があるため、慎重に使用すべきである。とはいえ、開かれたコンテンツがメインコンテンツのキーボードフォーカスを隠してしまうのを防いでおり、したがって、この達成基準を合格するはずである。これは、関連リソースにある Knowability の記事において、セクション見出し Keep keyboard focus in the slide-out navigation until it's closed にある短い動画で説明及び実演されている。
• ディスクロージャーは、他のコンテンツを含まないページの領域に展開する。多くのページは余白が広く設計されており、新しいコンテンツを開くための大きなスペースが提供されている。多くのチャットボット及びトースト通知は、ページの空いている右側に「上にスライド」するように設計されている。コンテンツ制作者がレスポンシブデザインの各ブレークポイントでコンテンツが隠されないように注意している場合、他の操作可能なコンテンツが隠されることはない。
• フォーカスが追加コンテンツから離れると、追加コンテンツは自動的に非表示になる又は折りたたまれる。もしくは、専用のキーボードコマンド (例: Escape キー) を使用してコンテンツを非表示にする又は折りたたむことができる。これは、前述の永続的でない開いている情報で説明したパターンと非常によく似ている。特徴的な要因は、たとえ利用者が戻るまで非表示になっているとしても、ディスクロージャー内での利用者のインタラクションの最終地点が保存される (存続する) ことである。一部のツリー及び左側のナビゲーションパターンはこのように動作する。

より複雑なインタフェース及び利用者のニーズのために、次の注記がある: 利用者が開いたコンテンツによって、フォーカスを受け取るコンポーネントが隠される場合がある。利用者がフォーカスを持つ項目を表示でき、その際に利用者の開いたコンテンツにナビゲートしてその項目を閉じる必要がなければ、この基準に合格する。例えば、フォーカスを持つ項目を表示できるキーボード操作には、次のものがある:

• Escape キーを使用して、隠しているコンテンツを閉じる。
• キーを使用してビューポート内のコンテンツをスクロールし、フォーカスのある項目を表示する。
• オーバーレイ間を移動するためのキーを用意する。

例:

• 利用者は、チャットインタフェースを開く。これはポップオーバーの非モーダルダイアログである。これにより、下にあるページの一部のコンテンツが完全に隠されてしまう。利用者は Tab キーを使用してチャットインタフェースから離れ、ダイアログによって完全に隠されているリンクにフォーカスを当てる。利用者が Escape キーを押してチャットインタフェースを閉じると、リンクが隠されないようになる。
• 利用者は、ウェブページの下部にある固定位置のページフィードバックコンポーネントを展開する。次に、キーボードを使用して、展開されたコンポーネントによって完全に隠されているリンクにナビゲートし、キーボードの下矢印又はスペースキーを押してページ上のコンテンツをスクロールし、リンクが隠されないようにする。
• 利用者がウェブベースのマルチユーザオーサリングアプリケーションを開く。ドキュメントに貢献した人のリストを表示しているオーバーレイが表示される。利用者は貢献者のリストをタブで移動し、そのうちの一つをアクティブにする。アプリケーションは、最初のオーバーレイを隠す、その人の最近の投稿を表示する新しいオーバーレイを表示する。利用者は F6 キーを押して、二つのオーバーレイの積み重ね順序を切り替える。