2026年5月20日

WordPressのアクセシビリティ対応テーマを選ぶポイント

テーマ・デザイン

はじめに

アクセシビリティ対応テーマはキーボード操作・スクリーンリーダー・色覚異常のユーザーすべてが使えるように設計されています。WordPressには「Accessibility Ready」タグのついたテーマがあり、WCAGガイドラインに準拠した実装が求められます。

症状・原因

キーボードだけでサイトをナビゲートできない
スクリーンリーダーでページ構造が読み取れない
色のコントラスト比が低くて読みにくい
フォームのラベルとインプットが紐付いていない

解決手順

ステップ1：スキップリンクを追加する

// header.php の最上部（bodyタグの直後）に追加
<a class="skip-link screen-reader-text" href="#main">
    メインコンテンツへスキップ
</a>

/* スキップリンクのCSS */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: #1d2327;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}

/* フォーカス時に表示 */
.skip-link:focus {
    top: 0;
}

ステップ2：ARIAランドマークを設定する

// header.php
<header class="site-header" role="banner">
    <nav class="site-nav" role="navigation" aria-label="メインナビゲーション">
        <?php wp_nav_menu(['theme_location' => 'primary']); ?>
    </nav>
</header>

// index.php
<main id="main" class="site-main" role="main">
    <?php // ループ ?>
</main>

// sidebar.php
<aside class="site-sidebar" role="complementary" aria-label="サイドバー">
    <?php dynamic_sidebar('sidebar-main'); ?>
</aside>

// footer.php
<footer class="site-footer" role="contentinfo">
    <?php // フッター内容 ?>
</footer>

ステップ3：色のコントラスト比を確保する

WCAG 2.1 AA基準では通常テキストのコントラスト比は4.5:1以上、大きいテキスト（18pt以上）は3:1以上が必要です。

/* NG: コントラスト比が低い組み合わせ */
/* 例: #767676 on #fff → 4.54:1（ギリギリOK） */
/* 例: #999 on #fff → 2.85:1（NG） */

/* OK: 十分なコントラスト比 */
body {
    color: #1d2327; /* on #fff → 16.75:1（十分） */
}

a {
    color: #2271b1; /* on #fff → 4.6:1（OK） */
}

/* フォーカスリングは削除しない */
:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* :focus-visible で視覚的フォーカスをキーボード操作時のみ表示 */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

ステップ4：フォームのアクセシビリティ

// コメントフォームにラベルを紐付ける例
// WordPress標準の comment_form() は適切なラベルを生成します
comment_form([
    'fields' => [
        'author' => '<p class="comment-form-author">
            <label for="author">' . __('名前') . ' <span class="required">*</span></label>
            <input id="author" name="author" type="text" required>
        </p>',
    ],
]);

ステップ5：テーマのアクセシビリティをチェックする

# axe-coreをnpmでインストールしてCLIチェック
npm install -g @axe-core/cli
axe https://example.com

# 結果例（違反が0件が目標）
# Violations: 0 / Passes: 42 / Incomplete: 3

ブラウザ拡張機能での確認：

axe DevTools（Chrome/Firefox拡張）
WAVE（WebAIMのアクセシビリティ評価ツール）
Lighthouse（Chrome DevTools → Lighthouse → Accessibility）

注意事項

outline: none を全要素に適用するのは厳禁です。キーボードユーザーがフォーカス位置を見失います
aria-label と aria-labelledby は視覚的テキストと一致させてください。スクリーンリーダーが読む名前と見た目が異なると混乱します
カラーコントラストは WebAIM Contrast Checker で確認できます

まとめ

スキップリンク（position:absolute → :focus { top:0 }）・ARIAランドマーク（role="main/navigation/banner/contentinfo"）・コントラスト比4.5:1以上・outline の保持が最低限の対応です。WordPress Accessibility Readyテーマはこれらを満たしているので、カスタマイズ時も維持することが重要です。

Post Views: 15