この記事でわかること

  • ページをまたいで出てくるメニューの順番をそろえる、WCAGの達成基準3.2.3
  • 同じ働きのボタンやリンクに同じ名前を付ける、達成基準3.2.4
  • 項目が増えたり減ったりするとき、名前が場面で変わるときの考え方
  • ページごとのメニューとボタンの名前を書き出して比べる手順と、試した結果

ページを移るたびにメニューの並びが入れ替わったり、同じ検索ボタンが「検索」と「探す」で呼び分けられていたりすると、使う人はそのたびに探し直すことになります。この記事では、ページ間で並びと名前をそろえる考え方を、アクセシビリティの基準にもとづいて紹介します。

よりどころにしたのは、W3Cの達成基準3.2.3と3.2.4の解説(Understanding)、技法G61・G197、失敗例F66・F31です。原文は2026年10月30日に確認しました。書き出しのコードは、架空のサイトのページを作業PCのChromeで開いて動かしています。特定のツールやスクールを推すことはしません。

結論: 並びの順番と、名前の付け方を決めておく

まとめると、ページをまたいで出てくるメニューは、項目どうしの前後を変えずに並べ、同じ働きの部品には同じ名前を付けます。 項目の追加や削除、場面に合わせた名前の言い換えはかまいません。よくある場面は次のとおりです。

場面 考え方
区分ごとにサブメニューを足す 間に入れてよい
ページによって項目を外す 残りの前後は保つ
「検索」と「探す」が混ざる 名前をそろえる
文字とアイコンで出し分ける 同じ名前を付ける
同じアイコンで働きが違う 対象外

メニューの並びをそろえる基準(3.2.3)

WCAGの達成基準3.2.3(レベルAA)は、複数のページで繰り返し出てくるナビゲーションの仕組みを、繰り返されるたびに同じ相対的な順番で出すことを求めています。利用者が自分で並びを変えた場合は除きます。

解説では、画面の一部を拡大して見る人は、見た目の手がかりやページの端を頼りに、繰り返し出てくる内容をすばやく見つけると説明しています。画面を読み上げて上から順に聞く人にとっても、ページ全体の中でメニューがいつも同じ順番にあることが役に立ちます。

「同じ順番」は、サブメニューや補助のメニューを使ってはいけないという意味ではありません。技法G61では、ほかの項目が間に入ったり外れたりしても、残っている項目どうしの前後が変わらなければよいとしています。

部品の名前をそろえる基準(3.2.4)

WCAGの達成基準3.2.4(レベルAA)は、一連のページの中で同じ働きをする部品を、一貫した形で識別できるようにすることを求めています。

解説が対象として挙げるのは、サイト全体のメニューのリンク・検索・アカウントの操作・フッターのリンクのように、ページをまたいで何度も出てくる部品です。読み上げソフトを使う人は聞き慣れた部品の名前で、認知に障害のある人は見慣れた見た目で、働きを見分けています。

名前がまったく同じである必要はありません。5ページ目から見て「4ページ目」を「前のページ」と呼ぶように、場面に合わせて変えてもよく、同じ働きだと分かればそろっているとしています。反対に、働きが違う部品は、見た目が似ていても対象外です。

よくある失敗とW3Cの例

失敗例F66は、繰り返し出てくるメニューのリンクの順番が、2つ以上のページで違う場合です。国名のリンクの1番目と2番目が、ページによって入れ替わっている例が載っています。

失敗例F31は、同じ働きの部品の名前がページごとに違う場合です。あるページでは「search」、別のページでは「find」と書かれた検索ボタンが、最もよくある例とされています。

解説では、見た目の文字が同じ「Search」でも、読み上げに使う名前の片方が「Find」なら失敗としています。同じ保存の働きなのに、ページによってフロッピーディスクとチェックの印でアイコンが違う場合も失敗の例です。

書き方の例: メニューとボタンの名前を書き出す

次のコードは、開いているページのメニューのリンクと、ボタンの名前を書き出すものです。ブラウザの開発者ツールのコンソールに貼って実行します。ページの内容は変えず、読み取るだけです。

// メニューのリンクとボタンの名前を、1行のJSONで書き出す
const nav = document.querySelector("nav");
const links = [...nav.querySelectorAll("a")].map(
  (a) => a.textContent.trim()
);
const buttons = [...document.querySelectorAll("button")].map(
  (b) => b.getAttribute("aria-label") || b.textContent.trim()
);
console.log(JSON.stringify({ page: location.pathname, links, buttons }));

