応用編: アクセシビリティ - WordPressオリジナルテーマ作成

アクセシビリティとは？

アクセシビリティ（a11y）は、障害の有無に関わらず、すべての人がWebサイトを利用できるようにすることです。

💡 アクセシビリティが重要な理由

法的義務: 多くの国で法律で義務付けられている
社会的責任: 誰もが情報にアクセスできる権利
ビジネス: より多くのユーザーにリーチできる
SEO: 検索エンジンにも優しい構造
ユーザビリティ: すべてのユーザーにとって使いやすくなる

WCAG 2.1ガイドライン

Web Content Accessibility Guidelines（WCAG）は、アクセシビリティの国際標準です。

レベルA

最低限の基準。これを満たさないと重大な問題がある

レベルAA

推奨レベル。多くの法律で求められる基準

レベルAAA

最高レベル。すべてのサイトで達成は困難

🎯 目標

一般的なWebサイトはWCAG 2.1 レベルAAを目指すべきです。

セマンティックHTML

適切なHTML要素を使うことが、アクセシビリティの基本です。

悪い例

HTML（非推奨）<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

良い例

HTML（推奨）<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

💡 使用すべきセマンティック要素

<header> - ヘッダー
<nav> - ナビゲーション
<main> - メインコンテンツ
<article> - 記事
<section> - セクション
<aside> - サイドバー
<footer> - フッター

見出しの適切な使用

HTML<h1>ページタイトル</h1>
  <h2>セクション1</h2>
    <h3>サブセクション1-1</h3>
    <h3>サブセクション1-2</h3>
  <h2>セクション2</h2>
    <h3>サブセクション2-1</h3>

⚠️ 見出しの注意点

h1は1ページに1つだけ
見出しレベルをスキップしない（h2の次にh4など）
装飾目的で見出しを使わない
見出しは階層的に使用する

キーボード操作への対応

マウスなしでもすべての機能が使えるようにします。

フォーカス可能な要素

CSS/* フォーカス時のスタイル（絶対に削除しない） */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* より目立つフォーカススタイル */
:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
}

スキップリンクの実装

header.php<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>

<header>...</header>

<main id="main-content">
    ...
</main>

style.css/* スキップリンク */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0073aa;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

カラーコントラスト

テキストと背景のコントラスト比を確保します。

💡 WCAG 2.1 のコントラスト基準

レベルAA: 通常テキスト 4.5:1、大きなテキスト 3:1
レベルAAA: 通常テキスト 7:1、大きなテキスト 4.5:1

コントラストチェックツール

WebAIM Contrast Checker
Chrome DevTools（Lighthouse）
Colour Contrast Analyser

画像の代替テキスト

適切なalt属性

HTML<!-- 意味のある画像 -->
<img src="sunset.jpg" alt="夕日に照らされた富士山">

<!-- 装飾画像 -->
<img src="decoration.png" alt="">

<!-- リンク画像 -->
<a href="/contact/">
    <img src="contact-icon.png" alt="お問い合わせ">
</a>

<!-- 複雑な図表 -->
<img src="chart.png" alt="2020年〜2025年の売上推移グラフ" 
     longdesc="chart-description.html">

⚠️ alt属性のルール

すべての画像にalt属性を付ける
装飾画像は alt=""
「画像」「写真」などの単語は不要
文脈に合った説明を書く

ARIAの使用

ARIA（Accessible Rich Internet Applications）は、スクリーンリーダーに追加情報を提供します。

基本的なARIA属性

HTML<!-- ランドマーク -->
<nav aria-label="メインナビゲーション">...</nav>
<nav aria-label="フッターナビゲーション">...</nav>

<!-- 現在のページ -->
<a href="/about/" aria-current="page">会社概要</a>

<!-- モーダル -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">確認</h2>
    ...
</div>

<!-- ライブリージョン（動的コンテンツ） -->
<div aria-live="polite" aria-atomic="true">
    読み込み中...
</div>

ボタンとリンクの区別

HTML<!-- ページ遷移 → aタグ -->
<a href="/contact/">お問い合わせ</a>

<!-- アクション → buttonタグ -->
<button type="button" onclick="openModal()">開く</button>

<!-- divをボタンにしない（悪い例） -->
<div onclick="doSomething()">クリック</div> ❌

<!-- 正しい方法 -->
<button type="button" onclick="doSomething()">クリック</button> ✓

フォームのアクセシビリティ

HTML<form>
    <!-- labelとinputの関連付け -->
    <label for="name">お名前<span aria-label="必須">*</span></label>
    <input type="text" id="name" name="name" required 
           aria-required="true" aria-describedby="name-hint">
    <small id="name-hint">フルネームで入力してください</small>
    
    <!-- エラー表示 -->
    <div id="name-error" role="alert" aria-live="assertive" style="display:none;">
        お名前を入力してください
    </div>
    
    <!-- ラジオボタングループ -->
    <fieldset>
        <legend>性別</legend>
        <label><input type="radio" name="gender" value="male"> 男性</label>
        <label><input type="radio" name="gender" value="female"> 女性</label>
        <label><input type="radio" name="gender" value="other"> その他</label>
    </fieldset>
    
    <button type="submit">送信</button>
</form>

動画・音声のアクセシビリティ

HTML<!-- 字幕付き動画 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="captions" src="captions-ja.vtt" srclang="ja" label="日本語">
    <track kind="captions" src="captions-en.vtt" srclang="en" label="English">
</video>

<!-- 音声説明 -->
<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    <a href="transcript.html">音声の文字起こしを見る</a>
</audio>

テスト方法

手動テスト

キーボードだけで全機能が使えるか
スクリーンリーダーで読み上げ確認（NVDA、JAWS、VoiceOver）
ブラウザのズーム機能（200%）で表示崩れがないか
カラーブラインドシミュレーター

自動テストツール

Lighthouse（Chrome DevTools）
axe DevTools（ブラウザ拡張）
WAVE（WebAIM）
Pa11y（CLI）

WordPressアクセシビリティAPI

functions.phpfunction mytheme_setup() {
    // アクセシビリティ対応を宣言
    add_theme_support('accessibility-ready');
    
    // スキップリンクのサポート
    add_theme_support('skip-link', array(
        '#main-content' => 'メインコンテンツへ',
        '#sidebar' => 'サイドバーへ',
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

アクセシビリティチェックリスト

HTML構造

セマンティックHTMLを使用
見出しが階層的
ランドマークロール（header、nav、main等）

キーボード操作

すべての機能がキーボードで操作可能
フォーカスが視覚的に分かる
スキップリンクを実装
タブ順序が論理的

色とコントラスト

色だけで情報を伝えない
テキストのコントラスト比4.5:1以上
フォーカス表示が明確

画像・メディア

すべての画像にalt属性
動画に字幕を提供
自動再生を避ける

フォーム

labelとinputが関連付けられている
エラーメッセージが明確
必須項目が分かりやすい

まとめ

アクセシビリティ対応により、以下のことが実現できます：

✅ すべての人が使えるサイト
✅ 法的要件への準拠
✅ SEOの向上
✅ より広いユーザー層へのリーチ

🎊 応用編完了！

すべての応用編を習得しました！これであなたは、プロフェッショナルなWordPressテーマを自在に開発できるスキルを身につけました。最後にセキュリティ対策を確認して、安全なテーマ開発を心がけましょう。

♿ アクセシビリティ（a11y）