Tabで近づくとフッターが遠ざかる無限スクロール

あるショップのカテゴリーページには48個のマグがあり、12個ずつ表示されます。ページ番号のリンクもボタンもありません。一覧の終わりが見えてくると、最後の行の下に「マグを読み込んでいます…」と表示され、少しすると12個のマグが加わって、その表示は消えます。マウスや指でスクロールしている限り、一覧はどこまでも続き、それがこのデザインのねらいです。一覧の下のフッターには、「お問い合わせ」と「返品」のリンクがあります。

マウスを使わずに、Tabキーで「お問い合わせ」へ向かってみます。フォーカスはマグからマグへ移ります。最後の数行に来るたびに、フォーカスのあるマグを見せるためにページがスクロールし、一覧の終わりが近づいて、フォーカスとフッターの間に12個のマグが追加されます。次にTabキーを押すと、その新しいマグに入ります。「お問い合わせ」に届くのは、48個すべてが読み込まれ、Tabキーでそのすべてを通り過ぎた後です。終わりのない一覧では、いつまでも届きません。その間、スクリーンリーダーは何も言いません。「マグを読み込んでいます…」はただの div に出ては消え、新しいマグは音もなく加わります。

もう1つの版では、追加のたびに list.innerHTML += html を使っています。この1行は一覧のマグをすべて作り直すため、フォーカスのあったマグもほかのマグと一緒に消え、フォーカスはページそのものに移ります。Chromeでは、次にTabキーを押すと最初のマグに戻ります。12個読み込むたびに、キーボードの利用者は一覧の先頭へ戻され、スクリーンリーダーの利用者は読んでいた位置を見失います。

達成基準2.1.1「キーボード」は、ページでできることをすべてキーボードでもできることを求めています。「お問い合わせ」と「返品」は普通のリンクですが、Tabキーで届くのは、読み込むものがなくなったときだけです。フォーカスが近づくたびに、その手前で一覧が伸びるからです。このページでは48個すべてのマグを通る必要があり、終わりのない一覧では、フッターのリンクにキーボードからはまったく届きません。フッターは最初からページにあるため、スクリーンリーダーならランドマークのキーで直接移動できますが、Tabキーにはそうしたキーがありません。

達成基準2.4.3「フォーカス順序」は、ページの意味と操作性を保つ順序でフォーカスが移ることを求めています。一覧が作り直されると、フォーカスのあったマグはもう存在せず、ブラウザーはフォーカスをページそのものに置くしかありません。次にTabキーを押したときの移動先は、ページではなくブラウザーが決めます。Chromeでは最初のマグです。マグの並びは変わっていなくても、読み込むたびに、その中で自分がどこにいたかが分からなくなります。

達成基準4.1.3「ステータスメッセージ」は、さらに読み込むのを待っているといったページの状態を知らせるメッセージが、フォーカスを受けずにスクリーンリーダーへ届くことを求めています。「マグを読み込んでいます…」はそうしたメッセージですが、役割のないただの div に表示されるため、スクリーンリーダーには伝わりません。これは失敗例F103にあたります。マグそのものはステータスメッセージではなくコンテンツで、4.1.3は1つずつ読み上げることまでは求めていません。一方、表示中の件数をページに出す場合、その件数はステータスメッセージです。

無限スクロールは、ショップのカテゴリーページや検索結果、ニュースサイト、SNSのフィードでよく見られ、スマートフォン向けのレイアウトでは特に多く使われます。1つの共通の一覧部品から作られていることが多いため、同じ問題がサイト内のすべての一覧で繰り返されます。遠ざかるフッターには、問い合わせ、配送、返品、アクセシビリティ方針といった、困ったときに探すリンクが置かれていることがよくあります。

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

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

• 手の操作が限られる キーボードやスイッチの利用者がTabキーでフッターへ向かうと、近づくたびに目の前に12個のマグが追加されるため、「お問い合わせ」と「返品」には、すべてのマグを通った後でしか届かず、終わりのない一覧ではいつまでも届きません。一覧が作り直されると、フォーカスが外れ、次のTabキーは最初のマグからやり直しになります。
• 視覚を使わない スクリーンリーダーの利用者には、マグを読み込んでいる間も、追加されたときも何も聞こえないため、一覧が増えたのか、終わったのかが分かりません。一覧が作り直されると、読んでいたマグがなくなり、一覧のどこにいたのかを見失います。

どのマグも名前のあるリンクで、フッターも footer 要素です。マークアップとして不正な箇所はないため、axeが報告することはありません。フッターに届くか、読み込みの後もフォーカスが残るかは、ページを実際に操作して初めて分かります。

EaseWebの診断ツールは、ページを最後までスクロールしてフッターより前のリンクを数え、Tabキーで進んだときのように、その最後のリンクにフォーカスを置きます。自動で伸びる一覧は、人が確認する項目として渡します。一覧がすぐに終わるか、一覧を飛ばすキーがあるかは、人にしか判断できないからです。読み込みでフォーカスのあるリンクが消え、フォーカスがページに残る場合は、コードだけで証明できるため、2.4.3の問題として報告します。ライブリージョンがないページに読み込み中の表示があれば、それも人が確認する項目として渡します。読み上げられる内容が聞く人にとって筋が通っているかは、どの確認でも分かりません。

AIによる修正は、ここでARIAに頼りがちです。一覧全体に aria-live="polite" を付けると、スクリーンリーダーは読み込むたびに12個のマグの名前をすべて読み上げます。伝わるのは件数ではなく、雑音です。role="feed" を付けるだけでは、Tabキーを使う人には何も変わりません。フィードを飛ばすキーは、ページのスクリプトが用意するものだからです。