ページによって順序や名前が変わるナビゲーション

ある生活雑貨のショップのページは、共通のヘッダーを使っています。ロゴ、Shop、Sale、Journal、Aboutのメニュー、そしてAccountとBasketです。レシピや読み物を載せるJournalは別のブログサービスで動いていて、ヘッダーはブログを作ったときにショップのものを写しました。それ以来、どちらも別々に手直しされてきました。Journalでは「Journalのページだから」とメニューの先頭がJournalになり、同じページへ行く買い物かごのリンクはCartと書かれています。ショップでメニューを使っていた人がJournalの記事へ移ると、リンクの順序が違い、Basketが見当たりません。

同じずれは、ほかの形でも起きます。

• メニューを人気順やページの内容に合わせて並べ替えるため、同じリンクがページによって違う順序になる。
• 検索ボタンが、ほとんどのページでは「検索」、検索結果のページでは「Go」になっている。
• アイコンのボタンの名前が、ほとんどのページとほかのチームが作ったページで違う。たとえば「メニューを開く」と「ナビゲーション」。

レベルAAの2つの達成基準が、これを扱います。3.2.3「一貫したナビゲーション」は、複数のページで繰り返されるナビゲーションは、利用者が変えた場合を除き、毎回同じ相対的な順序で現れることを求めています。3.2.4「一貫した識別性」は、複数のページで同じ働きをする部品は一貫して識別されることを求めています。同じ働きなら、同じ名前です。

同じ相対的な順序は、まったく同じという意味ではありません。Journalのカテゴリーのようにリンクを足したり、今いるページへのリンクのように省いたりしても、ほかのページと共通するリンクが同じ順序なら適合します。この例では、共通する2つのリンクが入れ替わっています。ショップのページではJournalがSaleの後にあり、JournalのページではShopの前にあります。これは失敗例F66に当たります。

一貫していることも、まったく同じという意味ではありません。商品を入れた後の「Basket (2)」は、やはりBasketです。しかし、BasketとCartは1つのリンクの2つの名前で、失敗例F31に当たります。同じものだと分からない人もいます。ページ群を決めるのは、共通の目的と、同じ作成者や組織が作っていることで、ページを出すサービスではありません。Journalはショップ自身のもので、ショップのアドレスにあり、ショップのヘッダーの写しを使っているため、同じページ群に入ります。

いちばん違いが出やすいのは、ブログ、ヘルプセンター、店舗検索など、よそで作られ、それぞれがヘッダーの写しを持つページです。

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

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

• 言語・認知・学習の能力が限られる リンクの場所と名前を覚えて使う人は、いつもの場所でBasketを探し、そこにCartや別のリンクを見つけます。CartがBasketと同じものだと分からないこともあり、違うページのたびに時間がかかり、自信を失います。
• 視覚が限られる 画面拡大ソフトの利用者は、一度に数個のリンクしか見えず、前にあった場所へまっすぐ向かいます。メニューの順序が変わっていると、少しずつ見て探し直すしかありません。
• 視覚を使わない スクリーンリーダー利用者は、サイトのリンクの順序を覚え、記憶を頼りに飛ばしたり、リンクの一覧で頭文字を押してリンクへ移動したりします。順序や名前が変わると、そのどちらも使えなくなります。
• 手の操作が限られる キーボード利用者は、よく使うリンクに決まった回数のTabキーで届きますが、メニューの順序が変わると、その回数がページごとに変わります。音声操作の利用者はリンクの名前を言います。一部のページでBasketがCartと呼ばれていると、そこでは「Basketをクリック」が何もしません。

どのページのメニューも単独では問題がなく、axeなどの自動チェックは1ページずつ調べます。3.2.3と3.2.4を扱うルールはありません。EaseWebの診断は、一回の実行で調べたページどうしを比べます。ヘッダー、ナビゲーションメニュー、フッターで繰り返される2つのリンクが、一部のページと別のページで逆の順序になっている場合と、同じアドレスへのリンクの名前が、多くのページでの名前と1語も共通しない場合を報告します。実行で開かなかったページや mainランドマークがちょうど1つではないページのリンク、同じ働きを別の名前で持つボタン、CSSだけで起きる変化は見分けられません。渡されたページしか比べないため、Journalも対象に含める必要があります。AIのコードアシスタントに「ブログにヘッダーを付けて」と頼むと、見たものから新しいヘッダーを書き、独自の順序と言葉にしてしまうことがあります。