フォーカス順の最後に回る、フローティングボタンとパネル

ツアー会社の予約ページが、スマートフォン向けにデザインされています。「旧市街ウォーキングツアー」「2時間、1人$25から」、写真、集合場所と「地図で開く」リンク、タップで開く3つの質問（「段差のないルートですか？」「雨の場合は？」「キャンセルできますか？」）、「128件のレビューをすべて読む」リンクが並び、フッターに「ヘルプセンター」「利用規約」「お問い合わせ」があります。ページを開いた時点から、画面の下に白いバーが浮いていて、「$25から」と「予約する」ボタンがあり、いつでも親指で予約できます。「予約する」を押すとバーのすぐ上にシートが開き、日付を選んで「次へ」へ進めます。

キーボード利用者がページを開き、見えている「予約する」へ進もうとTabを押します。フォーカスは代わりに「地図で開く」へ移り、続いて各質問、レビューのリンク、フッターの3つのリンクへ進みます。「予約する」は9回目のTabです。スクリーンリーダー利用者が最初から読むと、フッターまでページ全体を聞いた後で、ようやく「予約する、ボタン、折りたたみ」にたどり着きます。

開発者はこの問題に気づき、バーをマークアップの上へ、価格の後に移します。「予約する」は最初のTabになりました。ところが、もう一つの問題が残ります。Enterキーを押すとシートが開きますが、最初の日付へ進もうとTabを押すと、フォーカスは「地図で開く」へ戻ります。日付に届くのは、またページ全体の後、9回先です。

バーもシートも、ページの最後、フッターの後に書かれています。親要素に切り取られないよう、予約ウィジェットやコンポーネントライブラリーが浮いて表示するものを置くことの多い場所です。CSSは画面の下に描きますが、Tabとスクリーンリーダーは見た目には従いません。マークアップの順にページを進み、マークアップの上ではバーとシートは最後です。マークアップの順序を画面上の順序に合わせる達成方法C27は、この食い違いを解消するものです。

達成基準2.4.3 フォーカス順序は、意味と操作を損なわない順序でフォーカスが移ることを求めています。バーはページの主な操作として最初から内容の手前に描かれ、スマートフォンではこれが唯一の「予約する」ボタンです。それなのにすべての後に来るため、キーボードとスクリーンリーダーの利用者は、ほかの人が1回のタップで届くものに、ページ全体を通ってたどり着くことになります。フォーカス順序は見た目の配置に従う必要はなく、2.4.3の解説も本文の後に書いたナビゲーションを適合する例に挙げているため、浮いた操作要素が最後に来てよいかどうかは、ページに対する判断です。ページの最後にある「ページ上部へ」ボタンやチャットの起動ボタンは事情が違います。ページの目的ではなく、利用者もそこにあると考えるためです。

シートも、失敗例F85のとおり同じ達成基準を満たしません。ボタンで開くダイアログやメニューに、フォーカスが移らず、次のTabでも届かない場合です。ボタンを移すと最初の問題は解消しますが、シートは最後に残るため、こちらの問題は残ります。F85のテストには後半もあり、そちらはこのシートも満たしています。Escapeキーで閉じると、フォーカスは「予約する」に戻ります。シートへ向かう途中、フォーカスはシートの後ろも通るため、見えなくなることもあります。

ページが長いほど、バーもシートも遠くなります。写真のギャラリー、地図、十数件のレビュー、充実したフッターのある実際の予約ページなら、「予約する」まで数十回、日付までさらに同じくらいのTabが必要になることがあります。

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

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

• 手の操作が限られる キーボードやスイッチの利用者には、ページを開いた時点から「予約する」が見えていますが、届くのはフッターの後、9回目のTabです。バーを上へ移しても、日付を開くと、次のTabはページの上へ戻り、日付はまた9回先になります。写真やレビューのある実際のページなら数十回です。
• 視覚を使わない スクリーンリーダー利用者は、フッターまでページ全体を聞いた後で「予約する」にたどり着き、予約ボタンがずっと画面にあったことを知らされません。日付を開いても、読まれるのはページの最後です。
• 視覚が限られる バーを拡大して見ている画面拡大の利用者には「予約する」が見えていますが、9回目のTabまでフォーカスはページの別の場所にあり、バーを上へ移しても、シートを開くと、拡大した表示がフォーカスを追ってシートから離れてしまいます。

一つひとつの部品に問題はありません。「予約する」は名前とaria-expandedを持つbuttonで、シートには見出し、凡例、ラベル付きの選択肢があり、どの操作要素にも到達できます。axeが報告することはありません。問題は順序にあり、ページがどの順序を意図しているかは人にしか判断できません。EaseWebの診断は、ウィンドウに固定された操作要素に、ページのフッターの後でしかTabが届かない場合を、確認が必要な項目として挙げるようになりました。「ページ上部へ」ボタンは最後にあってよく、チャットの起動ボタンとCookieバナーにはそれぞれ別の確認があるため、これらは除きます。2つ目の問題は検出結果として報告します。aria-expandedとaria-controlsを持つボタンを、1ページにつき12個まで一つずつ開き、フォーカスがパネルの中へ移らず、次のTabでも届かないとき、そのパネルを報告します。開くことを伝えないボタンのパネルや、外部サービスのフレームの中にあるパネルは、引き続き手作業でしか見つけられません。ページの上に浮くバーやシートをAIアシスタントに頼むと、overflowやz-indexの影響を避けるためにポータルやdocument.body.append()を使うことがあり、それが順序に何をもたらすかは説明されません。