ウェブアクセシビリティとは、障害の有無や利用環境にかかわらず、必要な情報や機能を利用できるようにする考え方です。基本用語やWCAGの位置づけを先に確認したい場合は、ウェブアクセシビリティとWCAGの基礎解説も参照してください。
アクセシビリティとSEOは目的が異なります。WCAGへの適合だけで検索順位が上がるとは限りません。しかし、画像の意味を文章で補う、リンク先を具体的に示す、見出しで内容を整理するといった実装は、支援技術を使う人と検索エンジンの双方がページを理解する助けになります。
アクセシビリティとSEOが重なる範囲
両者の関係は、「アクセシビリティがSEOの代わりになる」ことではありません。同じHTMLや文章を、人にも機械にも解釈しやすい形へ整える部分で重なります。
| 実装 | 利用者への効果 | 検索上の接点 |
|---|---|---|
| 代替テキスト | 画像を見られない状況でも意味や機能が分かる | 画像の主題を理解する手掛かりになる |
| 説明的なリンク | リンク先を開く前に目的を判断できる | リンク先の内容を示す文脈になる |
| 見出しとランドマーク | ページ内を見出しや領域単位で移動しやすい | 内容のまとまりを明確にできる |
| 字幕と文字起こし | 音声を聞けない状況でも内容を受け取れる | 映像や音声の情報をテキストとして提示できる |
一方、色のコントラスト、キーボード操作、フォーカス表示、動くコンテンツの停止手段は、主として利用上の障壁を減らすための要件です。これらを検索順位への近道として説明すると、施策の目的を取り違えてしまいます。
重なり1：画像の目的に合わせた代替テキスト
代替テキストは、画像が伝える情報や機能をテキストで補うものです。画像の見た目を機械的に説明するのではなく、そのページで画像が果たす役割に合わせて書きます。
- 情報を伝える画像：本文の理解に必要な要点を短く説明します。
- リンクやボタンの画像：見た目ではなく、移動先や実行される操作を示します。
- 装飾画像：読み上げる必要がない場合は
alt=""とします。 - グラフや複雑な図：短い代替テキストだけで済ませず、データや結論を本文にも記載します。
この使い分けは、W3Cのaltディシジョンツリーで確認できます。Googleも、代替テキストを画像の主題を理解する情報として利用し、画像がリンクの場合はアンカーテキストとして扱うと説明しています。キーワードの羅列は利用者の体験を損ない、スパムと見なされる可能性があるため避けます。詳しい書き分けは、alt属性の基本と書き方で解説しています。
<!-- 商品の特徴を伝える画像 -->
<img src="mug-amber.jpg" alt="飴色で持ち手の大きい陶器製マグカップ">
<!-- 装飾だけを目的とする画像 -->
<img src="divider.svg" alt="">
<!-- 画像だけで構成されたリンク -->
<a href="/recipes/curry">
<img src="curry.jpg" alt="スパイスカレーの作り方">
</a>重なり2：移動先が分かるリンクテキスト
アンカーテキストは、リンクとして表示される文字列です。「こちら」や「詳しく見る」だけでは、リンクだけを拾い読みする人が移動先を判断できません。Googleのリンクのベストプラクティスでも、簡潔で、リンク元とリンク先に関連する説明的な文言が推奨されています。
- 「こちら」から「料金プランを確認する」へ変更する
- 「PDF」から「2026年度料金表（PDF、1.2MB）」へ変更する
- 同じページに「詳しく見る」が並ぶ場合は、それぞれの移動先を名前で示す
ファイル形式や容量は、実際に確認できる場合だけ記載します。情報が古くなる可能性があるため、差し替え時の更新も運用に含めます。
重なり3：見出しとランドマークによるページ構造
見出しは文字を大きくするための装飾ではなく、内容の階層を表すHTMLです。W3Cの見出しに関する解説では、ページの構成を反映した見出しを使い、可能な範囲で見出しレベルを飛ばさないことが勧められています。
ランドマークは、ヘッダー、ナビゲーション、本文、補足、フッターなど、ページの主要領域を示す仕組みです。<main> や <nav> などのHTML要素には対応する役割があり、支援技術による領域間の移動を助けます。ただし、同じ役割を必要以上に増やすと、かえって移動先を選びにくくなります。
<header>サイト共通の案内</header>
<nav aria-label="主要ナビゲーション">...</nav>
<main>
<h1>製品サポート</h1>
<section>
<h2>よくある質問</h2>
...
</section>
</main>
<footer>運営者情報</footer>重なり4：字幕と文字起こしによる情報の補完
字幕は、発話と理解に必要な音の情報を映像と同期して示します。文字起こしは、音声や映像の内容を順に読めるテキストとして提供するものです。両者は似ていますが、利用場面とWCAG上の要件は同じではありません。
W3Cの字幕ガイドでは、音声情報を含む収録済み動画には字幕が必要と説明しています。自動で作られた字幕は誤認識を含むことがあるため、公開前に内容と時刻を確認します。字幕や文字起こしとして提示したテキストは、音声を利用できない人の選択肢を増やすと同時に、ページ上で内容を検索しやすくします。
SEOとは分けて確認するアクセシビリティ要件
検索上の効果を説明しやすい施策だけを選ぶと、実際の利用を妨げる問題が残ります。次の項目は、順位への影響を断定せず、利用者が情報や機能へ到達できるかという基準で確認します。
- コントラスト：WCAG 2.2の達成基準1.4.3では、通常の文字に4.5対1以上、大きな文字に3対1以上のコントラスト比を求めています。ロゴや純粋な装飾などには例外があります。数値はW3Cのコントラスト解説で条件とともに確認します。
- キーボード操作とフォーカス：Tabキーなどで主要な操作へ移動でき、現在位置を視覚的に確認できるかを試します。
- 動くコンテンツ：自動で始まり、ほかの内容と並行して5秒を超えて動く表示には、一定の例外を除いて一時停止、停止、非表示の手段が必要です。詳細はWCAG 2.2のPause, Stop, Hide解説を確認します。
- 色に依存しない表示：入力エラーや選択状態は、色だけでなく文言や形でも伝えます。
優先順位を決める実装チェックリスト
短時間で全ページを直そうとすると、確認が浅くなります。まず利用頻度と事業上の重要度が高いテンプレートを選び、次の順で点検します。
- トップページ、商品詳細、問い合わせ、資料請求など、優先ページを決める
- ページタイトルと見出しが内容の順序を正しく表しているか確認する
- 画像を情報、機能、装飾、複雑な図に分類し、代替手段を整える
- 「こちら」などの曖昧なリンクを、移動先が分かる文言へ直す
- キーボードだけで主要な操作を完了できるか確認する
- 本文、リンク、ボタン、入力欄のコントラストとフォーカス表示を測る
- 動画の字幕と文字起こしを確認し、自動字幕の誤りを修正する
- カルーセルや自動更新表示に、必要な停止手段があるか確認する
自動チェックだけでは、代替テキストが文脈に合うか、キーボード操作の順序が自然かまでは判断できません。ツールによる検出と手動確認を組み合わせる方法は、ウェブアクセシビリティチェックの進め方で整理しています。
改善後に分けて測る指標
アクセシビリティとSEOの成果は、同じ指標だけで評価できません。次のように目的別に記録すると、何が改善したのかを判断しやすくなります。
- アクセシビリティ：検出した問題数、手動確認の結果、キーボードで完了できる操作、字幕の確認状況
- 検索：インデックス状況、検索結果での表示、対象ページへの検索流入
- 利用行動：主要導線の完了率、フォームで離脱した箇所、問い合わせ内容
数値が変わっても、単独の施策だけが原因とは限りません。変更日と対象ページを記録し、同時に行った改修を分けて検証します。
人に届く実装が検索にも伝わる
ウェブアクセシビリティは、検索順位を上げるためだけの施策ではありません。情報や機能へ到達できない状況を減らすことが目的です。その過程で、代替テキスト、説明的なリンク、論理的な見出し、字幕と文字起こしを整えると、検索エンジンにもページの内容を伝えやすくなります。
着手時は、まず重要な一つのテンプレートを選び、画像、リンク、見出し、キーボード操作を確認します。小さく直して測り、同じ基準をほかのページへ広げる運用が、改善を続けるための現実的な進め方です。
参考資料
この記事に関連する株式会社greedenの取り組み
記事で示した改善は、順位対策だけでなく、情報へたどり着けない人を減らす取り組みです。株式会社greedenは、Webアクセシビリティサービス「UUU」とチェックサービスを提供しています。自社サイトの現状確認と改善の第一歩に活用できます。