WCAG 2.2の達成基準2.4.2「ページタイトル」は、各ウェブページに、そのトピックまたは目的を説明するタイトルを設けるよう求めるLevel Aの基準です。
ページタイトルが内容を端的に示していれば、利用者は本文を読み始める前に現在地を把握し、複数のタブや検索結果から目的のページを見分けやすくなります。
この記事では、達成基準が求める内容と、実務上の推奨事項を分けたうえで、HTML、動的ページ、PDFの実装と確認方法を解説します。
ページタイトルが示すもの
ページタイトルとは、ブラウザのタブやウィンドウ名に表示され、支援技術からも参照できるページ名です。
HTMLでは、通常は文書のhead内にあるtitle要素で指定します。
本文の大見出しであるh1はページ内の主題を示しますが、title要素とは役割も表示場所も異なるため、どちらか一方で代用するものではありません。
スクリーンリーダーの仕組みと実装上の配慮を知ると、ページタイトルが現在地の把握に役立つ理由も理解しやすくなります。
達成基準2.4.2の要件
達成基準が直接求めるのは、ページにタイトルがあり、そのタイトルがページのトピックまたは目的を説明していることです。
「短いタイトルにする」「サイト全体で表記を完全に統一する」こと自体は、この達成基準の文言に含まれる必須要件ではありません。
ただし、内容を見分けられる範囲で簡潔にし、同じサイトでは一定の並び順を採用すると、利用者がページ名を予測しやすくなります。
要件を確認する四つの問い
- タイトルが空欄や仮の文言になっていないか。
- タイトルだけで、現在のページのトピックまたは目的を説明できるか。
- 同じサイトの別ページと見分けられるか。
- 画面の内容が切り替わる構成では、現在の表示内容とタイトルが一致しているか。
HTMLのtitle要素を実装する
HTML文書では、head内に空でないtitle要素を一つ置き、ページ固有の内容を先に書きます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせ｜会社名</title>
</head>
<body>
<h1>お問い合わせ</h1>
<p>お問い合わせ方法をご案内します。</p>
</body>
</html>この例では、「お問い合わせ」がページ固有の目的を示し、「会社名」がどのサイトのページかを補っています。
組織名を必ず含める必要はありませんが、含める場合はページ固有の情報が長い組織名に埋もれない順序にすると判別しやすくなります。
ページの種類に応じたタイトル例
| ページ | タイトル例 | 伝える内容 |
|---|---|---|
| トップページ | 会社名｜公式サイト |
サイトや組織の名称 |
| お問い合わせ | お問い合わせ｜会社名 |
連絡方法を案内するページであること |
| 製品詳細 | 製品名｜会社名 |
対象となる製品名 |
| 入力内容の確認 | お問い合わせ内容の確認｜会社名 |
手続きの現在の段階 |
区切り記号や並び順をサイト内でそろえることは、個々のページを識別できるタイトルを付けた後に行う設計上の改善です。
動的ページでは表示内容に合わせて更新する
画面遷移のたびに文書全体を読み込み直さないウェブアプリケーションでも、利用者から見て別のページやビューへ移ったなら、ページタイトルを現在の内容に合わせて更新します。
document.title = '注文履歴｜会社名';初期値の「読み込み中」や前の画面のタイトルを残すと、ブラウザのタブに表示されている名前と実際の内容が一致しません。
実装後は、ブラウザ内の操作で画面を切り替え、切り替え先ごとにタイトルが変わることを確認します。
PDFでは文書のタイトルを設定する
ウェブ上で提供するPDFでは、文書情報のTitle項目に内容を説明するタイトルを設定します。
ファイル名だけでは内容を説明できない場合があるため、文書のプロパティを開き、題名が空欄や作成ソフトの初期値になっていないかを確認します。
タイトル以外の読み上げ順、見出し、代替テキストも含めた確認は、読み上げやすいPDFを作る実務ガイドで解説しています。
よくある失敗と修正方法
| 失敗例 | 問題 | 修正例 |
|---|---|---|
<title></title> |
ページを識別する情報がない | <title>サービス一覧｜会社名</title> |
無題のドキュメント |
作成時の仮タイトルが内容を説明していない | ページ固有のトピックまたは目的に置き換える |
全ページが会社名 |
ページ同士をタイトルで見分けられない | 製品名｜会社名のように固有情報を加える |
| 画面遷移後も前のタイトル | 表示内容とタイトルが一致しない | ビューの切り替えに合わせて更新する |
表記ゆれだけを直しても、タイトルがページの内容を説明していなければ達成基準を満たしたとは判断できません。
自動検査と目視確認を組み合わせる
タイトルの有無や空欄は自動検査で見つけやすい一方、その文言がページの目的を十分に説明しているかは、実際の内容と照らした判断が必要です。
| 確認項目 | 確認方法 | 判定の要点 |
|---|---|---|
title要素の有無 |
ソースコードまたは自動検査 | head内に空でない要素があるか |
| 内容の適切さ | 目視確認 | タイトルだけでページのトピックまたは目的が分かるか |
| ページ間の識別 | 複数のタブを開いて比較 | 同じサイトの別ページを見分けられるか |
| 動的な更新 | 画面遷移を手動で操作 | 現在の表示内容とタイトルが一致するか |
| 支援技術での把握 | スクリーンリーダーでページを開く | ページ名として理解できる文言になっているか |
公開前の確認手順
- ページを開き、ブラウザのタブに表示されるタイトルを読む。
- 本文を見なくても、何のページか判断できるかを確認する。
- 同じサイトの関連ページを複数開き、タイトルだけで区別できるかを比べる。
- 動的に内容が変わるページでは、主要な画面遷移を一通り操作する。
- 自動検査の結果と目視確認を記録し、修正後に再検査する。
ページタイトル改善の要点
- 各ページに、トピックまたは目的を説明する空でないタイトルを付ける。
- HTMLでは
head内のtitle要素を使い、本文のh1とは別に設定する。 - 同一サイト内のページを見分けられるように、ページ固有の情報を含める。
- 動的ページでは表示内容の切り替えに合わせ、PDFでは文書情報のTitle項目にタイトルを設定する。
- 自動検査だけで完了せず、内容の適切さを人が確認する。
当社では、ウェブアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
サイトのページタイトルを含むアクセシビリティ改善に関心がある方は、サービスの詳細をご覧ください。