ボタンの名前は、aria-label属性があればその値、なければボタンの文字として読む簡易な形です。aria-labelledby属性などで名前を付けている場合は、ブラウザのアクセシビリティの表示で確かめます。

手順: ページごとに書き出して比べる

技法G61・G197と失敗例F66・F31の確かめ方に沿った手順です。

  1. 繰り返し出てくる部品を選ぶ: サイト全体のメニュー・検索・ログイン・フッターのリンクなど、どのページにも出るものを書き出します
  2. ページごとに書き出す: トップ・区分のページ・記事のページなど、作りの違うページで上のコードを実行し、結果を並べます
  3. 前後の順番を比べる: 両方のページにある項目だけを取り出し、同じ順番になっているかを見ます。増えた項目・減った項目は比べる対象から外します
  4. 名前を比べる: 同じ働きのボタンやリンクの名前が、どのページでも同じかを見ます。アイコンだけのボタンも名前で比べます

試した結果

メニューと検索ボタンを持つ架空のサイトを5ページ用意し、作業PCの中だけで開けるサーバーに置きました。Chromeでページを1つずつ開き、上のコードをそのまま実行しています。

  • トップのページでは、メニューは「ホーム」「サービス」「料金」「会社案内」「お問い合わせ」の5項目、ボタンはページの上と下の「検索」2つとして書き出されました
  • サービスのページでは、「サービス」の後ろに「制作」「保守」の2項目が入って7項目になりましたが、トップと共通の5項目の前後は同じでした
  • お知らせのページでは「会社案内」を外しましたが、残った4項目の前後はトップと同じでした。アイコンだけの検索ボタンも、aria-label属性の「検索」として書き出されました
  • 料金のページでは、「サービス」と「料金」の前後が入れ替わっていて、共通の項目の順番がトップと合いませんでした。検索ボタンの名前も「探す」と出ました
  • お問い合わせのページでは、ボタンの見た目の文字は「検索」でしたが、aria-label属性が「探す」だったため、名前は「探す」と書き出されました

5ページとも、コードが書き出したボタンの名前は、ブラウザのアクセシビリティの情報に出るボタンの名前と同じでした。

動かしたのはMac版のGoogle Chrome 156だけで、画面は出さずに起動しています。読み上げソフトや別のブラウザでは確かめていません。

自分で直すか、相談するかの判断

目安は、「どのページから入っても、メニューの並びと部品の呼び名を一度覚えれば済むか」です。済まないなら、並びと名前の決まりを1か所にまとめます。

ページごとに別の人が作っている、テンプレートが複数あって部品の作りが違う、といった場合は、共通の部品にまとめる作業が要ることがあります。サイトを作った人と進め方を決め、部品の組み立て方で手が止まったときは、Webデザインを教わっている講師に意見を聞いてみるとよいでしょう。

つまずきやすいところ

  • 目で見て同じだから大丈夫と思う: 試したときは、見た目の文字が「検索」のボタンでも、aria-label属性が「探す」だったため、名前は「探す」と書き出されました。解説でも、見た目が同じで読み上げの名前が違う例を失敗としています
  • 増えた項目まで比べてしまう: サブメニューが入ったページは項目数が増えます。試したときも7項目になりましたが、共通の5項目の前後は同じでした。両方にある項目だけで比べます
  • 作りの違うページを見落とす: 試した5ページのうち、並びがずれていたのは料金のページだけでした。テンプレートの違うページを1つずつ選んで比べます
  • ページの最初の並びを変える: スキップリンクのように、どのページでも同じ位置に置く部品もそろえておきます。付け方は、Webデザインでスキップリンクを付けて本文へ移動できるようにする方法で紹介しています
  • 見出しやページの題がページごとにばらばら: メニューをそろえても、見出しの付け方やページの題がばらばらだと、今いる場所が分かりにくくなります。見出しはWebデザインで見出しの階層を正しく付ける方法、題はWebデザインのページタイトルの付け方を参考にしてください

まとめ

  • ページをまたいで出てくるメニューは、項目どうしの前後を変えずに並べます
  • 項目を足したり外したりするのはかまいません。残った項目の前後を保ちます
  • 同じ働きの部品には、どのページでも同じ名前を付けます。場面に合わせた言い換えは、同じ働きだと分かる範囲で使います
  • ページごとにメニューと名前を書き出して並べると、ずれを見つけやすくなります