すべてのページで同じページタイトル

園芸店のオンラインショップで、春植え球根、買い物かご、お問い合わせのページを新しいタブで開き、見比べようとしています。どのタブにも「Fernway Garden」と表示されます。買い物かごを探すには、タブを一つずつクリックするしかありません。スクリーンリーダー利用者がウィンドウを切り替えると、毎回「Fernway Garden」と読み上げられ、ページの中を読まないと現在地が分かりません。履歴やブックマークにも同じ名前が並ぶため、昨日見たページに戻るには一つずつ開くことになります。

このショップはシングルページアプリケーションで、これはシングルページアプリケーションが2.4.2を満たせない最もよくある原因です。ブラウザーが読み込むHTMLは一つだけで、その共通レイアウトが <title>Fernway Garden</title> を設定します。その後はルーターがページを読み込まずにクライアント側で本文を入れ替えるため、アプリ自身のコードが変えない限り、タイトルはそのままです。サーバーで描画するサイトでは、各ページが自分の <title> を持って届くため、このような失敗はまれです。シングルページアプリケーションでは、誰かがルーターにタイトルを組み込むまで、新しいプロジェクトは最初からこの状態です。どのページにもタイトルはありますが、ページの内容を表していません。WCAG 2.4.2は、各ページに主題や目的を表すタイトルを求めています。商品一覧でも買い物かごでも同じタイトルでは、どちらも表していません。

同時に開くページが増えるほど問題は大きくなります。タブが一つなら迷いませんが、同じ名前のタブが5つあれば迷います。ノートパソコンの幅の狭いタブや、スマートフォンのタブ一覧には、タイトルの最初の数語しか表示されません。そのため、サイト名から始まるタイトルは、後ろが異なっていても同じように見分けられません。

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

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

• 視覚を使わない スクリーンリーダーは、ページを開いたときやウィンドウを切り替えたときに、まずタイトルを読み上げます。どのタイトルも同じだと手がかりにならず、ページの中を読み進めないと現在地が分かりません。
• 言語・認知・学習の能力が限られる 現在地を覚えておく代わりに、タブ、履歴、ブックマークに頼っている人にとって、同じ名前が並んだ一覧は何の助けにもなりません。
• 視覚が限られる 画面を拡大している人は、画面の一部しか見ていません。タブのタイトルで現在地をすばやく確かめられないと、ページ内を見回すことになります。

axeの document-title のようなページ単位のチェックは、ページを一つずつ確認し、タイトルがあって空でないかだけを見ます。そのため、このサイトはすべてのページが合格です。一方、サイト全体を巡回するクローラー（多くは検索エンジン対策用）は、複数のURLで重複するタイトルを報告します。サイト全体でこの問題を見つけられるので、一度実行してください。ただし、どちらのツールも、タイトルがページを表しているかは判断しません。「Page 2」や「basket-view」のようなルート名でも合格します。また、クローラーは各URLを新しく読み込むため、アプリ内を移動した後にタイトルが古いまま残る問題（戻る操作の後も前の画面のタイトルのままなど）には気づきません。提案された修正にも同じ確認が必要です。共通レイアウトでタイトルを設定するだけでは、同じ問題を繰り返します。開いたページだけでなく、アプリ内を移動した後のタイトルも確認してください。