ページごとに場所が変わるヘルプリンク

あるショップのページは、共通のヘッダーを使っています。ロゴ、ShopとSale、AccountとBasket、そして最後にHelpです。商品ページでHelpを使ったことがある人は、その場所を知っています。シャツをカートに入れて購入手続きへ進むと、ページが変わります。購入手続きのヘッダーは簡素で、ロゴと「Secure checkout」しかありません。支払いに集中してもらうための、よくある作り方です。Helpはヘッダーからなくなり、配送と支払いのフォームの下、フッターに移っています。カードが通らない、配送の選択肢が分からないなど、ヘルプがいちばん必要になる場面で、覚えた場所にヘルプがありません。

同じ移動は、ほかの形でも起きます。

• 電話番号がほとんどのページでヘッダーにあるのに、商品ページではレビューの後のサイドバーにある。
• チャットの起動ボタンはどのページでも同じ隅に描かれているが、スクリプトがテンプレートによってページの先頭に入ったり最後に入ったりするため、スクリーンリーダーでは出会う位置が変わる。
• 別のプラットフォームで作ったアカウント画面では、ショップのページで最後にある「Contact us」がメニューの最初にある。

達成基準3.2.6「一貫したヘルプ」はレベルAで、WCAG 2.2で新しく加わりました。対象は4種類のヘルプです。電話番号やメールアドレスなど人への連絡先、問い合わせフォームやスタッフとのチャットなど人に連絡する手段、ヘルプセンターやよくある質問などのセルフヘルプ、チャットボットなど完全に自動化された連絡手段です。ページにこれらがあり、それが複数のページで繰り返される場合、どのページでもページのほかの内容に対して同じ順序にある必要があります。利用者が拡大率や画面の向きを変えた場合は例外ですが、ページを移動することはこの変更に当たりません。

ここでの順序は、コード上の順序、つまりスクリーンリーダーが読む順序です。確かめ方は単純です。あるページでヘルプの前にあるものは、ほかのページでも前にあり、後にあるものは後にあります。ショップのどのページでも、Helpは本文の前にあります。購入手続きでは本文の後にあります。

この基準は、すべてのページにヘルプを置くことを求めてはいません。ヘルプのないページがあっても不適合にはなりません。ヘルプを用意すること自体も求めていません。連絡先そのものではなく、問い合わせページへのリンクでもかまいません。CSSで別の場所に描かれていても、コード上の位置が同じなら不適合にはなりませんが、前の場所を探す人の助けにはなりません。

ヘルプがいちばん必要なのは購入手続きです。カードが通らない、配送日が分からない、割引コードが使えないといった場面です。購入手続きは専用の簡素なレイアウトになることが多く、ヘルプがいちばん移動しやすいページでもあります。

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

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

• 言語・認知・学習の能力が限られる 物の場所を覚えて使う人は、前のページでヘルプがあった場所を探します。そこにないと、このサイトにはヘルプがないと判断し、つまずいた段階であきらめることがあります。
• 視覚が限られる 画面拡大ソフトの利用者は、画面の一部ずつを見ながら、ヘルプがあった場所へまっすぐ向かいます。移動していると、ページ全体を少しずつ見て探すしかありません。
• 視覚を使わない どのページでも先頭近くでヘルプを見つけていたスクリーンリーダー利用者は、購入手続きでそこにヘルプがなく、フォーム全体を読むかリンクの一覧を出して、最後に移ったと知るしかありません。
• 手の操作が限られる キーボード利用者は、ほかのページでは数回のTabキーでヘルプに届いていました。購入手続きでは、先にフォームのすべての欄をTabキーで通る必要があります。

どのページも単独では問題がなく、axeなどの自動チェックは1ページずつ調べます。3.2.6を扱うルールはありません。EaseWebの診断は、一回の実行で調べたページどうしを比べます。一部のページでは本文の前に、ほかのページでは本文の後にあるヘルプのリンクを報告します。ヘルプは、その言葉（Help、Support、Contact us、FAQと、ヘルプ、お問い合わせなどの日本語）か、電話やメールのリンクで見分けます。ほかの言葉で書かれたヘルプ、フレームの中のチャットの起動ボタン、ヘッダーの中だけでの移動は見分けられません。渡されたページしか比べないため、購入手続きのページも対象に含める必要があります。AIのコードアシスタントに「気が散らない購入手続き」を頼むと、ヘッダーのリンクをHelpごと外します。購入手続きにヘルプを足すよう頼むと、そのページだけに出る「お困りですか？」の浮いたボタンを足すことがよくあります。それは元の場所ではなく、新しい場所です。