トピックを検索
SpaceキーやPage Downでは先へ進めない全画面セクション
スクリプトがホイールとスワイプのイベントだけで全画面のセクションを切り替え、ページのスクロールも止めているため、Space、Page Down、矢印キーでは何も動かない
window.addEventListener('wheel', …) 問題
キーボードを使う人には最初の画面しか見えず、次の画面を表示できない
ヘッドホンの製品ページが、全画面の4つのセクションでできています。製品名、バッテリー、修理、そして価格と「今すぐ注文」のリンクです。マウスホイールを1目盛り回すか、1回スワイプすると、次のセクションまで一気に切り替わり、途中で止まることはありません。発売時のページによくある見せ方で、ホイールで操作すると気持ちよく動きます。
キーボードを使う人がページを開いてSpaceキーを押しても、何も動きません。Page Down、下矢印キー、Endも同じです。Tabキーを押すと、最後のセクションの「今すぐ注文」へ直接移ります。ページの中で最初にフォーカスを受けられるのがこのリンクだからです。バッテリーと修理のセクションは、一度も画面に出ないまま通り過ぎます。
最初の画面には、続きがあることを示すものがありません。overflow: hidden でスクロールバーはなくなり、ウィンドウいっぱいのセクションには、下の端で切れて見えるものもありません。
達成基準2.1.1は、すべての機能をキーボードで操作できることを求めています。ふつうは何もしなくても、スクロールできるページならSpace、Page Down、矢印キー、Home、Endでスクロールできます。このページでは、そのスクロールが止められています。html と body に overflow: hidden を指定しているのでブラウザーにはスクロールできるものがなく、セクションを動かす transform を変えるのも wheel のリスナーとスワイプだけです。
W3Cはこれを失敗例F54としています。ポインティングデバイス固有のイベントハンドラーだけで機能を実行している、という失敗です。達成基準は特定のキーを指定していません。同じことをキーボードでできる方法を求めているので、下の修正の1つのように、各セクションを選ぶボタンがあるページなら満たせます。このページには、途中のセクションへキーボードで進む方法がまったくありません。
Tabでは解決しません。文章だけのセクションにはフォーカスできるものがないので、Tabは止まれません。リンクに届いたときは、ブラウザーがリンクを見せようとして固定された body をスクロールします。スクリプトはこのスクロールを把握していないので、次にホイールを回すと、スクリプトが数えているセクションと画面がずれてしまいます。
マウスなら動き、スワイプを扱っていればスマートフォンでも動くため、誰もキーを試さないまま公開されることがあります。
10グループ中5グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響あり)
- 筋力・可動域 (影響あり)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 手の操作が限られる キーボードやスイッチを使う人がSpace、Page Down、矢印キーを押しても、最初の画面は動きません。Tabはページで最初のリンクへ移り、フォーカスできるもののないセクションを素通りするため、そこにある文章を目にできません。
- 筋力や可動域が限られる マウスホイールやスワイプが難しい人はスクロールのキーを使いますが、このページではそのキーで何も動きません。
- 視覚が限られる 拡大表示にしても各セクションの高さは1画面分のままなので、文章がウィンドウの外や次のセクションにはみ出し、キーでは画面に出せません。
- 視覚を使わない 表示していないセクションをスクリプトがvisibility: hiddenで隠していると、GSAPのドキュメントにあるObserverのデモのように、そのセクションはアクセシビリティツリーから外れます。スクリーンリーダーで読めるのは、表示中のセクションだけになります。
- 言語・認知・学習の能力が限られる 最初の画面には、続きがあることを示すものがありません。スクロールバーはなく、下の端で切れて見えるものもありません。その画面がページのすべてだと受け取った人には先を見る理由がなく、価格も注文のリンクも見つけられません。
マークアップは正しく、どのセクションの文章もページの中にあるため、axeなどのマークアップのチェックは通ります。EaseWebの監査はキーを実際に押します。ページにフォーカスがある状態でPage Down、Space、下矢印キー、Endを押し、次にTabを押してからもう一度Page Downを押し、最後にホイールを回します。ホイールでは動くのにどのキーでも動かないページは、ew:scroll-keys-manual-check として報告します。キーを押し続けても、ページの終わりより手前でスクロールが止まるページも同じです。これはレビュー用の手がかりで、問題の確定ではありません。ページのどこかにあるボタンで全セクションへ進める場合があり、コードではそこまで判断できないからです。AIによる修正では、矢印キーだけのリスナーを足して、Space、Page Down、Home、Endは効かないままになったり、セクションに tabindex="0" を付けてTabの止まる場所を増やすだけで、何も動かないままになったりすることがあります。
試してみる
ページをクリックしてから、どのセクションにもキーボードで進んでみましょう
マウスホイールやスワイプならページは動きます。Space、Page Down、矢印キーではどうでしょうか。Tabキーも押して、どのセクションを通るか見てください。
修正を適用したら、もう一度試してください。
問題あり 修正できますか?
Aster One
平らに折りたためるヘッドホン。
1回の充電で30時間
10分の充電で、さらに3時間使えます。
直して使い続ける
すべての部品を交換でき、修理ガイドは無料です。
$199
送料無料で、30日以内なら返品できます。
今すぐ注文修正方法
ホイールと同じように、キーボードでもページを動かす
<main class="screens"> <section> <h1>Aster One</h1> <p>平らに折りたためるヘッドホン。</p> </section> <section> <h2>1回の充電で30時間</h2> <p>10分の充電で、さらに3時間使えます。</p> </section> <section> <h2>直して使い続ける</h2> <p>すべての部品を交換でき、修理ガイドは無料です。</p> </section> <section> <h2>$199</h2> <p>送料無料で、30日以内なら返品できます。</p> <a href="/order">今すぐ注文</a> </section></main>問題点4点
htmlとbodyにoverflow: hiddenを指定しているのでブラウザーにはスクロールできるものがなく、Space、Page Down、矢印キー、Home、Endでは何も動きません。show()を呼ぶのはホイールとスワイプだけで、キーからは呼ばれません。- Tabは、フォーカスできるもののない2つのセクションを飛ばして「今すぐ注文」へ直接移ります。
- そのときブラウザーがリンクを見せようとして固定された
bodyをスクロールするため、スクリプトが数えているセクションと画面が合わなくなります。
ブラウザーがスクロールし、セクションの位置で止まる
<main class="screens"> <section> <h1>Aster One</h1> <p>平らに折りたためるヘッドホン。</p> </section> <section> <h2>1回の充電で30時間</h2> <p>10分の充電で、さらに3時間使えます。</p> </section> <section> <h2>直して使い続ける</h2> <p>すべての部品を交換でき、修理ガイドは無料です。</p> </section> <section> <h2>$199</h2> <p>送料無料で、30日以内なら返品できます。</p> <a href="/order">今すぐ注文</a> </section></main>修正の手順3ステップ
overflow: hiddenとスクリプトを外します。ページがまたスクロールするようになり、何も書かなくても、Space、Page Down、矢印キー、Home、Endで動き、Tabでも各リンクが画面に入ります。htmlにscroll-snap-type: y proximityを、各セクションにscroll-snap-align: startを指定します。SpaceとPage Downで、ホイールのときと同じように次のセクションの位置で止まります。heightをmin-heightに変えます。拡大時や小さな画面で高さが足りなくなったセクションは伸び、その中をキーでスクロールできます。
これで修正前の例は直り、スクリプトなしで2.1.1を満たします。セクションが現れるときのアニメーションは、スクロール位置に連動させれば残せます。キーの処理はブラウザーに任せたままです。
3つとも2.1.1を満たしますが、条件なしで満たすのは最初の方法だけなので、これを選んでください。ブラウザー自身のスクロールは、スクロールのキー、Tab、タッチのすべてに対応し、保守するスクリプトがなく、拡大されればセクションも伸びます。その代わり、細かな制御はできなくなります。2つのセクションの間で止まることがあり、動きもブラウザーまかせで、決まった時間で動くスライドにはなりません。そのスライドがページの要であるときだけスクリプトを残し、2番目の方法でキーに対応してください。ボタンは、すぐには作り直せないページの応急処置として、または他の2つに添えるものとして考えてください。
ここで確認したスクロールのライブラリーは、多くがこの問題を起こしていません。書き直す前に、使っているものを確認してください。2026年11月に、Chromium、Firefox、WebKitで、既定の設定のまま確認した結果は次のとおりです。
- fullPage.js 4:
keyboardScrollingは既定で有効です。Space、Page Down、矢印キー、Home、Endでセクションが切り替わり、ウィンドウより高いセクションはまずその中がスクロールします。無効にしないでください。 - Lenis 1.3、Locomotive Scroll 5、GSAPのScrollSmoother:ホイールの動きをなめらかにするだけで、キーの処理はブラウザーに任せているので、キーで動きます。Locomotive Scroll 4のsmoothモードはキーを自分で処理していて、3つのエンジンともキーでページが動きました。
- GSAPのObserver:wheel、touch、pointerのイベントを受け取り、キーは受け取りません。そのためドキュメントにあるセクションのデモのように、これで作ったページはこのガイドの修正前の例と同じです。このデモは他のセクションを
visibility: hiddenで隠すので、Tabも届きません。 - Swiper 14で
direction: 'vertical'とmousewheel: trueを指定した場合:キーボードのオプションは既定で無効なので、どのキーでも動きません。keyboard: { enabled: true }で矢印キー、Page Up、Page Downは動きますが、Space、Home、Endは動きません。クリックできるページネーションの丸がTabで止まり、Enterで切り替えられるのは、A11yモジュールを読み込んでいるときだけです。フルバンドルには含まれていますが、モジュールを個別に読み込むなら追加が必要です。
固定(ピン留め)したセクションでも同じ失敗が起こります。固定そのものは問題ありません。高さのある親の中で position: sticky にしたセクションや、GSAPのScrollTriggerで pin と scrub を指定したセクションはページのスクロール位置に従うので、Page Downで各段階を進めます。問題になるのは、スクリプトがホイールのイベントで段階を進め、それ以外のスクロールを固定した位置へ強制的に戻す場合です。GSAPのフォーラムの回答で、慣性スクロールを止めるために使われている方法です。これを再現して3つのエンジンで動かすと、ページはそのセクションまでスクロールしたあと、上にも下にもキーでは動かなくなり、ホイールでしか先へ進めませんでした。段階はスクロール位置から決めてください。
スクロールスナップ自体は原因ではありません。ウィンドウより高いセクションは、scroll-snap-type: y mandatory でも読めます。CSSの仕様は、ウィンドウより大きいスナップ領域の中では自由にスクロールしてよいとしていて、3つのエンジンとも矢印キーでスクロールできました。Page DownとSpaceもChromiumとWebKitでは同じでしたが、Firefoxでは高いセクションの先頭から次のセクションへ飛びました。そのため、3つとも中を順に進めた proximity を使ってください。mandatory では、長いセクションの中の見出しにスナップさせないでください。仕様は、間の内容にアクセスできなくなることがあると警告しており、3つのエンジンでの確認でも、キーでもホイールでもその内容の位置では止まれませんでした。
続きがあることを示します。 これを求める達成基準はなく、2.1.1を満たすかどうかには関わりませんが、ウィンドウいっぱいのセクションは、それで完結しているように見えます。Nielsen Norman Groupはこれを「偽の床」(false floor)と呼び、大きなヒーロー画像にはスクロールを促す手がかりがないと指摘しています。同社が勧めるのは、次の内容を画面の下端に少し見せることで、セクションをウィンドウより少し低くすれば、そうなります。スクロールバーも手がかりになりますが、スクロールを始めるまで隠すシステムもあります。下向きの矢印も、スクロールする前から見えていれば同じ役割を果たします。次のセクションへの本物のリンクかボタンにすれば、キーボードでも先へ進めます。セクションのボタンを付ける修正では、ボタンそのものが続きを示します。
デザインの案
全画面のページでも、続きがあることを示し、誰でもそこへ進める
ヘッドホンのページの最初の画面を6通りに描きました。まず触らずに見てから、マウスを使わずにキーボードで試してみてください。4つはキーボードで先へ進めますが、2つはマウスでしか進めません。
デザインファイルで
- 最初の画面をノートパソコンとスマートフォンの実際のウィンドウの高さで描き、続きがあると分かるものがあるか確かめる。
- 手がかりは、スクロールする前から見えるように描く。ホバーのときだけにしない。
- 矢印や言葉は次のセクションへのリンクとして描き、フォーカスの枠も描く。大きさは24×24ピクセル以上にする。
- 手がかりのコントラスト比を横に書く。矢印は3:1以上、言葉は4.5:1以上にする。
合格
Aster One 平らに折りたためるヘッドホン。 1回の充電で30時間 10分の充電で、さらに3時間使えます。 直して使い続ける どの部品も交換できます。 $199 送料無料で、30日以内なら返品できます。 次のセクションが下の端に見える 最初の画面をウィンドウより少し低くすると、次の見出しが下の端で切れて見え、続きがあると分かります。新しく描くものはなく、キー操作もブラウザーのスクロールに任せられます。画面いっぱいに収まった見た目はあきらめることになります。- リンクになった丸い矢印 画面の下に直径44pxの丸い矢印を最初から表示します(紺と黄色で9.57:1)。次のセクションへのリンクなので、Tabで止まり、Enterキーでもクリックでもそこへ進めます。
- Aster One 平らに折りたためるヘッドホン。 スクロール「スクロール」の文字と線 小さな文字と、そこから下へ伸びる細い線だけの、落ち着いた見た目です(紙色の背景に対して13.95:1)。矢印を見ても進めると思わない人にも、文字なら何をすればよいかが伝わります。これも次のセクションへのリンクです。
- 横に並ぶセクション名 画面の横に「電池」「修理」「価格」を並べると、続きがどれだけあり、何が書かれているかまで分かります。矢印にはできないことです。それぞれがリンクで、現在の位置には3pxの線を引きます。場所をとるので、スマートフォンでは画面の下に移します。
不合格
- Aster One 平らに折りたためるヘッドホン。絵だけの矢印WCAG 2.1.1 矢印は続きがあることを伝えますが、そこへ進めるのはホイールだけです。押すことはできず、どのキーでも画面は動きません。サンプルの上でホイールを回してから、キーを試してみてください。
- Aster One 平らに折りたためるヘッドホン。ホバーで現れるドットWCAG 2.1.1 マウスを載せるまで画面がすっきり見えます。ドットは本物のボタンですが、隠れている間はフォーカスを受けないのでTabは素通りし、それまでは続きがあることも分かりません。
修正の確認
5項目、マウス不要
確認方法: キーボード、拡大表示、スクリーンリーダー
OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。ページのセクションを変更したときや、セクションを動かすライブラリーを更新したときは、もう一度確認してください。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ここで扱うのは、ページ自身のスクロールをスクリプトが奪っている場合です。ページと同じ大きさで overflow-y: scroll を指定した枠は別の問題で、フォーカスが中に入るまでキーが効きません。キーボードでスクロールできないスクロール領域を参照してください。スクロールすると続きを読み込む長いリストはTabで近づくとフッターが遠ざかる無限スクロールで、止められない動きは動きを減らす設定を無視するアニメーションで、バーの下に隠れるフォーカスはフォーカス中のリンクを隠す固定ヘッダーとバナーで扱います。スクリプトがページを止めている間に画面外のリンクがフォーカスを受けると、フォーカス表示が見えない独自デザインのボタンと同じくフォーカスが見えなくなりますが、スクロールを直せば解消します。ライブラリーの確認は、デスクトップ版のChromium、Firefox、WebKitでキーボードを使って行いました。Safariそのもの、スマートフォン、スクリーンリーダーでは確認していません。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術での完全なテストを実施済みとは主張していません。
参考資料
- WCAG Understanding: keyboard(新しいタブで開きます)
- WCAG Technique F54(新しいタブで開きます)
- w3.org: css-scroll-snap-1(新しいタブで開きます)
- developer.mozilla.org: scroll-snap-type(新しいタブで開きます)
- developer.mozilla.org: overflow(新しいタブで開きます)
- developer.mozilla.org: visibility(新しいタブで開きます)
- gsap.com: Observer(新しいタブで開きます)
- swiperjs.com: swiper-api(新しいタブで開きます)
- alvarotrigo.com: docs(新しいタブで開きます)
- nngroup.com: illusion-of-completeness(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。