本文へ移動
easeweb
ご相談
トピックを検索

SpaceキーやPage Downでは先へ進めない全画面セクション

スクリプトがホイールとスワイプのイベントだけで全画面のセクションを切り替え、ページのスクロールも止めているため、Space、Page Down、矢印キーでは何も動かない

WCAG 2.2
SC 2.1.1A
必須とする規格
JIS X 8341-3
問題あり window.addEventListener('wheel', …)
アクセシビリティの問題を示した図: 手の操作:次の画面へはどう進むの?
01

問題

キーボードを使う人には最初の画面しか見えず、次の画面を表示できない

02

試してみる

ページをクリックしてから、どのセクションにもキーボードで進んでみましょう

マウスホイールやスワイプならページは動きます。Space、Page Down、矢印キーではどうでしょうか。Tabキーも押して、どのセクションを通るか見てください。

修正を適用したら、もう一度試してください。

問題あり 修正できますか?

問題ホイールで切り替わる全画面セクション

Aster One

平らに折りたためるヘッドホン。

1回の充電で30時間

10分の充電で、さらに3時間使えます。

直して使い続ける

すべての部品を交換でき、修理ガイドは無料です。

$199

送料無料で、30日以内なら返品できます。

今すぐ注文

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

ホイールと同じように、キーボードでもページを動かす

修正前
問題ホイールで切り替わる全画面セクション
<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ステップ
  1. overflow: hidden とスクリプトを外します。ページがまたスクロールするようになり、何も書かなくても、Space、Page Down、矢印キー、Home、Endで動き、Tabでも各リンクが画面に入ります。
  2. html に scroll-snap-type: y proximity を、各セクションに scroll-snap-align: start を指定します。SpaceとPage Downで、ホイールのときと同じように次のセクションの位置で止まります。
  3. height を min-height に変えます。拡大時や小さな画面で高さが足りなくなったセクションは伸び、その中をキーでスクロールできます。

これで修正前の例は直り、スクリプトなしで2.1.1を満たします。セクションが現れるときのアニメーションは、スクロール位置に連動させれば残せます。キーの処理はブラウザーに任せたままです。

04

デザインの案

全画面のページでも、続きがあることを示し、誰でもそこへ進める

ヘッドホンのページの最初の画面を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)。矢印を見ても進めると思わない人にも、文字なら何をすればよいかが伝わります。これも次のセクションへのリンクです。
  • Aster One 平らに折りたためるヘッドホン。
    横に並ぶセクション名 画面の横に「電池」「修理」「価格」を並べると、続きがどれだけあり、何が書かれているかまで分かります。矢印にはできないことです。それぞれがリンクで、現在の位置には3pxの線を引きます。場所をとるので、スマートフォンでは画面の下に移します。

不合格

  • Aster One 平らに折りたためるヘッドホン。
    絵だけの矢印WCAG 2.1.1 矢印は続きがあることを伝えますが、そこへ進めるのはホイールだけです。押すことはできず、どのキーでも画面は動きません。サンプルの上でホイールを回してから、キーを試してみてください。
  • Aster One 平らに折りたためるヘッドホン。
    ホバーで現れるドットWCAG 2.1.1 マウスを載せるまで画面がすっきり見えます。ドットは本物のボタンですが、隠れている間はフォーカスを受けないのでTabは素通りし、それまでは続きがあることも分かりません。
05

修正の確認

5項目、マウス不要

確認方法: キーボード、拡大表示、スクリーンリーダー

5件中0件を確認済み

OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。ページのセクションを変更したときや、セクションを動かすライブラリーを更新したときは、もう一度確認してください。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ここで扱うのは、ページ自身のスクロールをスクリプトが奪っている場合です。ページと同じ大きさで overflow-y: scroll を指定した枠は別の問題で、フォーカスが中に入るまでキーが効きません。キーボードでスクロールできないスクロール領域を参照してください。スクロールすると続きを読み込む長いリストはTabで近づくとフッターが遠ざかる無限スクロールで、止められない動きは動きを減らす設定を無視するアニメーションで、バーの下に隠れるフォーカスはフォーカス中のリンクを隠す固定ヘッダーとバナーで扱います。スクリプトがページを止めている間に画面外のリンクがフォーカスを受けると、フォーカス表示が見えない独自デザインのボタンと同じくフォーカスが見えなくなりますが、スクロールを直せば解消します。ライブラリーの確認は、デスクトップ版のChromium、Firefox、WebKitでキーボードを使って行いました。Safariそのもの、スマートフォン、スクリーンリーダーでは確認していません。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術での完全なテストを実施済みとは主張していません。

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る