アクセシビリティSEO
アクセシビリティSEOとは、Webアクセシビリティ(WCAG準拠、スクリーンリーダーとの互換性、キーボード操作)と検索エンジン最適化が交わる領域であり、障害のあるユーザーと検索クローラーの双方がページを理解できるようにする実践です。クローラーは本質的に非視覚的なユーザーの一種であるため、この重なりは大きくなります。
アクセシビリティSEOとは、Webアクセシビリティ(WCAG準拠、スクリーンリーダーとの互換性、キーボード操作)と検索エンジン最適化が交わる領域であり、障害のあるユーザーと検索クローラーの双方がページを理解できるようにする実践です。クローラーは本質的に非視覚的なユーザーの一種であるため、この重なりは大きくなります。
なぜ重要なのか
Googlebot、ClaudeBot、GPTBot、そしてスクリーンリーダーはいずれも、ページを一切「見る」ことなくWebページを処理します。これらはHTML構造を解析し、alt textを読み、見出しをたどり、セマンティックなマークアップからページの内容を判断します。目の見えないユーザーに役立つアクセシビリティの改善はすべて、クローラーにも役立ち、その逆もまた然りです。ほとんどのサイトにとって、アクセシビリティSEOは利用可能な最も安価なSEO施策です。コストはわずかで、オーディエンスを広げ、法的リスクを下げ(米国でのADA訴訟は2024年に4,500件を超えました)、順位を改善します。逆に、スクリーンリーダーに不親切なサイトは、AI searchが依存するクローラーにも不親切なのです。
アクセシビリティとSEOが重なるところ
Alt text: スクリーンリーダーはこれを読み上げ、クローラーは画像を理解し、画像検索の順位を決めるために利用します。
見出しの階層: スクリーンリーダーはH1〜H6をページのナビゲーションに使い、クローラーは構造や文脈を理解するために使います。
説明的なリンクテキスト: 「ここをクリック」は、アクセシビリティ(スクリーンリーダーに文脈を与えない)でもSEO(アンカーのシグナルがない)でも失格です。
フォームのラベル: <label>要素はスクリーンリーダーを助け、かつGoogleがリッチリザルトのためにフォームの意図を理解する助けになります。
言語属性: <html lang="en">は、どの言語を使うべきかをスクリーンリーダーや検索エンジンに知らせます。
セマンティックHTML: <nav>、<main>、<article>、<footer>は、アクセシビリティツールとクローラーの双方が利用できる意味を持ちます。
スキップナビゲーションリンク: キーボードユーザーを助け、メインコンテンツの位置をクローラーに知らせます。
色のコントラスト(間接的に): コントラストが悪いと、Core Web Vitalsに反映されるChromeのUXシグナルを誘発する場合があります。
動画のキャプションと文字起こし: アクセシビリティに必須であり、動画コンテンツのSEOindexingに非常に有用です。
テーブルのヘッダー: <th>とscope属性は、スクリーンリーダーを助け、Googleが強調スニペット用にデータを抽出する助けになります。
両者が分かれるところ
純粋な視覚的洗練: アニメーション、パララックス、独自フォントなどは、アクセシビリティともSEOとも交わらない視覚的なUXの関心事です。
リンクビルディング: 純粋にSEOの関心事であり、アクセシビリティに対応するものはありません。
フォーカスのアウトライン: キーボードユーザーには重要ですが、SEOに直接影響しません。
ARIA属性: 多くの場合アクセシビリティ専用であり、検索エンジンはいくつかの特定のケースを除いてほとんどのARIAマークアップを無視します。
よくある成果
すべてのコンテンツ画像に意味のあるalt textを付ける: 装飾的な画像ではなく、情報を担うヒーロー画像、図表、イラストに付けます。
スタイル付きdivではなく本物の見出しを使う: <h2>は意味を持ちますが、<div class="heading">は持ちません。
説明的なanchor textを書く: 「2025年のベンチマークレポートを読む」は「ここをクリック」に勝ります。
音声と動画に文字起こしを提供する: アクセシビリティへの準拠と全文インデックスを一度に達成できます。
Lighthouseで色のコントラストを確認する: アクセシビリティの不備とUXの問題の両方を検出します。
言語属性を付ける: 韓国語のページにはlang="ko"を付けます。
スクリーンリーダーでテストする: VoiceOverやNVDAで10分間サイトを操作してみると、自動ツールが見逃す問題が明らかになります。
SEOフレームワークとしてのWCAG
WCAGの4つの原則、知覚可能、操作可能、理解可能、堅牢(POUR)は、クローラーの関心事にきれいに対応します。
知覚可能: コンテンツはテキスト形式で利用できなければならない → クローラーがそれを解析できる。
操作可能: マウスなしでナビゲーションが機能しなければならない → クローラーがリンクをたどれる。
理解可能: コンテンツとUIは予測可能でなければならない → クローラーが意味を抽出できる。
堅牢: コンテンツは支援技術全般で機能しなければならない → 各検索エンジンのクローラーがそれを解析できる。
WCAGで高いスコアを出すサイトは、たいていデフォルトでクロールしやすくなっています。
よくある間違い
装飾的な画像にalt textを付ける: スクリーンリーダーは純粋に装飾的な画像をスキップすべきです。明示的にalt=""を使ってください。
スタイル目的だけで見出しタグを使う: 実際にはサブ段落の見出しである「見出し」は、両方のオーディエンスを混乱させます。
ラベルのないアイコンのみのボタン: スクリーンリーダーには見えず、クローラーにも意味をなしません。aria-labelまたは視覚的に隠したテキストを追加してください。
テキストレイヤーのないPDF: 画像のみのスキャンPDFは、誰にも見えません。
情報を伝えるのに色だけに頼る: 「赤いボタンをクリック」は色覚特性のあるユーザーには通じず、クローラーには見えません。
自動アクセシビリティ監査を省く: axe、Lighthouse、WAVEのようなツールは、問題の30〜40%を数秒で検出します。
アクセシビリティを法的準拠だけと混同する: 本当のアクセシビリティは、訴訟リスクだけでなく、製品、SEO、収益を改善します。
Sources: