キーボードでスクロールできないスクロール領域

ショップの購入手続きの最後に、「利用規約」という見出しの下の枠に規約があり、その下に「利用規約を読み、同意します」というチェックボックスと「注文を確定」ボタンがあります。規約は6つの条項があるため、枠は決まった高さにしてスクロールするようになっています。購入手続きが短く見え、マウス、トラックパッド、指を使う人なら、枠をスクロールして続きを読めます。

MacのSafariでキーボードを使う人が、メールアドレスの欄からTabを押すと、チェックボックスに移ります。枠は飛ばされました。矢印キーやPage Downを押すとページがスクロールし、枠は画面の上へ動きますが、枠の中の文章は動かないため、返品と返金の条項は見えないままです。チェックボックスに印を付けるには、読めなかった規約に同意するしかありません。

達成基準2.1.1は、すべての機能をキーボードで操作できることを求めています。枠の中の隠れた文章を表示する方法は、枠をスクロールすることだけです。そしてキーボードで枠をスクロールできるのは、フォーカスが枠そのものか、枠の中にあるときだけです。この枠には tabindex がなく、中は段落だけなので、Tabが止まる場所がありません。

ブラウザーはこれを補い始めています。Firefoxは以前から、スクロールする枠にTabで止まります。ChromeとEdgeも、バージョン132から、中にフォーカスできるものがない枠に止まるようになりました。Safariはまだ止まりません。それを求めるWebKitのバグは2018年から未解決のままで、キーボードを付けたiPadでは、Chromeなどのブラウザーも、通常はSafariと同じエンジンで動きます。あるブラウザーではスクロールでき、別のブラウザーではできない枠は、別のブラウザーを使う人にとって、やはり基準を満たしません。

SafariはすべてのMacとiPadに最初から入っているブラウザーなので、それらでキーボードを使う人の多くが開いているブラウザーです。タッチ操作が難しいため、iPadにキーボードを付けている人も含まれます。画面が小さくなるほど問題は広がります。ノートパソコンでは中身が収まる枠、たとえばスクロールする枠で囲んだ広い表は、スマートフォンや400%の拡大表示で初めてスクロールし始めることがよくあります。

10グループ中2グループに影響

• 全盲 （影響なし）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 届く範囲・力 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 手の操作が限られる Safariでキーボードやスイッチを使う人は、メールアドレスの欄からTabでそのままチェックボックスへ移り、矢印キーを押しても、動かない枠の周りでページがスクロールするだけです。返品と返金の条項を表示できないまま、規約への同意を求められます。
• 届く範囲・力が限られる 手のふるえや筋力の低下があり、枠の細いスクロールバーや、小さな枠の中でのスクロールの操作が難しい人は、代わりにキーボードを使いますが、Safariではキーボードでも枠を動かせません。

axeの scrollable-region-focusable は、スクロールするのに、枠にも中にもTabの止まる場所がない枠を見つけます。EaseWebの診断は、これをほかのレベルAのルールと一緒に実行します。このルールの説明は、今は問題のあるブラウザーとしてSafariを挙げています。axeはページを読み込んだときの大きさで調べるため、狭い画面でだけスクロールする枠は見えません。診断のリフローの確認は、ページを幅320ピクセルにして、そうした枠を ew:reflow-scroller-not-focusable として報告します。どちらも、枠の中にリンク、ボタン、入力欄が一つでもあれば十分とみなします。矢印キーを自分で使ってしまう入力欄でも同じです。Chromeで手動でテストしても何も見つかりません。Chromeは枠に自分で止まるためです。AIによる修正は、名前もフォーカスリングもない tabindex="0" だけを付けることや、overflow: hidden でスクロールバーを消すことがあります。後者では、条項は誰にとっても見えないままになります。