2026年5月20日

WordPressのWCAG 2.1対応サイトを構築する方法

テーマ・デザイン

はじめに

WCAG（Web Content Accessibility Guidelines）2.1のAA基準はWordPressサイトで最低限対応すべき国際標準です。日本の改正障害者差別解消法（2024年）でも公共サービスのウェブアクセシビリティ確保が求められています。主要な対応箇所を解説します。

症状・原因

画像にalt属性がない
フォームにラベルが紐付いていない
キーボードだけで全機能が使えない
動画に字幕がない

解決手順

ステップ1：画像のalt属性を正しく設定する（WCAG 1.1.1）

// 意味のある画像: 内容を説明するalt
the_post_thumbnail('medium', ['alt' => get_the_title()]);

// 装飾的な画像: alt=""（空）でスクリーンリーダーがスキップ
<img src="decoration.png" alt="">

// WordPress メディアライブラリでalt設定
// メディア → 画像を選択 → 「代替テキスト」フィールドに記入

// functions.php: アイキャッチのalt自動設定
add_filter('wp_get_attachment_image_attributes', function(array $attr, WP_Post $attachment): array {
    if (empty($attr['alt'])) {
        $attr['alt'] = get_the_title($attachment->ID);
    }
    return $attr;
}, 10, 2);

ステップ2：フォームのラベルを紐付ける（WCAG 1.3.1）

<!-- NG: label と input が紐付いていない -->
<label>名前</label>
<input type="text" name="name">

<!-- OK: for と id で紐付け -->
<label for="contact-name">
    名前 <span class="required" aria-label="必須">*</span>
</label>
<input id="contact-name" name="name" type="text"
       required aria-required="true">

<!-- aria-describedby でエラーメッセージと紐付け -->
<input id="contact-email" name="email" type="email"
       aria-describedby="email-error" aria-invalid="true">
<p id="email-error" role="alert" class="field-error">
    メールアドレスを正しい形式で入力してください
</p>

ステップ3：キーボード操作を確保する（WCAG 2.1.1）

/* フォーカスリングは絶対に消さない */
:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

/* tabindex の正しい使い方 */
/* tabindex="0": フォーカス可能にする */
/* tabindex="-1": JSでフォーカス制御（Tabキー対象外） */
/* tabindex="1以上": 使用禁止（Tab順序が狂う） */

// モーダル: 開いたらフォーカスを移動、閉じたら戻す
function openModal(modal, trigger) {
    modal.setAttribute('aria-hidden', 'false');
    modal.querySelector('[data-modal-close]').focus();
}

function closeModal(modal, trigger) {
    modal.setAttribute('aria-hidden', 'true');
    trigger.focus(); // トリガーボタンにフォーカスを戻す
}

ステップ4：色のコントラスト比を確保する（WCAG 1.4.3）

/* WCAG AA 基準 */
/* 通常テキスト（18pt未満）: 4.5:1 以上 */
/* 大きいテキスト（18pt以上 or 14pt太字）: 3:1 以上 */
/* UI部品・グラフィック: 3:1 以上 */

/* 安全な組み合わせ例 */
.text-body     { color: #1d2327; } /* on #fff → 16.75:1 ✅ */
.text-link     { color: #0073aa; } /* on #fff → 4.66:1  ✅ */
.text-muted    { color: #50575e; } /* on #fff → 7.0:1   ✅ */
.text-error    { color: #8a1f11; } /* on #fff → 9.73:1  ✅ */

/* NG例 */
.text-light    { color: #999; }    /* on #fff → 2.85:1  ❌ */
.text-placeholder { color: #bbb; } /* on #fff → 1.87:1  ❌ */

ステップ5：動画・音声コンテンツへの対応（WCAG 1.2.x）

<!-- 動画に字幕（キャプション）を付ける -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <!-- WebVTT形式の字幕ファイル -->
    <track kind="captions" src="captions-ja.vtt"
           srclang="ja" label="日本語字幕" default>
</video>

// captions-ja.vtt
WEBVTT

00:00:00.000 --> 00:00:03.000
こんにちは、WordPressの設定方法を解説します。

00:00:03.500 --> 00:00:08.000
まず管理画面にログインしてください。

注意事項

WCAG 2.1 AAAは最高基準で、すべての条件を満たすことが現実的に困難なコンテンツもあります。まずAAを目標にしてください
tabindex="1" 以上の正の値は推奨されません。Tab順序がDOM順序と乖離してしまいます
プラグインやテーマが追加するコードもアクセシビリティに影響します。サードパーティのコンポーネントも確認が必要です

まとめ

WCAG 2.1 AAの主要対応：画像に意味あるalt・フォームのfor/id紐付け・outline 削除禁止・コントラスト比4.5:1以上・動画にで字幕追加。Lighthouseのアクセシビリティスコアを90以上にすることを目標にしてください。

Post Views: 19