WCAG 2.4.2: ページタイトル

WCAG 2.4.2 は、すべてのウェブページに、そのトピックや目的を特定できる、説明的で意味のあるタイトルを付けることを求めています。これにより、特にスクリーンリーダーに依存しているユーザーや複数のタブを管理しているユーザーが、素早く状況を把握し、効率的に操作できるようになります。

この規定が意味すること

WCAG 2.4.2「ページタイトル」は、原則「操作可能」の下にあるレベルAの達成基準です。そこでは次のように述べられています。「ウェブページには、トピックまたは目的を説明するタイトルがある。」 実務的には、ユーザーに配信されるすべてのHTMLドキュメントには、<head> セクション内に <title> 要素を含める必要があり、その要素には、そのページのコンテンツ、機能、またはサイト内での文脈を意味のある形で特定できるテキストを含めなければならない、ということを意味します。

この達成基準は、個々のウェブページすべてに適用されます — それが静的なHTMLファイルであっても、動的にレンダリングされるシングルページアプリケーション（SPA）のビューであっても、モーダルページであっても、複数ステップのウィザードの1ステップであっても同様です。ユーザーが直接ナビゲートできる、または現在のビューを置き換える、それぞれの個別の「画面」は、それぞれ固有で説明的なタイトルを持つ必要があります。

ページがこの達成基準に適合するのは、その <title> 要素が存在し、空でなく、ページのトピックまたは目的を十分に説明するテキストを含んでいる場合です。タイトルはインターネット全体で一意である必要はありませんが、タイトルだけを聞いたり読んだりしたユーザーが、追加の文脈なしにそのページが何についてのものか理解できる程度には具体的である必要があります。

ページがこの達成基準に不適合となるのは、次のいずれかの条件に該当する場合です。<head> から <title> 要素が完全に欠落している場合、<title> 要素は存在するが空（テキストを含まない）である場合、「Untitled Document」「New Page」といった汎用的なプレースホルダーテキスト、または説明的な内容を伴わない素のドメイン名だけを含んでいる場合、あるいはシングルページアプリケーションが新しい論理ビューに遷移してもドキュメントタイトルを動的に更新しない場合です。

WCAGは、この達成基準についてレベルAでの明示的な例外を定義していません。規模、対象者、目的にかかわらず、すべてのウェブページは説明的なタイトルを持たなければなりません。ただし、Understanding文書では、タイトルが唯一の識別手段である必要はなく、存在していて、基本的な方向づけの手がかりとして機能するのに十分な説明性を備えていればよい、と明確にしています。

なぜ重要か

ページタイトルは、ユーザーがウェブページに到達したとき、またはページ間を移動するときに最初に触れる情報のひとつです。その欠如や不十分さは、複数の異なるユーザーグループにとって障壁となります。

スクリーンリーダー利用者 — その多くは全盲または重度のロービジョンです — は、ページが読み込まれたとき、あるいはフォーカスが新しいドキュメントに移ったときに、ページタイトルが即座に読み上げられます。世界保健機関によれば、世界で約22億人が何らかの視覚障害を抱えており、このアナウンスは、正しいページが読み込まれたことを確認し、さらに探索する前にその内容を理解するための主な手段です。意味のあるタイトルがなければ、タブ間を移動したり、一度離れたページに戻ったりする際に、全盲のユーザーは再び状況を把握するためだけにページ全体の内容を読み直さなければならず、複雑なレイアウトでは数分かかることもあります。

認知・学習障害のあるユーザーは、明確で一貫したページタイトルから大きな恩恵を受けます。記憶に困難のあるユーザーが調査中に複数のタブを開く場合、タブタイトルは各タブの唯一の可視ラベルであることがよくあります。「Account Settings — Accsible Dashboard」のようなタイトルであれば、目的のタブを即座に特定できますが、「Page」のようなタイトルや空のタイトルでは、内容を知るために各タブをクリックしなければならず、認知的負荷や混乱を招きます。

運動障害のあるユーザーで、Dragon NaturallySpeakingのような音声コントロールソフトウェアに依存している人は、ナビゲーションコマンドを発行した後、目的の場所に到達したかどうかを確認するためにページタイトルを利用できます。明確なタイトルは、繰り返しの修正や再ナビゲーションの必要性を減らし、時間と身体的負担の両方を節約します。

具体的なシナリオを考えてみましょう。トルコの病院の患者が、支援技術としてスクリーンリーダーを使い、複数ステップにわたるオンライン予約フォームに入力しているとします。各ステップでページタイトルが現在のステップを反映して更新されない場合 — たとえば「Step 2 of 4: Personal Information — Appointment Booking — Hospital Name」のようになっていない場合 — 患者は、ページの再読み込み後や別のブラウザウィンドウに切り替えた後に、自分の進捗を素早く確認する手段がありません。自分がどこにいるのか理解するためにフォーム全体を読み直さなければならず、すでに体調が悪かったりストレスを抱えていたりする人にとっては、特に負担となります。

アクセシビリティにとどまらず、ページタイトルには重要なSEO上の価値もあります。検索エンジンは、検索結果リストの主ラベルとして <title> 要素を利用します。説明的でキーワードを適切に含んだタイトルは、クリック率と発見性を向上させます。WCAG 2.4.2を正しく実装しているウェブサイトは、障害のあるユーザーにとって有益であるだけでなく、オーガニック検索全体のプレゼンスも高めることができるため、アクセシビリティはビジネス面・技術面の両方でメリットとなります。

テスト方法

axe DevToolsまたはLighthouseによる自動スキャン: 対象のウェブページをChromeまたはFirefoxで開きます。DevTools（F12）を開き、axe DevToolsパネル（インストールされている場合）またはLighthouseタブに移動します。アクセシビリティ監査を実行します。axeの結果で、「Critical」または「Serious」カテゴリの document-title ルール違反がないかを特に確認します。Lighthouseも同様に、Accessibility監査の中でタイトルの欠如や空のタイトルをフラグします。レポート用に、正確なページURLとタイトルテキスト（またはその欠如）を記録します。このテストは、エラーページ（404, 500）や確認ページを含む、アプリケーション内のすべての固有ルートやビューに対して繰り返します。
ブラウザによる手動確認: 任意のブラウザで、ブラウザのタブラベルを確認します — そこにはページを特定できる意味のある説明的なタイトルが表示されているはずです。ページを右クリックして「ページのソースを表示」を選択するか、DevToolsを開いてElementsパネルに移動します。<head> セクションを探し、<title> 要素が存在し、汎用的でないテキストコンテンツを持っていることを確認します。タイトルが表示されているページコンテンツと関連していること、そして複数ページからなるサイトの場合は、そのページ固有の目的を反映する形で他のページのタイトルと区別されていることを確認します。
NVDA + Firefoxによるスクリーンリーダーテスト: Firefoxでページを開き、NVDAを起動します。ページが読み込まれると、NVDAはページタイトルを即座に読み上げるはずです。Alt+左矢印、続いてAlt+右矢印でページから離れ、再び戻り、正しいタイトルが再度読み上げられることを確認します。シングルページアプリケーションでは、クライアントサイドのルート変更をトリガーし、更新されたタイトルが読み上げられるかを確認します。NVDAが何も読まない、またはページ読み込み時に汎用的で役に立たない文字列を読む場合は、不適合です。
VoiceOver + Safari（macOS/iOS）によるスクリーンリーダーテスト: VoiceOverを有効にします（MacではCommand+F5）。ページを読み込みます。VoiceOverは読み込み時にページタイトルを読み上げます。ローター（Control+Option+U）を使い、Webスポットまたは見出しリストに移動します — ページ上部に表示されるウィンドウタイトルは、<title> 要素の内容と一致しているはずです。iOSでは、タイトルはSafariのタブスイッチャーに表示されるので、それが説明的であることを確認します。
JAWS + Chromeによるスクリーンリーダーテスト: JAWSを起動した状態でChromeでページを開きます。JAWSは読み込み時にページタイトルを読み上げます。Insert+F1を押してJAWSヘルプウィンドウを開き、報告されているページタイトルを確認します。セッション中いつでもInsert+Tを押してタイトルを読み上げ、SPAのナビゲーションイベント後に正しく更新されているかを確認します。
シングルページアプリケーション（SPA）のルート変更テスト: SPA内の異なるビュー（例: ホームページから商品ページ、チェックアウトページへ）をナビゲートします。各ナビゲーションの後、ブラウザのタブラベルを確認し、スクリーンリーダーを使ってタイトルが更新されているかを検証します。現在のビューにかかわらずセッション全体を通してタブラベルが同じままであれば、固有のタイトルを持たないすべてのビューについて2.4.2の不適合となります。

修正方法

title要素が欠落している — 不適切な例

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- No <title> element present -->
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

title要素が欠落している — 適切な例

<!DOCTYPE html>
<html lang='tr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- Title added: describes the page topic and includes the site name for context -->
  <title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
  <h1>Ürünlerimiz</h1>
</body>
</html>

汎用的なプレースホルダータイトル — 不適切な例

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Generic title provides no useful context to the user -->
  <title>Untitled Document</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

汎用的なプレースホルダータイトル — 適切な例

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <!-- Descriptive title: page function first, then site name -->
  <title>Contact Us — Accsible Support</title>
</head>
<body>
  <h1>Contact Us</h1>
</body>
</html>

ルート変更時にタイトルを更新しないシングルページアプリケーション — 不適切な例

<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>My App</title>
</head>
<body>
  <div id='root'></div>
  <!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>

ルート変更時にタイトルを更新しないシングルページアプリケーション — 適切な例

<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->

<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->

<!-- Or using plain JavaScript on each route render: -->
<script>
  // Called whenever the SPA navigates to a new view
  function updatePageTitle(pageTitle, siteName) {
    document.title = pageTitle + ' — ' + siteName;
  }
  // Example: updatePageTitle('Shopping Cart', 'Accsible Store');
  // Results in: <title>Shopping Cart — Accsible Store</title>
</script>

各ステップで同一タイトルを使っているマルチステップフォーム — 不適切な例

<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>

各ステップで同一タイトルを使っているマルチステップフォーム — 適切な例

<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>

よくある間違い

CMSやフレームワークのデフォルトタイトルを本番環境に残したままにする: 多くのコンテンツ管理システム（WordPress、Drupal、カスタムフレームワークなど）は、「Just another WordPress site」や生のサイトURLのようなプレースホルダータイトルを持った状態で出荷されます。開発者がローンチ前にタイトルテンプレートを設定し忘れ、すべてのページが役に立たない、あるいは同一のタイトルのままになってしまうことがあります。常にCMSの設定でタイトル構成を確認し、リリース前に実際のURLでテストしてください。
すべてのページでサイト名だけをタイトルとして使う: サイト内のすべてのページに <title>Accsible</title> を設定すると、document-title の自動チェック（要素が空でないこと）には合格しますが、WCAG 2.4.2が求める「説明的」であることには反します。各ページは、同じサイト内の他のページと区別できるタイトルを持たなければなりません。
ページ固有の内容より先にサイト名を置く: <title>Accsible — Contact</title> のようなパターンでは、スクリーンリーダー利用者はページが何についてかを知る前にブランド名を聞かなければなりません。推奨されるパターンは <title>Contact — Accsible</title> のように — ページのトピックを先に、サイト名を後に置く形です。これにより、ユーザーは最も関連性の高い情報をすぐに得ることができます。
シングルページアプリケーションでクライアントサイドナビゲーション後に document.title を更新し忘れる: React、Vue、Angularのようなフレームワークは、ルートが変更されてもドキュメントタイトルを自動的には更新しません。開発者は、各ルートコンポーネントで document.title を明示的に設定するか、（react-helmet-asyncやVue Metaのような）ヘッド管理ライブラリを使用する必要があります。これを怠ると、初回読み込み後のすべてのSPAビューが同じタイトルを共有することになります。
空または空白だけのtitle要素を使用する: スペースや改行だけを含む <title> </title> 要素は、支援技術の利用者にとってはタイトルがないのと実質的に同じですが、ブラウザタブがエラーを出さず単に空白に見えるだけなので、ビジュアルQAでは見落とされがちです。axe-coreはこれを検出しますが、人によるレビューでは見逃されることがあります。
エラーページ（404, 500, バリデーションエラー）でタイトルを更新しない: エラーページは、前のページのタイトルを引き継いだり、汎用的なサイトタイトルに戻ったりすることがよくあります。404エラーを引き起こしたスクリーンリーダー利用者は、自分のナビゲーションが失敗したことを理解するために、以前いたページのタイトルではなく「Page Not Found — Accsible」と聞く必要があります。
内容が異なる複数ページでタイトルが重複している: 商品一覧ページと商品詳細ページの両方が「Products — Accsible Store」というタイトルを持っている場合、認知障害のあるユーザーや複数タブを管理しているユーザーは両者を区別できません。論理的に異なるすべてのページは、その具体的な内容を反映した固有のタイトルを持つべきです。
テンプレート変数名がそのまま入った動的生成タイトル: サーバーサイドレンダリングのバグにより、テンプレート変数がレンダリングされず <title>{{page.title}} — MySite</title> のようなタイトルになることがあります。これらは「空でない」チェックには合格しますが、意味のある情報を提供しません。デプロイ前にテンプレートレンダリングの失敗を検出できるよう、CI/CDパイプラインにタイトル内容の自動チェックを組み込んでください。
タイトルが長すぎる、またはキーワードを詰め込みすぎている: WCAGは文字数制限を設けていませんが、60〜70文字を超えるような過度に長いタイトルは、ブラウザタブや検索結果で切り捨てられ、スクリーンリーダーも最も重要な部分を読み上げる前に文字列全体を読み上げなければなりません。タイトルは簡潔で具体的にし、最も重要な情報を前方に配置してください。
iframeドキュメントにタイトルを付けない: 完全なHTMLドキュメントを読み込むインラインフレーム（<iframe>）にも、意味のある <title> 要素を持たせるべきです。iframe 要素自体にはフレームの目的を説明する title 属性を持たせる必要がありますが、その内部で読み込まれるドキュメントも、フレーム内コンテンツにナビゲートする支援技術のために、自身の <head> 内に <title> を持つことで恩恵を受けます。

