scrollable-region-focusable
フォーカス可能なコンテンツを含まないスクロール可能な領域は、キーボードでフォーカスできることが望ましいです
CSSでoverflow:auto/scrollが宣言され、フォーカス可能な子孫要素を含まず、自身もキーボードでフォーカスできない要素を検出し、そのコンテンツが実際にはみ出していてキーボードでのスクロール操作が必要かどうかを手動レビューに回します。
適用範囲：意図的に、スクロールする可能性が高いコンテナーの固定のタグ（div、section、article、aside、main、nav、pre、table、blockquote、ul、ol、textarea）のうち、算出されたoverflow-x/overflow-yがautoまたはscrollのものに限定しています。ページ上のすべての要素を対象にしないのは、決定論的で高速な処理を保つためです（regionと同じ考え方の絞り込みです）。確認を求める対象が見つからない場合は、passではなくnotApplicableを報告します。このルールが適用されるのはチェックが検出するものだけであり、そこに何も見つからなくても、すべて問題ないことは示されないためです。
期待される結果：CSSでスクロールする可能性がある（auto/scroll）と宣言された領域には、キーボードで到達できることが望ましいです。つまり、シーケンシャルなタブ順序に含まれる子孫要素（キーボードのユーザーがタブで移動し、そこから矢印キーでスクロールできるリンク、ボタン、フォームコントロール、または負でないtabindexを持つ要素。tabindex="-1"を持つもの、無効またはtype="hidden"のコントロール、ページが隠しているものは数に入りません）をすでに含んでいるか、領域自体にTabキーで到達できるか（負でないtabindex、または<textarea>や編集可能な領域のようにネイティブで）のどちらかです。無効な<textarea>は対象外です。無効なフィールドは操作可能である必要がないためです。
例
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY">Plain long text content with no interactive children at all.</div>
この領域はスクロールできますが、自身のtabindexもフォーカス可能な子孫要素もないため、キーボードのユーザーはスクロールするためにこの領域に到達できません。
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY" tabindex="0">Long content, but the region itself is focusable.</div>
tabindex="0"により、スクロール可能な領域自体にキーボードで到達できます。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
SCROLLABLE_OVERFLOW_NOT_FOCUSABLE
- レポートに示された要素を見つけ、ページが使われるサイズで、そのコンテンツがはみ出すか（スクロールバーが現れるか、コンテンツが切れるか）確認してください。
- はみ出さない場合は合格です。
- はみ出す場合は、そのすぐ手前をクリックし、フォーカスが届くまでTabキーを押してください。
- フォーカスがある状態で矢印キー、Page Downキー、Spaceを押し、コンテンツがスクロールすることを確認してください。
- 領域自体をキーボードでスクロールできない場合でも、カルーセルの「前へ」「次へ」ボタンのように、隠れた内容を見る別の方法がページにあるかもしれません。キーボードだけで使え、隠れた項目をすべて表示できる場合にだけ、それを認めます。
満たす場合：要素ははみ出さないか、隠れた内容のすべてを、スクロールするかページが提供する別の方法で、キーボードだけで表示できます。
満たさない場合：隠れた内容の一部はマウスやタッチでしか表示できないため、WCAG 2.1.1を満たしません。