アクセシビリティ（a11y）は SEO と相性が良く、両軸で改善する

なぜこれを学ぶか

a11y（accessibility）は UX とコンプライアンスだけでなく SEO にも効く。 両軸で改善できる稀有な施策、優先度高。

法的義務 + ユーザー価値 + SEO の三立。

学ばないと起きること

学ぶメリット

• 法的リスク回避
• UX 向上
• SEO シグナル強化
• 商談で「a11y + SEO 連動」を即答

仕組み

WCAG 2.2 の主要レベル

事実上 AA 準拠が現代 Web の必須ライン。

a11y と SEO の重なり

主要 a11y 要素

画像

<!-- alt 属性 -->
<img src="seo.jpg" alt="SEO の概念図 - クロール、インデックス、ランキングの 3 段階">

<!-- 装飾画像（読み上げ不要）-->
<img src="decoration.jpg" alt="" role="presentation">

見出し階層

<h1>記事タイトル</h1>
  <h2>セクション 1</h2>
    <h3>サブセクション</h3>
  <h2>セクション 2</h2>

階層を飛ばさない、論理順序。

aria-label

<!-- アイコン ボタン -->
<button aria-label="メニューを開く">
  <svg>...</svg>
</button>

<!-- ナビゲーション領域 -->
<nav aria-label="メイン ナビゲーション">
  ...
</nav>

キー概念

コントラスト比

WAVE / axe DevTools で自動チェック可能。

キーボード操作

すべての機能をマウスなしで操作可能に:

• Tab キーでフォーカス移動
• Enter / Space で実行
• Esc でモーダル閉じる
• 矢印キーでセレクト

フォーカス可視化（focus-visible）必須。

スクリーン リーダー対応

主要スクリーン リーダー:

• VoiceOver（macOS / iOS）
• NVDA（Windows）
• JAWS（Windows）
• TalkBack（Android）

実機確認が確実。

a11y チェックツール

よくある誤解

実務での適用

a11y + SEO チェックリスト

1. 全画像に alt 属性
2. 装飾画像は alt=""
3. 見出し階層 h1 → h2 → h3 順序
4. aria-label でアイコン ボタン補完
5. コントラスト比 AA 準拠
6. キーボード操作可能
7. 動画 / 音声に字幕
8. フォーム ラベル明示
9. ページ言語属性（lang="ja"）
10. 焦点可視化（focus-visible）

CI 統合

# GitHub Actions 例
- name: a11y チェック
  run: pa11y-ci --config .pa11yci

PR ごとに a11y チェック自動実施。

トラブル別の対処

公式ソース

• WCAG 2.2 ガイドライン
• SEO スターター ガイド
• axe DevTools

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。