トルコのアクセシビリティ規制との関係

トルコの大統領通達2025/10は、2025年6月21日付官報第32933号で公布され、幅広い公共・民間セクターのデジタルサービスに対して拘束力のあるアクセシビリティ要件を定めています。WCAG 2.4.2「ページタイトル」はレベルAの達成基準であり、レベルAへの適合はこの通達における必須の最低条件です。対象組織は、公共機関であれば1年以内に、民間企業であれば2年以内にレベルA適合を達成することが求められています。

この通達は幅広い組織種別を対象としており、トルコのデジタル経済の大部分にとってWCAG 2.4.2を関連性の高いものにしています。対象組織には、すべての公共機関・政府機関、eコマースプラットフォーム、銀行・金融機関、病院・医療提供者、20万件以上の加入者を持つ通信会社、認可を受けた旅行代理店、民間の交通事業者、そして国民教育省（MoNE）に認可された私立学校が含まれます。

これらの組織にとって、意味のあるページタイトルを提供しないことは、単なるベストプラクティスの見落としではなく、規制上の不適合リスクです。実務的な影響を考えてみましょう。商品カテゴリーページがすべて同じ汎用的なタイトルを共有しているトルコのeコマースプラットフォームや、予約フローの各ステップが同じ区別のないタイトルを持つ公立病院の予約システムは、いずれもこの通達のアクセシビリティ要件に明確に違反していることになります。規制当局や申立人は、これらの不備を必須レベルA基準違反として指摘することができます。

WCAG 2.4.2を正しく実装することは、通常、各ページに適切に構成された説明的な <title> 要素を持たせるためのテンプレートレベルの変更だけで済むため、最小の労力で最大の効果が得られるアクセシビリティ改善のひとつです。2025/10通達の対象となる組織にとって、ページタイトルへの対応は、アクセシビリティ是正ロードマップの中でも最初に解決すべき項目のひとつであるべきです — 実装が容易で、検証もしやすく、axe-coreの document-title ルールによって直接テストできるため、監査人や規制当局に対して適合を示しやすいからです。

トルコ語話者向けにサービスを提供する組織は、ページタイトルがページコンテンツに一致する適切な言語で提供されていることも確認すべきです。これは、トルコ語環境のスクリーンリーダーがページ読み込み時に読み上げるタイトルを正しく解釈し発音できるようにするために、lang 属性要件（WCAG 3.1.1）を補完するものです。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）