WCAG 2.2 ガイドライン「2.4.2 ページタイトル」Level A について
はじめに
WCAG 2.2の「2.4.2 ページタイトル」では、ウェブページのタイトルがそのトピックや目的を明確に記述していることを求めています。この基準は、ユーザーが訪問したページの内容をすぐに理解しやすくし、特にスクリーンリーダーを使用するユーザーにとって利便性を向上させることを目的としています。
1. 基準の概要
要件
- 明確で簡潔なタイトルを提供する:
- ページの内容や目的を適切に表現する。
- タイトルを一貫性のある形式で統一する。
- タイトル要素を正しく使用する:
- HTMLの
<title>タグを使用してタイトルを指定する。
- HTMLの
2. 実装方法
a. 適切なタイトルを指定する
HTMLの<title>タグを使用
HTML
<!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>
この例では、タイトルが「お問い合わせ – 会社名」と指定され、ページの目的が明確です。
b. 一貫性のある形式を採用
ウェブサイト全体でタイトル形式を統一することで、ユーザーが各ページの内容を容易に認識できます。
タイトル形式の例
- ホームページ:
会社名 - ホーム - お問い合わせページ:
お問い合わせ - 会社名 - 製品ページ:
製品名 - 会社名
c. JavaScriptを使用して動的にタイトルを変更
動的タイトル変更の例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ロード中...</title>
</head>
<body>
<h1>ウェブサイトへようこそ</h1>
</body>
<script>
document.title = 'ウェブサイト - ホームページ';
</script>
</html>
d. PDF文書の場合
PDFの場合、ドキュメントの情報辞書を使用してタイトルを指定します。
3. よくある失敗例とその改善策
a. タイトルが空または不適切
失敗例
<title>無題のドキュメント</title>
問題点
- タイトルが空で、ページの目的がわかりません。
改善策
<title>サービス一覧 - 会社名</title>
b. 一貫性のないタイトル
失敗例
- ページA:
会社名 - 製品紹介 - ページB:
製品の詳細 | 株式会社〇〇 - ページC:
〇〇製品リスト
改善策
- 統一されたフォーマットを使用:
製品紹介 - 会社名製品の詳細 - 会社名製品リスト - 会社名
4. アクセシビリティのメリット
a. ユーザーの利便性向上
- タイトルが明確であれば、ユーザーは訪問したページが自分の目的に合致しているかすぐに判断できます。
b. スクリーンリーダーの利用者に配慮
- タイトルはスクリーンリーダーで最初に読み上げられるため、ページ内容を簡潔に伝える手段となります。
c. SEO効果
- 明確でわかりやすいタイトルは、検索エンジンの評価を向上させ、ウェブサイトの可視性を高めます。
5. テスト方法
a. 手動テスト
- 各ページのタイトルが適切か確認。
- ブラウザのタブやウィンドウで表示されるタイトルをチェック。
b. スクリーンリーダーを使用したテスト
- スクリーンリーダーでページを開き、最初に読み上げられるタイトルが適切か確認。
c. 自動テストツール
- AxeやWAVEなどのアクセシビリティツールを使用して、ページタイトルの適切性を確認。
まとめ
WCAG 2.2の「2.4.2 ページタイトル」は、ユーザーがページ内容をすぐに理解できるようにするための重要な基準です。
実装ポイント
- 内容や目的を明確に示すタイトルを提供する。
- HTMLの
<title>タグを正しく使用する。 - ウェブサイト全体で一貫したタイトル形式を採用する。
これにより、すべてのユーザーが目的のコンテンツにスムーズにアクセスできるウェブサイトを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。