LEARN BY EXAMPLE

2.4.2 ページタイトル レベル A

タイトルからページの主題や目的がわかるようにする。

概要

ページの主題や目的を説明するタイトルを付けます。HTMLではページ全体のタイトルをhead内のtitle要素に設定します。

2ページのタイトルを見比べる

利用者が困る例 どちらもサイト名だけ

タイトルだけでは主題を区別できない。
一覧も写真教室の詳細も「市民センター」というタイトルになっています。

改善した例 各ページの主題がわかる

ページタイトル講座一覧|市民センター

講座一覧

写真教室・料理教室

ページタイトル写真教室のご案内|市民センター

写真教室のご案内

カメラを使って撮影を学びます。

本文を読む前にページを選びやすい。
一覧か写真教室の詳細かを、タイトルから確認できます。

図:同じ2ページでタイトルを変更した比較。上の帯はページタイトル、その下は本文です。すべて静止図であり、実際のブラウザーのタブではありません。長いタイトルも比較できるように、図では帯の中を折り返しています。

達成できないと起こる問題の例

講座一覧と写真教室の詳細を別々のタブで開きます。どちらのタイトルも「市民センター」だけなので、タイトルから各ページの内容を区別できません。

スクリーンリーダーでページのタイトルを確認する人は、目的のページか判断するために本文を読む必要があります。複数のタブを開いている人も、写真教室のページを探しにくくなります。

達成するための改善例

同じ2ページに「講座一覧|市民センター」「写真教室のご案内|市民センター」と付けます。本文を読み始める前に、各ページの主題を確認できます。

図は2ページのタイトルと本文見出しの対応を示す静止図です。図の中で実際のブラウザーのタブを切り替える操作はありません。

確認のポイント

  • 各ページに主題や目的を説明するタイトルがありますか。
  • サイト名だけでなく、そのページで何を読めるか、何ができるかが伝わりますか。
  • HTMLでは本文の見出しだけで済ませず、title要素にも設定していますか。
  • 内容や画面が動的に切り替わる場合、現在の主題や目的にタイトルが合っていますか。

条件と補足

見出しとページタイトルの違い

本文の見出しはページ内の内容を示し、ページタイトルはブラウザーのタブなどでもページを識別するために使われます。見出しが適切でも、ページ全体のタイトルが空だったり、主題を説明していなかったりすると問題が残ります。

HTMLのtitle要素と、要素に補足を付けるtitle属性も別のものです。

説明する内容と編集上の工夫

主題や目的がわかることが要件です。サイト名の追加、ページごとの区別、短くまとめることは、探しやすくするための工夫です。図では主題を先に置き、サイト名を後に添えていますが、この順序や区切り文字が必須という意味ではありません。

文書やウェブアプリケーションの名前だけで、そのページの目的を十分に説明できる場合もあります。タイトルに必ず細かな説明を追加するのではなく、実際の内容に合うか判断します。

URLが変わらず画面が切り替わる場合

一つのURLのまま、一覧から詳細などの別の画面へ切り替わるアプリケーションでも、現在の主題や目的を説明するタイトルにします。入力のたびなど、すべての小さな変化でタイトルを変更するという意味ではありません。

この改善例で扱うのは、ページタイトルの付け方です。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

出典の最終確認: 2026-11-09。